Can't add px or rem using the right transforms

[juanpablob]

Hello there :) I'm using the following list of transforms "transforms": ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css', 'size/px'], taken from the transform group "scss" listed in the documentation. I have added size/px, in order to add px to the number of the values, but the files I get after the build are still without the px:

$sd-font-sizes-body: 16;
$sd-font-sizes-sm: 16 * 0.85;
$sd-font-sizes-xs: 16 * 0.65;

The size/px was just an example as I was testing, but indeed what I want to is to have rem values :) (yes, I already tried adding size/rem transform instead of the CSS one and it didn't work either :/

The input are tokens exported from Tokens Studio for Figma, they look like this:

      "body": {
        "value": "16",
        "type": "fontSizes"
      },
      "sm": {
        "value": "{fontSizes.body} * 0.85",
        "type": "fontSizes"
      },
      "xs": {
        "value": "{fontSizes.body} * 0.65",
        "type": "fontSizes"
      }

Do you have any idea why is this happening? Perhaps I'm missing something? Thank you in advance! :)

[jorenbroekema]

The DTCG type for font sizes is called "fontSize", not "fontSizes". If I'm not mistaken, you're probably using Tokens Studio figma plugin, they are not aligned with the DTCG spec with regards to how they're naming some of the types.

You can use this package https://github.com/tokens-studio/sd-transforms -> 'ts/size/px' is the name of the transform, which matches the Tokens Studio types (fontSizes, spacing, sizing etc.)