2

I'm trying to implement Dark mode/ light mode variant in my LWC open source application which internally uses base lightning components.

I read the documentation about using styling hooks from Lightning design systems, but not sure if this is applicable for Open source or not Lightning design system guide to styling hooks

I tried using this in my opensource LWC application but got following error when trying to run npm run build

⚡⚡⚡⚡  Lightning Web Components ⚡⚡⚡⚡⚡

⌛  Creating build configuration
�  Starting build process.
�  Module build failed (from ./node_modules/lwc-webpack-plugin/dist/loader.js):
CssSyntaxError: E:\Omkar\code\plugin SFDC LWC\SFDC-Extension-LWC\src\modules\my\queryBox\queryBox.css:3:5: Invalid definition of custom property "--sds-c-button-brand-color-background".
Improve this question
1
  • Works perfectly well on lightning platform
    – Omkar Deokar
    Dec 18, 2020 at 17:36

1 Answer 1

Reset to default
1

This is an issue in the tool create-lwc-app that compiles the build file than the LWC Open Source Project itself.

The issue is raised here. You will have to fix the open source project or wait for the author to fix it to be able to use it.

The LWC OSS does support the custom CSS properties and the styling hooks. This is documented here.

This is fixed in latest upgrades so you should be able to use custom properties config!

Improve this answer
2
  • Workaround mentioned on the github issue worked (by defining custom property in the index.html), will be awesome to be able to control it via component bundle itself
    – Omkar Deokar
    Dec 22, 2020 at 4:18
  • 1
    Again the workaround is not elegant solution at all! The bug needs to be fixed! I am sure author will patch it up soon, if not I plan to spend sometime getting it to work by contributing to the project.
    – Mohith Shrivastava
    Dec 22, 2020 at 4:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .