search

lukasoppermann / style-dictionary-utils

A package of transforms, formats, filters, etc. to use in your style dictionary config to transform your design tokens
MIT License
176 stars 17 forks source link

Add CSS variable transformer for sd #58

Closed douglaszaltron closed 8 months ago

douglaszaltron commented 8 months ago

56

lukasoppermann commented 8 months ago

Hey @douglaszaltron,

I somehow figured this would be part of a formatter? Why do you favor a transformer?

It has the benefit of flexibility but would need to be applied in correct order. Also did you test it with nested tokens. We must make sure to avoid issues where the referenced token is already transformed to a css value (this could be done using the original values I think).

Somehow it feels more fitting for me to have this done in the formatter, I guess in this function. But I am open to being convinced that transformers are better.

douglaszaltron commented 8 months ago

Hey @douglaszaltron,

I somehow figured this would be part of a formatter? Why do you favor a transformer?

It has the benefit of flexibility but would need to be applied in correct order. Also did you test it with nested tokens. We must make sure to avoid issues where the referenced token is already transformed to a css value (this could be done using the original values I think).

Somehow it feels more fitting for me to have this done in the formatter, I guess in this function. But I am open to being convinced that transformers are better.

At first, I thought about creating it as a formater, but as a transformer, I can apply the value modification for both JavaScript/ and JSON/. It would extend more easily. I did realize about the correct order, that the value mutations need to be done beforehand.

transforms: [
    "name/cti/kebab",
    "shadow/css",
    "fontFamily/css",
    "font/css",
    "variables/css",
],
douglaszaltron commented 8 months ago

@lukasoppermann I made the adjustments, take a look.

lukasoppermann commented 8 months ago

Looks great, I'll have to test it and will merge it afterwards.

lukasoppermann commented 8 months ago

Hey @douglaszaltron, sorry, I just noted that I completely misread this PR.

So what this does is it replaces the value of a token with it's own name as a css variable. To me that makes no sense. I thought you were targeting the references.

E.g. danger.$value: {base.red} would be turned into danger: var(--base-red).

So do you want to target the reference or are you really looking for replacing a variables value with it's own name.