How do I make Autoprefixer process my new css files?

[mpbrunelle]

Issue Overview

Autoprefixer does not seem to process the new CSS files that I add to the assets/css/src/ folder. For example, the color variables don't get a fallback unless I include _custom-properties.css in the new CSS file, which is not ideal because it declares all the variables again.

I am working on two themes that both have this problem. I have tried to call the print_styles() function on a template page or on a template part, and I have the same problem both times.

Describe your environment

Editor: VS code
OS: MacOS Mojave (10.14.6)

Steps to Reproduce

1. Create a new CSS file in assets/css/src/.
2. Use a custom property (color) on an element in that file (e.g. background-color: var(--color-theme-primary)).
3. Add the CSS file to inc/Styles/Components.php
4. Call the wp-rig->print_styles() function in a template page
5. Check if the fallback for the color added in the new stylesheet has been added.

Expected Behavior

background-color: : #e36d60;
background-color: var(--color-theme-primary));

Current Behavior

background-color: var(--color-blue);

Possible Solution

Screenshots / Video

Related Issues and/or PRs

[DemkivV]

I ran into the same problem.
Though, to me it seems like Autoprefixer is actually processing the CSS files (since all /css/src/**/*.css are declared to be processed). The problem seems to be not whether Autoprefixer is processing your new CSS files, but how. And as you guessed, the problems seems to be in the dependency for declared variables in the _custom-properties.css.

If I got it right, you wish to resolve variables in your CSS files, that are declared in an external file. If Autoprefixer is not able to resolve CSS variables from external files, I don't see how it should know which values to insert into the CSS variable polyfills. Are you aware of such a feature in Autoprefixer?

If there is no such feature, having a redundant include of the _custom-properties.css is a small price to pay for the support of IE and other browsers, that don't support CSS variables.

Otherwise, a workaround on the side of WP Rig could be to detect the minifed content of the _custom-properties.css outside of the global.min.css and remove it after the PostCSS plugin has done its job, e.g. by extending the styles.js to do such a cleanup.

[mpbrunelle]

Thank you for your answer. I'll leave the include for now.

[alexwcoleman]

Another workaround is to declare your own custom properties in your custom stylesheet. The fallbacks will appear in the styesheet. I'll sniff around to see if there is something to be done in the interim, or if it's something we'll include later.