CSS: Custom properties don't always have correct fallbacks about pattern-directory

[ryelle]

It looks like we already have https://github.com/postcss/postcss-custom-properties here, so this should be working, but I think it doesn't play well with the MiniCSSExtractPlugin step, since only the file that defines the :root is getting the fallbacks.

The easiest solution would be to pull all CSS back into one file, and only import that one file in JS, but I don't want to loose the component-level CSS 😕 Another option is to set up our own postcss config (wp-scripts will use a local postcss.config.js file) & re-define postcss-custom-properties so that we can pass the custom properties in. I think this is the way to go here.

[iandunn]

I don't want to loose the component-level CSS

💯

I think it doesn't play well with the MiniCSSExtractPlugin step

Is that because of a bug, or just an incompatibility? If it's a bug, then another option would be to just file a report upstream. Unless this breaks functionality, I don't think we need to go out of our way for IE11 support.

[ryelle]

I didn't spend enough time in their repo to see if it's intentional, but I think it's just how webpack/postcss works. The custom properties plugin reads the variables from the CSS, but AFAICT postcss runs before the CSS is concat'd, so file-one.css doesn't know the custom properties defined in file-two.css. postcss-custom-properties has a config option to pass in a set of property definitions so it doesn't need to read from the CSS, that's the fix I'm suggesting.

[iandunn]

Huh, it seems odd that it'd require a custom config, I imagine lots of other projects would want to do the same thing. Oh well, maybe wp-scripts just hasn't added support for that yet 🤷🏻‍♂️

In that case the custom config wfm.