autoprefixer: env option does not work

I am working in a monorepo with the following root configuration:

.browserslistrc

[legacy]
last 2 versions
not dead

[modern]
last 2 Chrome versions
last 2 ChromeAndroid versions
last 2 Firefox versions
last 2 FirefoxAndroid versions
last 2 Safari versions
last 2 iOS versions
last 2 Edge versions

[node]
node 12

babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', {
            browserslistEnv: 'node',
            corejs: 3,
            useBuiltIns: 'usage',
        }],
        '@babel/preset-react',
        '@babel/preset-typescript',
    ],
};

Then in packages/app I have a webpack.config.js file that uses autoprefixer as a plugin for the postcss-loader and also uses the babel-loader. This is how it looks like:

module.exports = {
    // ...
    module: {
        rules: [
            {
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true,
                    overrides: [{
                        presets: [
                            ['@babel/preset-env', {
                                browserslistEnv: 'legacy',
                                corejs: 3,
                                useBuiltIns: 'usage',
                            }],
                        ],
                    }],
                    rootMode: 'upward',
                },
                test: /\.(jsx?|tsx?)$/,
                type: 'javascript/auto',
            },
            {
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            esModule: true,
                        },
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            esModule : true,
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                        plugins: [
                            autoprefixer({ env: 'legacy' }),
                        ],
                    },
                    {
                        loader: 'sass-loader',
                    },
                ],
                test: /\.scss$/,
            },
        ],
    },
    // ...
};

When I run this config, babel-loader transpiles the code as expected, it detects all the targets specified in the legacy environment in the .browserslistrc at the root of the monorepo. However, autoprefixer (v9.8.4) does not seem to be able to detect any browser configuration because I tried console.log(autoprefixer({ env: 'legacy' }).info()) and the output was No browsers selected. I also tried moving the .browserslistrc to packages/app but the result was the same.

Is this a bug? Or am I doing anything wrong?

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 15 (8 by maintainers)

Most upvoted comments

The fix was released in 9.8.6

You can help us by retweeting about our Open Collective: https://twitter.com/PostCSS/status/1288937473276444672