design-system/styleDictionaryBuild.js at main · emerald-dao/design-system · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
const StyleDictionary = require('style-dictionary');
const fs = require('fs-extra');

const { formattedVariables } = StyleDictionary.formatHelpers;

const path = `build/`;

// before this runs we should clean the directories we are generating files in
// to make sure they are ✨clean✨
console.log(`cleaning ${path}...`);
fs.removeSync(path);

StyleDictionary.registerFormat({
  name: 'css/variables/theme',
  transforms: ['attribute/cti'],
  formatter: function ({ dictionary, options }) {
    const { outputReferences } = options;
    return `${this.selector} {
      ${formattedVariables({ format: 'css', dictionary, outputReferences })}
    }`;
  },
});

console.log(`☀️ Building general variables...`);
StyleDictionary.extend({
  source: [`tokens/global.json`],
  transforms: ['attribute/cti'],
  platforms: {
    css: {
      transformGroup: `css`,
      buildPath: path,
      files: [
        {
          destination: `variables.css`,
          format: `css/variables`,
          options: {
            outputReferences: true,
          },
        },
      ],
    },
  },
}).buildAllPlatforms();

console.log(`☀️ Building light mode...`);
StyleDictionary.extend({
  source: [`tokens/light.json`],
  transforms: ['attribute/cti'],
  platforms: {
    css: {
      transformGroup: `css`,
      buildPath: path,
      files: [
        {
          destination: `variables-light.css`,
          format: `css/variables/theme`,
          selector: ':root[data-theme=light]',
          options: {
            outputReferences: true,
          },
        },
      ],
    },
  },
}).buildAllPlatforms();

// Dark Mode
console.log(`\n\n🌙 Building dark mode...`);
StyleDictionary.extend({
  source: [`tokens/dark.json`],
  platforms: {
    css: {
      transformGroup: `css`,
      buildPath: path,
      files: [
        {
          destination: `variables-dark.css`,
          format: `css/variables/theme`,
          selector: ':root[data-theme=dark]',
          options: {
            outputReferences: true,
          },
        },
      ],
    },
  },
}).buildAllPlatforms();