build: add more output metadata files

ecomfe · Dec 28, 2023 · 768da0f · 768da0f
1 parent 7b51d3f
commit 768da0f
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 41 deletions.
diff --git a/packages/less-plugin-dls/README.md b/packages/less-plugin-dls/README.md
@@ -64,7 +64,12 @@ interface Variables {
 }
 ```
 
-There are also themed versions of the above files, which are named with the theme name as the suffix, namely `variables.<theme>.js`, `variables.<theme>.json` and `variables.<theme>.less`. Currently the only supported theme is `ai`.
+We also included a set of metadata files for different themes and scopes. Currently the only supported theme is `ai` and supported scopes are `global` and `palette`. The dist file names are in the format of `variables.<scope>.<theme>.<format>`, where `<scope>` and `<theme>` are both optional. eg.
+
+```sh
+variables.global.less # global variables, w/o component variables
+variables.palette.ai.less # global color palette variables in AI theme
+```
 
 ## Custom functions
 

diff --git a/packages/less-plugin-dls/scripts/vars.js b/packages/less-plugin-dls/scripts/vars.js
@@ -4,56 +4,86 @@ import camelCase from 'lodash.camelcase'
 import { parse } from 'postcss-values-parser'
 import { getVariables, getTuples } from '../lib/utils/evaluate'
 
+const paletteRe = /^dls-color-(?:brand|info|success|warning|error|gray|translucent)(?:-\d+)?$/
+
+function getFilePath (type, { scope, theme } = {}) {
+  return path.resolve(__dirname, '..', `variables${scope ? `.${scope}` : ''}${theme ? `.${theme}` : ''}.${type}`)
+}
+
+function genLess (tuples, options) {
+  const filePath = getFilePath('less', options)
+
+  fs.writeFileSync(
+    filePath,
+    tuples.map(([key, value]) => `@${key}: ${value};`).join('\n') + '\n',
+    'utf8'
+  )
+}
+
+function genJS (tuples, options) {
+  const filePath = getFilePath('js', options)
+
+  fs.writeFileSync(
+    filePath,
+    tuples
+      .map(([key, value]) => `export const ${camelCase(key)} = '${value}'`)
+      .join('\n') + '\n',
+    'utf8'
+  )
+}
+
+function genJSON (tuples, options) {
+  const filePath = getFilePath('json', options)
+  fs.writeFileSync(
+    filePath,
+    JSON.stringify(
+      tuples
+        .map(([key, value]) => ({
+          [key]: {
+            value,
+            type: getTypeByName(key) || getTypeByValue(value),
+            global: options.globals.includes(key)
+          }
+        }))
+        .reduce((acc, cur) => {
+          Object.assign(acc, cur)
+          return acc
+        }, {}),
+      null,
+      '  '
+    ),
+  'utf8'
+  )
+}
+
 async function generate({ theme } = {}) {
   try {
     const allVariables = await getVariables('./tokens/index.less')
     const globalVariables = await getVariables('./tokens/global.less')
-    const themeVariables = await getVariables(`./tokens/themes/${theme}.less`)
+    const paletteVariables = globalVariables.filter(v => paletteRe.test(v))
 
-    const tuples = await getTuples(allVariables.concat(themeVariables), {
-      theme
-    })
+    const allTuples = await getTuples(allVariables, { theme })
+    const globalTuples = await getTuples(globalVariables, { theme })
+    const paletteTuples = await getTuples(paletteVariables, { theme })
 
-    const themeTail = theme ? `.${theme}` : ''
+    genLess(allTuples, { theme })
+    genLess(globalTuples, { scope: 'global', theme })
+    genLess(paletteTuples, { scope: 'palette', theme })
 
-    // generate variables.less
-    fs.writeFileSync(
-      path.resolve(__dirname, '..', `variables${themeTail}.less`),
-      tuples.map(([key, value]) => `@${key}: ${value};`).join('\n') + '\n',
-      'utf8'
-    )
+    genJS(allTuples, { theme })
+    genJS(globalTuples, { scope: 'global', theme })
+    genJS(paletteTuples, { scope: 'palette', theme })
 
-    fs.writeFileSync(
-      path.resolve(__dirname, '..', `variables${themeTail}.js`),
-      tuples
-        .map(([key, value]) => `export const ${camelCase(key)} = '${value}'`)
-        .join('\n') + '\n',
-      'utf8'
-    )
 
-    // generate variables.json
-    fs.writeFileSync(
-      path.resolve(__dirname, '..', `variables${themeTail}.json`),
-      JSON.stringify(
-        tuples
-          .map(([key, value]) => ({
-            [key]: {
-              value,
-              type: getTypeByName(key) || getTypeByValue(value),
-              global: globalVariables.includes(key)
-            }
-          }))
-          .reduce((acc, cur) => {
-            Object.assign(acc, cur)
-            return acc
-          }, {}),
-        null,
-        '  '
-      ),
-      'utf8'
-    )
+    genJSON(allTuples, { theme, globals: globalVariables })
+    genJSON(globalTuples, { scope: 'global', theme, globals: globalVariables })
+    genJSON(paletteTuples, { scope: 'palette', theme, globals: paletteVariables })
 
-    console.log(`${tuples.length} variables generated for theme [${theme || 'default'}].`)
+    console.log(
+      `${allTuples.length} variables generated for theme [${
+        theme || 'default'
+      }].`
+    )
   } catch (e) {
     console.error(e)
   }

diff --git a/packages/less-plugin-dls/tokens/global.less b/packages/less-plugin-dls/tokens/global.less
@@ -381,6 +381,7 @@
 @dls-border-radius-1: 4px;
 @dls-border-radius-2: 6px;
 @dls-border-radius-3: 10px;
+@dls-border-radius-4: 16px;
 
 /* Shadows */
 @dls-shadow-color: @dls-color-gray-11;