:root issue, ordering issue, or css module issue when using postcss-loader

[evans863]

I've been working on getting postcss-loader working with mini-css-extract-plugin. I saw another postcss-loader issue that's been closed but it looks like he was overriding his postcss config with his webpack config. I don't believe this is the case with me.

I've created a small React application with a couple components. Each component has it's own CSS file (e.g. ./src/ModuleOne/ModuleOne.css and ./src/ModuleTwo/ModuleTwo.css and there is one additional CSS file ./src/index.css.

It looks like postcss-loader and postcss-cssnext are doing their thing but when everything gets bundled together with mini-css-extract-plugin something is off. I'm not sure exactly what the issue is but it looks like the order might be off (due to async?).

Here is a small example displaying the issue (i.e. styles not being applied and weird ordering). Any insight would greatly be appreciated.

https://github.com/evans863/postcss-example

EDIT 3: With or without the optimization.splitChunks.cacheGroups it appears to bundle everything into one file. The issue still persists however.

EDIT 2: If you comment out postcss-loader everything appears as it should be (:root get bundled like it should). The CSS files get bundled up and placed in the head. It's just when using postcss-loader with mini-css-extract-plugin that there seems to be an issue (appears :root is gone). Very well could be how I've configured both but I feel like I've done it correctly.

EDIT: I am getting a few warnings on build. An example is:

(Emitted value instead of an instance of Error) postcss-custom-properties: C:\cygwin64\home\evans.863\lab\postcss-example\src\ModuleTwo\ModuleTwo.css:7:3: variable '--color-blue' is undefined and used without a fallback

I assumed that when the chunks were merged to the single file it would work itself out so I employed the following to suppress the warnings (which you won't find in this repo) from MoOx/postcss-cssnext#186:

{
  features: {
    customProperties: {
      warnings: false
    }
  }
}

[alexander-akait]

I will investigate this in enar future. Feel free to ping me If there are no answers within 72 hours, a lot of issue, thanks!

[alexander-akait]

@evans863 when you use postcss-loader on each css, file execute separably i.e --color-blue in ModuleTwo.css is unavailable (other variable also).
Solution:
postcss.config.js

module.exports = {
  plugins: {
    'postcss-cssnext': {
      features: {
        customProperties: {
          variables: {
            "color-red": "rgba(255, 0, 0, 1)",
            "color-blue": "rgba(0, 0, 255, 1)",
            "color-lightGray": "rgba(242, 242, 242, 1)",
            "color-white": "rgba(255, 255, 255, 1)",
            "moduleWidth": "300px"
          }
        }
      }
    }
  }
};

postcss-custom-properties just unknown value of variable. Looks it is not related to mini-css-extract-plugin. Thanks! Feel free to feedback.