heydon / design-tokens-cli Goto Github PK

My input is a design.tokens.json file:

{   "tiny": { "$value": "8px" },
    "small": { "$value": "16px" },
    "medium": { "$value": "24px" },
    "large": { "$value": "32px" },
    "xlarge": { "$value": "40px" },
    "error": { "$value": "red" },
    "success": { "$value": "green" },
    "warning": { "$value": "yellow" },
    "radius": { "$value": "3px" }
}

The CSS output is:

:root {
 	--error: red;
 	--large: 32px;
 	--medium: 24px;
 	--radius: 3px;
 	--small: 16px;
 	--success: green;
 	--tiny: 8px;
 	--warning: yellow;
 	--xlarge: 40px;
}

The CSS variables are no longer in a logical order: colors are not shown together and the spacings are no longer sequential. This makes it harder to read through and make sense of the variables in the output file.

It would be nice if it was possible to control the prefixes that get added to the output variables. I am grouping my tokens primarily because I don't want to add a $type to every individual property so instead do it at the group level:

{   "colors": {
    "$description": "Color palette",
    "$type": "color",
    "error": { "$value": "red" },
    "success": { "$value": "green" },
    "warning": { "$value": "yellow" } 
},
    "sizes": {
        "$type": "dimension",
        "radius": { "$value": "3px" },
        "tiny": { "$value": "8px" },
        "small": { "$value": "16px" },
        "medium": { "$value": "24px" },
        "large": { "$value": "32px" },
        "xlarge": { "$value": "40px" }
    }
}

However, I do not want the output variables to have any prefixes. I prefer to use a terse variable name in my code e.g. var(--small) over var(--sizes-small). Most of the names are descriptive enough by themselves e.g. var(--red) is obviously a color. I don't see much point in the extra verbiage.

This needs a parser that at least handles converting literal, possibly nested/grouped tokens into custom properties placed on :root.

See https://www.techighness.com/post/javascript-find-key-path-in-deeply-nested-object-or-array/ for getting the key path.

Hi! I came across this repository today and I'm tinkering around with it and it's pretty awesome!

I've found one small issue so far:
If no globalPrefix is added to the config, tokens are generated with undefined- ahead of them.

• See https://design-tokens.github.io/community-group/format/#composite-types
• Objects and arrays or just objects support?
• Need to change "flattening" logic to handle non-simple (string) $values

• Will probably need to combine all transformations into one flattened JSON file first
• Then will need to convert the reference into the transformed key/name and use it like tokens[converted reference]
• Will need to handle the fact that some references might be b.c whereas the token name is a.b.c (more specific)

Currently, references are resolved by finding and applying the true value.

{
  "token-1": "#fff",
  "token-2": "{ token.1 }"
}

...results in this Sass:

$token-1: #fff;
$token-2: #fff;

But it should be possible to just convert the reference:

$token-1: #fff;
$token-2: $token-1;

The difficulty comes in working out when the order needs changing and how. For CSS custom properties, this isn't an issue because of hoisting. But the following...

{
  "token-1": "{ token.2 }"
  "token-2": "#fff",
}

would break the Sass output (Error: undefined variable):

$token-1: $token-2;
$token-2: #fff;