Nested file resolution with design-tokens

[osiler]

What would you want to propose?

I have been getting a SvelteKit based toolchain working with PostCSS and design tokens (inspired by the style-dictionary complete template). While everything is happy when using a flat file structure without nested token references, working with the complete example fails as I don't believe the @design-tokens can reference other Jsons. I understand that the design systems workflow is still relatively early, so thankyou for the plugin development.

Suggested solution

You could collapse down the files in a directory and produce a large design-token Json file.

Additional context

No response

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

Hi @osiler,
Thank you for reaching out about this.

We follow the draft spec for design tokens : https://github.com/design-tokens/community-group

This specification doesn't have a way of referencing other files inside a design tokens file.

You have to include all token files from inside your CSS file.

[osiler]

Hi, thanks for pointing that out. I think the area of the spec I am referring to is here but I don't see where this specifies that aliases must be limited to within one file.

[romainmenke]

Maybe I misunderstood :)
Can you create a minimal reproduction?

(keep in mind that I don't know SvelteKit and that I don't know anything about what you are trying to do :) )

[osiler]

Lets remove the svelte part for now, here is a minimal example.

E.g input.css

@design-tokens url('test_base.json')  format('style-dictionary3');

/* Alias defined in brand, that links to test_base.json */
/* Uncomment this to demonstrate failed alias */
/* @design-tokens url('test_brand.json') format('style-dictionary3'); */

@custom-media --laptop (width >1200px) and (width <=1600px);

/* Base case, no aliasing */
@media (--laptop) {
  main {
    background: design-token('color.base.red.50');
  }
}

/*Aliasing as test_brand.json has a token definition in test_base.json*/
/* Uncomment this to demonstrate failed alias */
/* @media (--laptop) { */
/*   main { */
/*     background: design-token('color.brand.primary.base'); */
/*   } */
/* } */

test_base.json

{
  "color": {
    "base": {
      "red": {
        "50": {
          "value": "#FFE5EE",
          "attributes": {
            "font": "base"
          }
        }
      }
    }
  }
}

test_brand.json

{
  "color": {
    "brand": {
      "primary": {
        "base": {
          "value": "{color.base.red.50.value}"
        }
      }
    }
  }
}

[romainmenke]

I better understand what is going on now.

You have a case where you want to import multiple token files first and then resolve aliases after all tokens have been merged.

But our plugin does the opposite.
It first imports all files and only resolved internal aliases.
After this stage the tokens will be merged.

It is actually this issue : design-tokens/community-group#123

Changing this would be a breaking change, so we are not going to do that.
It would change the outcome for everyone who depends on the current order.

---

When the designs tokens community group specifies how this should work we will add support for that behavior in this plugin.

Up until then we are trying not to make any unexpected changes.

[osiler]

@romainmenke thanks for the follow up.

[romainmenke]

You can comment on the design tokens community group issue that you also depend on some behavior and explain your use case. That will help to inform the spec editors better.

I am going to close this for now, thank you again for reporting.
We do keep an eye on the specification and have been awaiting a next good snapshot to continue work here.