search

tokens-studio / sd-transforms

Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio
MIT License
175 stars 27 forks source link

[Bug]: missed lowercasing of font style "alone" in font weight tokens #267

Open nhoizey opened 4 months ago

nhoizey commented 4 months ago

What happened?

When I generate Sass variables based on font weight tokens coming from Figma, I get for example this:

$font-weight-400: 400;
$font-weight-500: 500;
$font-weight-700: 700;
$font-weight-400-italic: Italic;
$font-weight-500-italic: 500 italic;
$font-weight-700-italic: 700 italic;

The two last variables have italic as lowercase, but $font-weight-400-italic has a capital in Italic.

I think it's because there is no actual weight number in front of this font style.

The regex here allows it: https://github.com/tokens-studio/sd-transforms/blob/main/src/transformFontWeights.ts#L35-L38

But the conversion of font style here is "inside" the one for the font weight value, so if there is no font weight value, the font style is not converted: https://github.com/tokens-studio/sd-transforms/blob/main/src/transformFontWeights.ts#L55-L57

I guess the if (match.groups.style) should be outside the if (match?.groups?.weight).

I can make a PR if this is the correct fix.

Reproduction

No response

Expected output

No response

Version

0.14.4

jorenbroekema commented 4 months ago

Yep that seems like a bug indeed. You could pull that second if statement out, but make sure to account for a "space" separator if both the weight and style match groups are present. Maybe put the match group results in an array and do a matches.map(part => part.toLowerCase()).join(" ") or something. PR welcome :)!