tokens-studio/sd-transforms

[Bug]: Combination of `expand: { typography: false }` & `outputReferences` causes CSS-vars formatting to break

Closed this issue · 1 comments

LorenzKahl commented

What happened?

When transforming tokens coming from the Tokens Studio plugin, we are running into problems with the combination of:
expand: { typography: false } & outputReferences

I'm just guessing, but it seems to be related to the token name containing the character 0 (zero) when being used within a reference.

{
  "Font": {
    "LineHeight": {
      "10": { // <- this is causing the problems when being referenced ❌ 
        "value": "10",
        "type": "lineHeights"
      },
      "11": { // <- this is fine ✅
        "value": "11",
        "type": "lineHeights"
      }
   }
   "Headline": {
      "L-XL": {
        "Large": {
            "value": {
            ...
            "lineHeight": "{Font.LineHeight.10}",  // <- this will result in a broken output ❌ 
            ...
          },
          "type": "typography"
        },

Reproduction

https://configurator.tokens.studio/#project=7VjNbuM2EH6VgdEizkKW4j304HSLFgmCFMgCi03QLVAHXVqiLW4kUiCpxK6hY299hPbl9knKH8miaFlZB0Uv7c3mfPPNN8PhSNR2xPGKCIn57eVVSWNJGBXhJzGajUheMC7hVm4yfEmMBfENLDnL4UTo1UmyWz45n9PaYQsN5R1HVCwZzwVUtd/3kj1gKiZClglhkUgmcgfSHHMaRdBZDeA1TaBAHOVYcYJaBFYYnRAjCgsMKElwYjxvMYaExWIGqZSFmEXRisi0XIQxy6OB0HO6r3nsZR7Adk4B8LpANJmpNOWmYCuOinQzgyXKBA5ApChhT/VfqII5rU6brPAa5UWG4RFlJYZd7ACeUhKn8KkUUlVOllwlJlOF0HIBCSBKnqcl3JM7NuKUJDyD+cjEmI8CvUZV4fRavrlQIVi+c6ntOZJxivkMxibiKbz5DraVMe1E+mZthFqtFXoOKsVvJ5PWR0unGJutAah0KepKaCuSkOKswFzYzvAbak5jtcO6m5Ykw9cYJZgHtafEyU+IE7TIsO6sN36PhhZ2bfn9+sdC1DyHy3pl7Lamtn4nTfms6cTUp5GjqrOsD894mzgdo7UHTbtWp03hmtRYKYtSvsdLzDGN62Rq9Hmnxh+/2rZ1GJvf1Wk144xJTaqse5UZ12tKu0r5JABXmB9ZkakN+ni+2yr1axSMVhlboEzNA0bVRDDq56MrRuV8NGuSUQsoJ9nGWdKLWkY2UedOHZfNJFXCM0JxBwRtp+oG/UF7wPUOGbg43dkWtlThTUSCxXzUYCr7owoaUTeK4xqTVSo9YdOzIRHaeiBwtmN04wYO83SQeXoks5/Rh75s+ss8UY1cZogP6XnfQAbq/OFZUbfkN3xcgV8PRtR8Lyvvcbx77YL1Ob4tUEzoyktoMJ+zrw9va5ezN6dB6qOZ/azeqcemeUS9JLGD0Ys91qNTm37zEnY/veu+qaL2cvLzzV7wG8RX/vjR6wkWMSdm5tr4MiUCFhyjBwGf//qjo7OTRYcI3Mm0sUxbPSlDuxL2H9TKo4fOwXNp7Eo4fN776LLOIGzo2vEYTs8OqWgOd+Ok/x+AZ/752QVyDeG0z7fo6dLG3e/g8GyQ4UeaYCp7Cayp31/itbxAopPsXb0WUta/T9rpEseMo7Z5WtfW0hC4/pXXVG37t2+VrkfVOSxvcULK/Iub+Ylx1ctLtePw+c/f/wMNPT2uoaf/NzT86w19cKjfOdKdoa5jDj1RrP3AM6Utx2DYbvL/ZHCX+fmndbvpX/ywLtYH4yckV/fe3tDN67552Ve3kiVZeS/7gpU8NkS/NDJfvYpeGZTluw8sssiQtJdp926grh5eHouSZMk7JFOrzvyNFCxyElBsHC/J2kJE0jE51/ZWVm0SkTMC79gFy3NTycBDCXXwo/2aiYjpUyk3Bzz06Enr0eMD2j6P3IHnwzgWLHvEb00BeoPoWtjpI5rxMRBLo905/QxUpOobTaq+YOwjF4yry+VzKPuJ4zlUzDJmqVK85qsFOgTJWUKWRKXqAfStO1L31egBL9Ci7dx7pxH0Ldjvgf0HoiTUmWe/Pjb349C0pje26g8DBqrV79B7yPqa3vvc9G/XGiS5OqvuwOyZhffesRxVfwM=

Expected output

  --sd-font-headline-l-xl-large: var(--sd-font-weight-arial-company-headline-regular) var(--sd-font-size-10)/var(--sd-font-line-height-10) var(--sd-font-family-arial-company-headline);

Version

^0.11.6

jorenbroekema commented

Hey, this is related to outputReferences in general not working very well. I did actually improve outputReferences in style-dictionary very recently, I'll talk with the other maintainer to see if we can do a release of style-dictionary v3, then I have to do a subsequent patch of browser-style-dictionary patch, and then I expect this use case to work better.

See also:
#121
amzn/style-dictionary#974

Closing this, as it is essentially a duplicate of #121 which will remain open until we do the v3 release and browser-style-dictionary patch as well, so best to track that issue

  • 👍1