CSS custom properties are not polyfilled

Is this a bug report?

Yes

I have CSS variables (custom properties) in my CSS, which are not supported by IE. The CRA docs state “Support for new CSS features like the all property, break properties, custom properties, and media query ranges are automatically polyfilled to add support for older browsers.” However, they are not polyfilled when they are imported from another file.

Steps to reproduce

// A.css
:root {
  --test: #fff;
}

// B.css
@import 'A.css'
body {
  color: var(--test)
}

Expected Behavior

The built CSS file should have the CSS variables processed out and replace the var(–) calls with the proper values

Actual Behavior

The autoprefixer works as expected, adding vendor prefixes and such, and changing the browserslist settings do alter the outputted CSS in some way. However, no browserslist setting is making the custom properties be post-processed, and as such the CSS will not work on IE. It seems like the variable replacement is happening before the concatenation from imports, and so it doesn’t find the property definition from other files.

Note that I also deleted node_modules and package-lock and the issue persists.

[vivekweb2013]

This is still not resolved? CSS custom properties are such a cool feature which I’m still not using due to its incompatibility with IE 11. I don’t want to add SASS/LESS into the project, rather use this awesome CSS feature that is now part of CSS specification. Waiting for this issue to get resolved…

[chce]

Also seeing this issue.