PostCSS 8 and Webpack

[stephencweiss]

Hi!

Looking at this wiki post on PostCSS 8 for end user I would expect that my configuration is correct.

The error I'm receiving is:

Build Error (CSSModules)

PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users


Stack Trace and Error Report: /var/folders/dz/43k2z2yn53g6g5wgzbx0gw8m0000gp/T/error.dump.10e76794a51ade007cf8a283023dffbc.log

My Package.json

// package.json
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "css-loader": "^5.2.4",
    "cssnano": "^5.0.1",
    "ember-auto-import": "^1.5.3",
    "postcss": "^8.2.10",
    "postcss-calc": "^7.0.1",
    "postcss-import": "^12.0.0",
    "postcss-loader": "^5.2.0",
    "postcss-mixins": "^6.2.0",
    "postcss-nested": "^4.1.0",
    "postcss-nested-ancestors": "^2.0.0",
    "postcss-preset-env": "^6.0.10",
    "postcss-reporter": "^6.0.0",
    "postcss-simple-vars": "^5.0.1",
    "style-loader": "^2.0.0",
    "tailwindcss": "^2.1.1",
  },

And the Ember config:. I'm using auto-import so I assumed I could do a standard webpack config object.

'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    cssModules: {
      headerModules: ['expo/styles/font.css', 'expo/styles/reset.css'],
      plugins: {
        before: [
          require('postcss-preset-env', { browsers: 'last 2 versions' }),
          require('postcss-import'),
          require('postcss-mixins')({
            mixinsDir: 'app/styles/mixins',
          }),
          require('postcss-simple-vars')({ variables: require('./config/css-variables') }),
          require('postcss-calc')({ warnWhenCannotResolve: true, mediaQueries: true }),
          require('postcss-nested-ancestors'),
          require('postcss-nested'),
        ],
        after: [require('autoprefixer')],
      },
    },
    autoImport: {
      webpack: {
        module: {
          rules: [
            {
              test: /\.css$/i,
              use: [
                'style-loader',
                'css-loader',
                {
                  loader: 'postcss-loader',
                  options: {
                    postcssOptions: {
                      plugins: [autoprefixer(),tailwindcss(),cssnano({preset: 'default'})],
                    },
                  },
                },
              ],
            },
          ],
        },
      },
    },
,
  });
};

(Note: package.json and ember-cli-build.js are abridged to try to focus on the areas of interest)

[ai]

You need to ask Ember team. Seems like PostCSS inside Ember is still 7.x.

[stephencweiss]

Will follow up. Thanks @ai !

[stephencweiss]

Just to confirm - you're saying that based on the error - Not by finding the 7.x somewhere in the dependency tree / package json somewhere, right?

[ai]

Yeap. You can check npm ls | grep postcss to confirm my guessing