CssSyntaxError: LWC1009: postcss-plugin-lwc: 2:3: Invalid definition of custom property

[erocheleau]

Summary

LWC Local Development does not support the use of styling hooks as documented here Lightning Design System Styling Hooks.

A variation of this screen and this error will be displayed instead

"CssSyntaxError: LWC1009: postcss-plugin-lwc: 2:3: Invalid definition of custom property "--slds-c-checkbox-color-border"."

Steps To Reproduce:

1. Attempt to override a LWC styling hooks in your component:

:host {
  --slds-c-checkbox-color-border: var(#747474);
}

2. Open the component in the LWC Local Dev Server.

Expected result

Expected the component to render correctly with the style override.

Actual result

A variation of this screen and this error will be displayed instead

"CssSyntaxError: LWC1009: postcss-plugin-lwc: 2:3: Invalid definition of custom property "--slds-c-checkbox-color-border"."

Additional information

sfdx plugins

>>> @salesforce/lwc-dev-server 2.11.0

This had also been reported a long time ago in a different repository: forcedotcom/lwc-dev-server-feedback#76

SFDX CLI Version:

sfdx version

>>> sfdx-cli/7.171.0 wsl-x64 node-v16.13.2

[AnanyaJha]

Hi @erocheleau thanks for reporting this! Unfortunately our team will not be able to pick up any changes related to Local Dev Server this year, but we're happy to hear your feedback. If you have any further issues or feedback for the product, feel free to leave a comment - forcedotcom/lwc-dev-server-feedback#143. Thank you for the patience