optics/build_token_json.js at main · RoleModel/optics · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
const fs = require('fs')
const path = require('node:path')

function isHyphenated(keys, length = 2) {
  return HYPHENATED_WORDS.concat(HYPHENATED_LUMINOSITIES).includes(keys.slice(0, length).join('-'))
}

const HYPHENATED_WORDS = [
  'z-index',
  'neutral-variant',
  'on-background',
  'line-height',
  'letter-spacing',
  'scale-unit',
  'input-height',
  'width-large',
  'width-x-large',
  'card-outline',
  'x-small',
  '2x-small',
  '3x-small',
  '4x-small',
  '5x-small',
  'x-large',
  '2x-large',
  '3x-large',
  '4x-large',
  '5x-large',
  'extra-light',
  'extra-bold',
  'semi-bold',
  'dialog-backdrop',
  'dialog-content',
  'alert-group',
  'on-minus-one',
  'on-minus-two',
  'on-minus-three',
  'on-minus-four',
  'on-minus-five',
  'on-minus-six',
  'on-minus-seven',
  'on-minus-eight',
  'on-minus-max',
  'on-plus-one',
  'on-plus-two',
  'on-plus-three',
  'on-plus-four',
  'on-plus-five',
  'on-plus-six',
  'on-plus-seven',
  'on-plus-eight',
  'on-plus-max',
  'minus-one',
  'minus-two',
  'minus-three',
  'minus-four',
  'minus-five',
  'minus-six',
  'minus-seven',
  'minus-eight',
  'minus-max',
  'plus-one',
  'plus-two',
  'plus-three',
  'plus-four',
  'plus-five',
  'plus-six',
  'plus-seven',
  'plus-eight',
  'plus-max',
  'on-base',
]

// This is used in the isHyphenated method so that any key of luminosity-x returns true.
const HYPHENATED_LUMINOSITIES = [...Array(101).keys()].map((luminosity) => `luminosity-${luminosity}`)

function splitKey(key) {
  let keys = key.slice(2).split('-')
  return keys
}

function addToJson(keys, data, value) {
  let currentKey, remainingKeys

  if (isHyphenated(keys, 2)) {
    ;[currentKey, remainingKeys] = [keys.slice(0, 2).join('-'), keys.slice(2)]
  } else if (isHyphenated(keys, 3)) {
    ;[currentKey, remainingKeys] = [keys.join('-'), keys.slice(3)]
  } else {
    ;[currentKey, ...remainingKeys] = keys
  }

  data[currentKey] = data[currentKey] ?? {}

  switch (remainingKeys.length) {
    case 0:
      data[currentKey] = value
      break
    case 1:
      data[currentKey][remainingKeys[0]] = value
      break
    default:
      data[currentKey] = addToJson(remainingKeys, data[currentKey], value)
      break
  }

  return data
}

try {
  const parsedArgs = {}

  process.argv.forEach((argument) => {
    const values = argument.slice(2).split('=')
    if (values.length === 2) {
      parsedArgs[values[0]] = values[1]
    }
  })

  const source = parsedArgs['source'] || 'src/core/tokens'
  const output = parsedArgs['output'] || './dist/tokens'
  const outputPath = path.dirname(output)
  const outputFile = path.basename(output)

  if (!fs.existsSync(outputPath)) {
    fs.mkdirSync(outputPath, { recursive: true })
  }

  fs.readdir(source, { withFileTypes: true }, (_errors, files) => {
    let variables = {}
    files
      .filter((directoryEntry) => directoryEntry.isFile() && directoryEntry.name !== 'index.css')
      .forEach((directoryEntry) => {
        const fileContents = fs.readFileSync(`${source}/${directoryEntry.name}`)
        // Import-only files like base_tokens.css declare no variables.
        const matches = fileContents.toString().match(/^\s*--.*?(?=;)/gm) ?? []
        matches.forEach((match) => {
          const [key, value] = match.split(':')
          variables = addToJson(splitKey(key.trim()), variables, value.trim())
        })
      })
    fs.writeFileSync(`${outputPath}/${outputFile}`, JSON.stringify(variables, null, '\t'))
  })
} catch (err) {
  console.log(err)
}