function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Kelly SKelly S 

lwc preview locally not loading with styling hooks

I have an LWC using a custom css class to color a lighting-icon. 

<lightning-icon icon-name="utility:file" class="required-icon"></lightning-icon>

.required-icon {
    --slds-c-icon-color-foreground-default: rgba(182,24,26,1);
    --slds-c-icon-color-foreground: rgba(182,24,26,1);
    --slds-c-icon-color-background: white;
}

 

When I view the component directly within salesforce login, it renders without error. When I try to view the component through VS Code > Preview Component Locally on either desktop or an android emulator, I get the following error:

CssSyntaxError: LWC1009: postcss-plugin-lwc: 8:2: Invalid definition of custom property "--slds-c-icon-color-foreground-default".

Error: There were errors while compiling component c/mycomponent at Preview.loadHostedComponent (http://localhost:3333/webruntime/component/9dfc3a8207/dev/en-US/localdevserver/preview:2109:21)

Am I doing something wrong or is this just an issue with the local prview since it's still in beta?

 

 

Shri RajShri Raj
It looks like this issue might be with the use of the "slds-c-icon-color-foreground-default" custom property, which might not be a valid custom property in the Lightning Web Components (LWC) styling system.
You can try using a different custom property, or you can also try using a stylesheet scoped to the LWC component.
  
<template>
    <lightning-icon icon-name="utility:file" class="required-icon"></lightning-icon>
</template>

<style>
    .required-icon {
        color: rgba(182,24,26,1);
    }
</style>

The above code will apply the color to the lightning-icon component, and the stylesheet will only be scoped to your LWC component.
Note that the "Preview Component Locally" feature is still in beta, and you may encounter issues with it. In case the issue persists, you can try viewing the component within a Salesforce org or test it in a Sandbox environment.
 
Kelly SKelly S

This works for aura, but not for LWC. I have to use the styling hooks on utility icons in LWC for it to take effect. 

But yes, I agree that I can just view it directly in salesforce. Was hoping to take advantage of the new feature out there, but sounds like this is a bug in the beta currently.