search

amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.94k stars 559 forks source link

Font sizes of four decimals being rounded to three #1285

Closed mikeriley131 closed 3 months ago

mikeriley131 commented 4 months ago

I've looked through the docs and could not find any config or transform related to the rounding of decimals. My design tokens for font-size sometimes use four decimal places (ex: 0.9375rem) and I am finding that they are being rounded to three decimals places (0.938rem). Is there a way to configure the rounding of these?

style-dictionary: v4.0.1 @tokens-studio/sd-transform: v1.0.1

jorenbroekema commented 3 months ago

Can you share a reproduction? I can't seem to reproduce this. Are you using the CSS transformGroup or the tokens-studio transformGroup?

jorenbroekema commented 3 months ago

I suspect you're using the tokens-studio transformGroup which contains the ts/resolveMath transform which rounds stuff to 4 digits by default, but you can configure it like so:

{
  platforms: {
    css: {
      "mathFractionDigits": 5,
      "transformGroup": "tokens-studio",
      "files": [
        {
          "format": "css/variables",
          "destination": "output.css"
        }
      ]
    }
  }
}

https://github.com/tokens-studio/sd-transforms?tab=readme-ov-file#tsresolvemath

jorenbroekema commented 3 months ago

Btw, try using the latest sd-transforms, the default value for mathFractionDigits is 4 there already so you might not need to configure anything if you use the latest.

mikeriley131 commented 3 months ago

Thanks @jorenbroekema. I updated to v1.2.1 of @tokens-studio/sd-transforms and I now have 4 digit fractions in my outputted tokens.