8

I have wrapped a LWC in an Aura Component and want to take advantage of defining custom design tokens based on this documentation: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.interop_components_css_aura

My defaultTokens bundle looks like this:

<aura:tokens extends="force:base">
    <aura:token name="foo" value="#39383F" />
</aura:tokens>

My CSS looks like this:

.foo {
    background: var(--lwc-foo);
}

However, when my component is rendered, the CSS compiles to this:

.foo {
    background: inherit;
}

It is worth noting that referencing the native tokens defined in SLDS (https://www.lightningdesignsystem.com/design-tokens/) works like a charm.

For instance, this:

.bar {
   background: var(--lwc-colorBrand);
}

renders this:

.bar {
    background: rgb(21, 137, 238);
}

Either I am missing a step in defining my custom token or there is a LWC bug. I am leaning toward the latter. This is what I am observing:

During compilation time, native tokens are transpiled to the mapped value in the CSS file. However, CSS files in LWC bundles are stripped of any property value that references a custom property. This behavior is also consistent with defining and implementing custom properties in CSS. In keeping with web standards, I would expect this to work in my LWC:

:host {
    --garishBackground: blue;
}

.garish {
    background: var(--garishBackground);
}

But, again, after compilation, this renders to:

:host {
    --garishBackground: blue;
}

.garish {
    background: inherit;
}

I do know that the custom property defined in :host is coming through because not only do I see it in the CSS from the dev console, but it will also render properly if I implement the variable through inline styling. This works:

<div style="background: var(--garishBackground)">
    <p>Garish.</p>
</div>

I would appreciate any help confirming whether I am doing something wrong or if it is indeed a bug. If it is a bug, I would love the Salesforce LWC team to fix this because it is a great feature to help reduce hard-coded values and promote consistent branding. The ability to define custom properties and use them in LWC would support the move to champion web standards in the Salesforce Community.

Thank you!

10

Yes this is a known bug.

The problem is quite tricky to fix so it will probably land in Winter (September release)

  • 1
    Thank you, Diego! What an awesome feature! – Matt May 9 '19 at 17:46
  • @Diego, is this logged on Salesforce known issue? Please share the link. – Raul May 9 '19 at 17:59
  • It’s an internal big number, can’t share it here – Diego May 9 '19 at 18:00
  • So this bug was fixed with the september release ? – R3tep Oct 11 '19 at 7:57
  • @Diego is this resolved now? – rahul gawale Oct 15 '19 at 8:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.