Generate SCSS variables referencing CSS custom properties

[SalimBensiali]

HI,

Is it possible off the shelf or with custom transforms to generate SCSS variables whose values are CSS custom properties? ie, I would like

button:
  color:
    background:
      primary:
        value: '{color.blue-50.value}'

to generate

$button-color-background-primary: var(--button-color-background-primary)

and of course assuming the CSS custom properties are already handled to output

:root {
  --color-blue-50: blue;
  --button-color-background-primary: var(--color-blue-50);
}

[nahiyankhan]

Yes! Check out output references.

[SalimBensiali]

Thanks @nahiyankhan, but my question was about whether the generated SCSS variable can have a value of var(--button-color-background-primary). It looks like output references only works within the same format not across formats.

[nahiyankhan]

Thanks @nahiyankhan, but my question was about whether the generated SCSS variable can have a value of var(--button-color-background-primary). It looks like output references only works within the same format not across formats.

Ahh, I see what you mean. My bad, didn't get that at first. Hmm - I don't see an out of the box solution for this. I think a possible option is to use a custom formatter instead of a transform. You would then have access to to the unresolved token.original.value reference which can be used to generate the var(--token-reference) values.

Will throw up a code example if I have some time later in the evening.

[SalimBensiali]

Thanks @nahiyankhan, I will try to give it a go with custom formatter as well.

[ptu14]

@SalimBensiali you figured something out about this?

[SalimBensiali]

Hi @ptu14, no not yet. I haven't had the chance to get back to this yet unfortunately.

[dannd4]

Hi @nahiyankhan could you share your example?

[nahiyankhan]

Hi @nahiyankhan could you share your example?

Shoot, sorry didn't end up having time before but just made a demo here: https://github.com/nahiyankhan/style-dictionary-scss-css-reference

It outputs scss like @SalimBensiali 's example (check out the outputs folder). Ended up doing it a different simpler way versus my original message that suggested the token.original.value. Wasn't right!

$button-color-background-primary: var(--button-color-background-primary)