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

[niborium]

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]

🦋 Changeset detected

Latest commit: 59fb67e

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]

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]

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 :)