amzn / style-dictionary

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

The string missing the quote when building for Flutter #685

Open elct9620 opened 3 years ago

elct9620 commented 3 years ago

Hi, there

I get some confused build results for my Flutter project.

I generate a design-tokens.json from Figma Design Token plugins and compile it with style-dictionary build command.

I get some incorrectly formatted results:

class AppTheme {
  AppTheme._();

    // ...
    static const fontNavFontFamily = "Open Sans";
    static const fontNavFontSize = "30";
    static const fontNavFontStretch = "normal";
    static const fontNavFontStyle = "normal";
    static const fontNavFontStyleOld = "Regular";
    static const fontNavFontWeight = "400";
    static const fontNavLetterSpacing = "0";
    static const fontNavLineHeight = "normal";
    static const fontNavParagraphIndent = "0";
    static const fontNavParagraphSpacing = "0";
    static const fontNavTextCase = "none";
    static const fontNavTextDecoration = "none";
    // ...
    static const radiusSmallRadiusType = single; // <--- did not add a quote for string
    // ...
}

But the JSON seems not different from other settings

{
  "radius": {
    "small": {
      "category": "radius",
      "exportKey": "radius",
      "radius": {
        "value": 5,
        "type": "number",
        "unit": "pixel"
      },
      "radiusType": {
        "value": "single",
        "type": "string"
      }
    }
  },
  "font": {
    "nav": {
      "category": "font",
      "exportKey": "font",
      "fontSize": {
        "value": 30,
        "type": "number",
        "unit": "pixel"
      },
      "textDecoration": {
        "value": "none",
        "type": "string"
      },
      "fontFamily": {
        "value": "Open Sans",
        "type": "string"
      },
      "fontWeight": {
        "value": 400,
        "type": "number"
      },
      "fontStyle": {
        "value": "normal",
        "type": "string"
      },
      "fontStretch": {
        "value": "normal",
        "type": "string"
      },
      "_fontStyleOld": {
        "value": "Regular",
        "type": "string"
      },
      "letterSpacing": {
        "value": 0,
        "type": "number",
        "unit": "percent"
      },
      "lineHeight": {
        "value": "normal",
        "type": "string",
        "unit": "auto"
      },
      "paragraphIndent": {
        "value": 0,
        "type": "number",
        "unit": "pixel"
      },
      "paragraphSpacing": {
        "value": 0,
        "type": "number",
        "unit": "pixel"
      },
      "textCase": {
        "value": "none",
        "type": "string"
      }
    }
  }
}

Does anyone know the reason I get the incorrect result?

dbanksdesign commented 2 years ago

Sorry for the lateness of this reply, things have been busy and we are going through issues now when we can.

What is the configuration you are using to build to Flutter? At first glance I would say Style Dictionary is not recognizing that type of token and doesn't transform it like by wrapping it in quotes. There are a few potential ways to solve this. You could create a custom transform to handle this type of token, or you could also filter out these tokens in the flutter format if you don't actually need them.

elct9620 commented 2 years ago

@dbanksdesign

My config is generated from the Figma plugin as the example in my issue. According to the JSON, it has a type mark it as "string" but didn't add the quote to it but others have quotes for it.