when overriding standard components css variables this exception happens: CssSyntaxError: LWC1009: postcss-plugin-lwc: 4:5: Invalid definition of custom property "--lwc-progressBarColorBackgroundFill

[AllanOricil]

Describe the bug When overriding Standard Lightning Web Components CSS Variables the Dev Server throws the following exception

This is the same error message reported by these other issues, but it happens when we try to override Standard Component CSS Variables:

https://github.com/forcedotcom/lwc-dev-server-feedback/issues/76 https://github.com/forcedotcom/lwc-dev-server-feedback/issues/92

To Reproduce Steps to reproduce the behavior:

1. Create a LWC
2. Add a <lightning-progress-bar value="50" size="large"></lightning-progress-bar> inside your custom LWC
3. Create a .css file for your LWC and add this on it

   lightning-progress-bar {
   --lwc-progressBarColorBackgroundFill:  var(--lwc-brandPrimaryActive, #e60000);
   }

4. Start the Dev Server and verify you have the same error message I posted above
5. Deploy your component to a Sandbox/Scratchorg and verify that the css variable new value was applied without a problem
6. Conclude it is a Dev Server bug

Expected behavior It should be possible to override CSS variables on Standard Lightning Components

Desktop (please complete the following information):

• OS: Windows 10
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] Version 93.0.4577.82 (Official Build) (64-bit)

[stale[bot]]

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.