Add CSS variable transformer for sd

[douglaszaltron]

#56

[lukasoppermann]

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]

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]

I believe it's better to add the value as fallback.

var(--${varPrefix}${token.name}, token.value)

[lukasoppermann]

Maybe this can be an option? e.g. valueFallback ?

[douglaszaltron]

@lukasoppermann I made the adjustments, take a look.

[lukasoppermann]

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

[lukasoppermann]

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.