expand=true results in no typography for Flutter

[benjamincox]

Turning on expand=true makes it so no typography file is generated. I'm using the W3C syntax (e.g. $type).

Am I misunderstanding how 'expand' works?

Running config.json generates:

import 'dart:ui';

class StyleDictionaryTypography {
    StyleDictionaryTypography._();

    static const fontStyle1 = [object Object];
    static const fontStyle2 = [object Object];
}

I'll need those [object Object] values expanded, so I tried adding "expand":true. At which point it refuses to generate anything.

%> style-dictionary build -c config.json

flutter-separate
✔︎ ./lib/style_dictionary_typography.dart

%> style-dictionary build -c config-expand-true.json 

flutter-separate
No tokens for style_dictionary_typography.dart. File not created.

Here are my files:

config-expand-true.json config.json text.styles.tokens.json

[jorenbroekema]

This is because you have a filter that filters only for tokens that are of type "typography", however, when you expand your typography tokens they all get their own token types e.g. "fontFamily". So by expanding your typography tokens, the dictionary will no longer have any typography tokens, so then using your filter it leads to empty output and no output file being generated.

If I remove the filter, it works

[benjamincox]

Thanks @jorenbroekema - that's very helpful! However, once I do this I get the file contents below - this contains all of the colors and sizes from the files listed in "source".

Is there no way to restrict processing to items from the source where "$type"==="typography" while letting the output values end up in the file regardless of their type?

The other thing is that this outputs a Dart file that cannot be compiled because the strings are unquoted.

Is that a known issue?

import 'dart:ui';

class StyleDictionaryTypography {
    StyleDictionaryTypography._();

    static const baseColorsModesMode1Brandcolor2 = Color(0xFFD047F2);
    static const baseColorsModesMode1MyBaseColor = Color(0xFFBF6C6C);
    static const fontStyle1FontFamily = Inria Serif;
    static const fontStyle1FontSize = 26;
    static const fontStyle1FontWeight = 700;
    static const fontStyle1LetterSpacing = 0.00;
    static const fontStyle1LineHeight = normal;
    static const fontStyle1TextDecoration = none;
    static const fontStyle1TextTransform = none;
    static const fontStyle2FontFamily = Inknut Antiqua;
    static const fontStyle2FontSize = 26;
    static const fontStyle2FontWeight = 500;
    static const fontStyle2LetterSpacing = 0.00;
    static const fontStyle2LineHeight = normal;
    static const fontStyle2TextDecoration = none;
    static const fontStyle2TextTransform = none;
    static const myvarsModesDarkBrandcolor1 = Color(0xFF09B5FF);
    static const myvarsModesDarkBrandcolor2 = Color(0xFF7B1313);
    static const myvarsModesDarkCwColor4 = Color(0xFF82804A);
    static const myvarsModesDarkDefaultcolor = Color(0xFF09B5FF);
    static const myvarsModesDarkRefBaseColor = Color(0xFF7B1313);
    static const myvarsModesLightBrandcolor1 = Color(0xFF06638A);
    static const myvarsModesLightBrandcolor2 = Color(0xFF7B1313);
    static const myvarsModesLightCwColor4 = Color(0xFF82804A);
    static const myvarsModesLightDefaultcolor = Color(0xFF06638A);
    static const myvarsModesLightRefBaseColor = Color(0xFFBF6C6C);
    static const sizesModesDesktopFontSizeTest = 26;
    static const sizesModesMobileFontSizeTest = 12;
    static const sizesModesTabletFontSizeTest = 18;
}

[jorenbroekema]

Is there no way to restrict processing to items from the source where "$type"==="typography" while letting the output values end up in the file regardless of their type?

I'm not really sure I understand what you mean there, can you clarify? Do you want to filter the output for only tokens that used to be typography tokens?

The other thing is that this outputs a Dart file that cannot be compiled because the strings are unquoted. Is that a known issue?

I don't recall seeing an issue for this in this repository, and I don't personally know Dart. If it cannot be compiled then yeah that should probably be fixed, feel free to raise an issue or a pull request with the fix

[benjamincox]

You've got it - I want to filter the input tokens so I can have them go into separate files. This would be regardless of whether they are "expanded" or only a single token is output.

So, if there are three definitions in my file:

{
  "FontStyle1": {
    "$type": "typography",
    "$value": {
      "fontFamily": "Inria Serif",
      "fontSize": "{font-size-test}",
      "fontWeight": 700,
      "letterSpacing": "0%",
      "lineHeight": "normal",
      "textTransform": "none",
      "textDecoration": "none"
    }
  },
  "brandcolor1": {
    "$type": "color",
    "$value": "#06638a"
  },
  "font-size-test": {
    "$type": "dimension",
    "$value": "12px"
  }
}

I'm looking for a way to have the separate output file for typography contain only:

    static const fontStyle1FontFamily = Inria Serif;
    static const fontStyle1FontSize = 12;
    static const fontStyle1FontWeight = 700;
    static const fontStyle1LetterSpacing = 0.00;
    static const fontStyle1LineHeight = normal;
    static const fontStyle1TextDecoration = none;
    static const fontStyle1TextTransform = none;

And to NOT contain:

    static const fontSizeTest = 12;
    static const brandcolor1 = Color(0xFF06638A);

I'll create another issue for the Dart code being unquoted.

Thanks again for your help!

[jorenbroekema]

You'll have to add a custom filter that filters only for the typography expanded types but some of those types will be dimension (e.g. for fontSize) so it's actually really hard right now to filter on the token type "before" expansion...

At some point I created a PR to add metadata to tokens about what type they were before expansion but I closed it because I didn't really see a good use case for it. But now we have one it seems.

https://github.com/amzn/style-dictionary/pull/1269 I'll probably reopen this