How to handle exporting 1 layer while keeping reference to all layers

[dennis-NS]

Given the following example:

{
   "primitives": {...},
   "theme-a-semantic": {...},
   "theme-b-semantic": {...},
   "theme-c-semantic": {...},
   "theme-a-components": {...},
   "theme-b-components": {...},
   "theme-c-components": {...}
}

I only want to output the values from the component objects. Those component objects can still refer to a semantic object (for it's current theme) or to the primitives layer. Right now i need to supply all the layers otherwise they don't know where to reference to. However this means that style-dictionary makes (in my case css variables) for every token in the file. But i just want my export to have tokens from the components. Am i missing something obvious?

[pascalduez]

Hi,

if I understand correctly, you want to be able to use refrences in your tokens declarations, but not have those references output in the final CSS (custom properties).

// primitives.json
{
  color: {
    white: {
      value: '#fff',
    }
  }
}

// components.json
{
  button: {
    background: {
      value: '{color.white}',
    }
  }
}

Expected ouput:

--button-background: #fff; 

This should be controlled by the outputReferences file options But it's false by default.

So I guess the ouput you get is:

--color-white: #fff; 
--button-background: #fff; 

Then you will need filtering.

If want to be able to "split" output files this example might help.

Sadly we don't have access to the file object in filter functions at the moment, but you might not need that.

[dennis-NS]

Hi!
Yes correct! Only difference is that i have 1 json that has all the components, semantics and the primitives. I'll look into the outputReferences that you mentioned, it's not something that i have come accross before and noticed i could use that in this case.