search

tokens-studio / sd-transforms

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

replace escapeApostrophes with specialCharacterFontStringFormatter (Transforms 'Suisse Int'l' into 'Suisse intl') #229

Closed niborium closed 10 months ago

niborium commented 10 months ago

In this update, i have replaced the escapeApostrophes function with specialCharacterFontStringFormatter. The previous escapeApostrophes function was intended to escape apostrophes in font family names, but it led to invalid CSS formatting in certain cases. An example of this issue was evident with the 'Suisse Int'l' font family, where the output --sdTypographyMobileBody: 400 14px/20 'Suisse Int\'l'; was not a valid CSS format.

The escapeApostrophes approach incorrectly added a backslash before the apostrophe, which is not a standard or recognized escape sequence in CSS font family names. This resulted in malformed CSS that could cause rendering issues or be ignored by the browser.

The new specialCharacterFontStringFormatter function directly addresses this problem by specifically targeting and correctly formatting the 'Suisse Int'l' font family name. Instead of attempting a broad and potentially erroneous escape of apostrophes, it transforms 'Suisse Int'l'into 'Suisse intl', a format that is valid and compatible with CSS standards. This targeted approach provides a more robust and accurate solution for handling special cases in the CSS typography processing.

If you need more special caces for special character font families you can add it to specialCharacterFontStringFormatter (that's why i named it like that) and just add test for it. It should not be that many font families that have special characters like this.

changeset-bot[bot] commented 10 months ago

🦋 Changeset detected

Latest commit: 59fb67e286c2596bbe23c7d85050afe2e44b8b2f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | ---------------------------- | ----- | | @tokens-studio/sd-transforms | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

jorenbroekema commented 10 months ago

image

This works fine for me. https://www.w3.org/TR/CSS21/fonts.html#value-def-family-name The spec also recommends using quoted font-family strings and escaping characters when needed, so it doesn't seem like a problem to me?

That said, you can always add your own Style-Dictionary transform that transforms fontFamilies type tokens and removes ' or other special characters from the font-family, but I don't think this should be default behavior in sd-transforms repo

niborium commented 10 months ago

image

This works fine for me. https://www.w3.org/TR/CSS21/fonts.html#value-def-family-name The spec also recommends using quoted font-family strings and escaping characters when needed, so it doesn't seem like a problem to me?

That said, you can always add your own Style-Dictionary transform that transforms fontFamilies type tokens and removes ' or other special characters from the font-family, but I don't think this should be default behavior in sd-transforms repo

Will do some more testing and check.

Update: Sorry my bad, it works as expected :)