Numeric asset values are quoted

[peschee]

Given this example tokens:

{
  "asset": {
    "font": {
      "someFont": {
        "fontWeight": { "value": 400 }
      }
    }
  },
  "font": {
    "someFont": {
      "fontWeight": { "value": 600 }
    }
  }
}

and this configuration:

{
  "source": ["tokens/*.json"],
  "platforms": {
    "scss": {
      "transformGroup": "css",
      "buildPath": "build/",
      "files": [
        {
          "destination": "_variables.scss",
          "format": "scss/variables"
        }
      ]
    }
  }
}

I end up with the following output:

$asset-font-some-font-font-weight: "400";
$font-some-font-font-weight: 600;

It seems that numeric values for asset tokens are always being quoted. Is there a way to customize this?

A small repro is here: https://stackblitz.com/edit/style-dictionary-example-cf6bcc

[peschee]

Maybe related to #936, more specifically this comment: https://github.com/amzn/style-dictionary/issues/936#issuecomment-1428654401

[jorenbroekema]

https://github.com/amzn/style-dictionary/blob/main/lib/common/formatHelpers/createPropertyFormatter.js#L207 this is the line of code that causes that to happen, and the reason is because asset paths tend to need to be wrapped in string quotes in order to work for CSS/web context.

e.g.

:root {
  --alert-circle: assets/icons/alert-circle.svg;
}

doesn't work but:

:root {
  --alert-circle: "assets/icons/alert-circle.svg";
}

does work.

Right now, Style-Dictionary still relies on token hierarchy/taxonomy to determine the type of the token, using the "attribute/cti" transform to add the CTI attributes metadata.

This is something that I will change in a breaking change in v4, where the token type is always determined by the token.type/token.$type property.

Right now to work around this issue:

• don't use "asset" as a top object key so the tokens inside aren't flagged as asset type tokens by style-dictionary
• create a custom transform group for CSS that doesn't include "attribute/cti" transform, so the metadata isn't set, but keep in mind that some other transforms may also stop working due to this if they use a matcher that checks the token.attributes.

Other than that there is no way to configure it

[jorenbroekema]

https://github.com/amzn/style-dictionary/issues/1082 you can track this issue btw