css modules, postcss + webpack with IE 11 fallback

Question

My question is more approach. I have a project that uses only css, with css custom properties. vars for example. This project is react, with css modules enabled. With a structure like below:

component -- folder1 ---- folder1.css -- folder2 ----folder2.css node_modules -- module1 ---- module1.css

In the local project I have webpack, with postcss loader and the following plugins:

{
   loader: "postcss-loader",
   options: {
    ident: "postcss",
    plugins: loader => [
      require("postcss-import")({ root: loader.resourcePath, skipDuplicates: true }),
      require("postcss-preset-env")()
      ]
    }
}

In both the local component and the node_modules *.css files there's :root definitions. For which variables are set.

For the example I have a colors file with all color variables defined.

My goal is so that in dev and production, I have all var() output the IE 11 value. So let's say color is var(--color-black) it would output color: #000 & color: var(--color-black).

What's happening is I have to import in each module for the fallback to appear. That only works for the local css files under component and not the node_modules. This also applies the same :root values multiple times.

What I am looking for is what others might have done that use the least amount of postcss configurations to achieve something that will work in IE 11+ but still allow just the writing of future css.

Any help would be appreciated.

Answer 1

You can add browsers: 'last 2 versions' to your postcss config file to get fallbacks for older browsers, here is an example of my configuration on a real project.

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {
      browsers: 'last 2 versions',
      features: {
        'nesting-rules': true,
        'custom-media-queries': true,
        'color-mod-function': true
      }
    },
  },
}