for style-dictionary config, how to support more config levels than `include/source`

[uptonking]

@dbanksdesign

• my use case: how to implement three themes like bootstrap, bootswatch-flaty, bootswatch-flaty-dark

  • bootswatch-flaty is based on bootstrap
  • bootswatch-flaty-dark is based on bootswatch-flaty

• my goal is like this:

  • firstly i write fully complete tokens for bootstrap theme.
  • then write necessary new token values with the same name as bootstrap for flaty theme.
  • then write necessary new token values with the same name as flaty for flaty-dark theme.
  • flaty-dark may reference values not present in flaty, but present in bootstrap.
  • i can choose to output 3 three themes
  • for each theme, output tokens can be filtered by isSource

• i have 2 ideas

• option 1: refactor style-dictionary core to support more config levels than include, source

  • if i put both bootstrap and bootswatch-flaty in include path, it will have conflicts

• option 2: modify according to advanced example multi-brand-multi-platform

  • in the example, tokens depend on brand are all about color; tokens depend on platform are all about fonts. they are irrelevant, and won't conflict.
  • but in my use case, flaty and flaty-dark have tokens with the same name.
  • so it seems impossible to adapt to my use case.

any good idea?

[dbanksdesign]

You should be able to put both bootstrap and bootswatch-flaty in the include paths array. Files found in include should not have any issues with conflicts. Those files will be deep-merged and won't throw any warnings or errors if there are conflicts (the later files defined in the include array will take precedence). Files found in source will take precedence over those in include. You will only get a collision warning if multiple files defined in source define the same tokens. Here is a tiny sample of that working:

// build.js
const StyleDictionary = require('style-dictionary');

StyleDictionary.extend({
  include: [
    `include1.json`,
    `include2.json`
  ],
  source: [
    `source.json`
  ],
  platforms: {
    css: {
      transformGroup: `css`,
      files: [{
        destination: `variables.css`,
        format: `css/variables`
      }]
    }
  }
}).buildAllPlatforms();

// include1.json
{
  "foo": { "value": "bar" }
}

// include2.json
{
  "foo": { "value": "foo" }
}

// source.json
{
  "foo": { "value": "boo" }
}

That should build fine and foo's value should be "boo".

Going off your example, you could have 3 directories: bootstrap, bootswatch-flaty, and bootswatch-flaty-dark and then run Style Dictionary 3 times with the include and source configuration like this:

// build.js
const StyleDictionary = require('style-dictionary');

// bootstrap
StyleDictionary.extend({
  source: [
    `bootstrap/**/*.json`
  ],
  platforms: {
    //...
  }
}).buildAllPlatforms();

// bootswatch-flaty
StyleDictionary.extend({
  include: [
    `bootstrap/**/*.json`
  ],
  source: [
    `bootswatch-flaty/**/*.json`
  ],
  platforms: {
    //...
  }
}).buildAllPlatforms();

// bootswatch-flaty-dark
StyleDictionary.extend({
  include: [
    `bootstrap/**/*.json`,
    `bootswatch-flaty/**/*.json`
  ],
  source: [
    `bootswatch-flaty-dark/**/*.json`
  ],
  platforms: {
    //...
  }
}).buildAllPlatforms();

Does that make sense?