A json source for style dictionary

[romainmenke]

For postcss-design-tokens we currently have support for Style Dictionary as a source format.

(we would love to support the new format, but the latest draft has too many open issues)

---

I tried to use open props with the design-tokens.json exported file but the JSON is flattened and the token names have -- prefixes.

In Style Dictionary format this could look like :

{
  "radius": {
    "1": {
      "value": "2px"
    },
    "2": {
      "value": "5px"
    },

This is not the output from using the Style Dictionary CLI to convert to CSS,SCSS,... It would be the Style Dictionary format itself.

@design-tokens url(node_modules://open-props/design-tokens) format('style-dictionary3');

.foo {
        /* works today: */
    color: design-token('--blue-1')
    /* would be nice to have: */
    color: design-token('blue.1')
}

related : https://github.com/tokencss/tokencss/issues/10#issuecomment-1251809298

I noticed that tokencss doesn't follow the new format (yet) and is closer to Style Dictionary. So this might be two fixes in one :)

[argyleink]

two in one sounds very nice! one of the reasons I dont ship Style Dictionary format is because there's so many props that wouldnt convert to other platforms. but maybe i could ship the props anyway and let folks use them for web and not cross platform?

regardless, it's a transform on the data and i've already got pipelines for exporting various formats. open props can def ship another format, especially if it'll dual resolve a couple use cases 👍🏻

[argyleink]

fixed by #433