chore(deps): update dependency style-dictionary to v4

packages/design-system/build/build-tokens.js

@@ -1,37 +1,28 @@
-const StyleDictionary = require('style-dictionary')
-const path = require('path')
-const yaml = require('yaml')
+import StyleDictionary from 'style-dictionary'
+import path, { dirname } from 'node:path'
+import yaml from 'yaml'
+import jsonFormat from './build-tokens/format-writer-json.js'
+import scssFormat from './build-tokens/format-writer-scss.js'
+import namespaceTransform from './build-tokens/transform-namespace.js'
+import { fileURLToPath } from 'node:url'
 
-StyleDictionary.registerFormat(require('./build-tokens/format-writer-json'))
-StyleDictionary.registerFormat(require('./build-tokens/format-writer-scss'))
-StyleDictionary.registerTransform(require('./build-tokens/transform-namespace'))
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
-StyleDictionary.extend({
-  parsers: [
-    {
-      pattern: /\.yaml$/,
-      parse: ({ contents, filePath }) => {
-        // This is a bit of a hack to prevent name collisions which would drop the tokens then
-        if (filePath.split('/').some((n) => n === 'docs')) {
-          const parsed = yaml.parse(contents)
-
-          Object.keys(parsed).forEach((k) => {
-            parsed['docs-' + k] = parsed[k]
-
-            delete parsed[k]
-          })
-
-          return parsed
-        }
-
-        return yaml.parse(contents)
+const sd = new StyleDictionary({
+  hooks: {
+    parsers: {
+      'yaml-parser': {
+        pattern: /\.yaml$/,
+        parser: ({ contents }) => yaml.parse(contents)
       }
     }
-  ],
+  },
+  parsers: ['yaml-parser'],
   source: [path.join(__dirname, '../src/tokens/**/*.yaml')],
   platforms: {
     ods: {
-      transforms: ['name/cti/kebab', 'transform/ods/namespace'],
+      transforms: ['name/kebab', 'transform/ods/namespace'],
       buildPath: 'src/assets/tokens/',
       files: [
         {
@@ -43,13 +34,15 @@ StyleDictionary.extend({
           destination: 'ods.json',
           format: 'format/ods/json',
           filter: ({ filePath }) => filePath.includes('/ods/')
-        },
-        {
-          destination: 'docs.scss',
-          format: 'format/ods/scss',
-          filter: ({ filePath }) => filePath.includes('/docs/')
         }
       ]
     }
   }
-}).buildAllPlatforms()
+})
+
+await sd.hasInitialized
+sd.registerFormat(jsonFormat)
+sd.registerFormat(scssFormat)
+sd.registerTransform(namespaceTransform)
+await sd.cleanAllPlatforms()
+await sd.buildAllPlatforms()

packages/design-system/build/build-tokens/format-writer-json.js

@@ -1,10 +1,10 @@
-const tinyColor = require('tinycolor2')
-const { getPropType, sortProps, getPropCategory } = require('./utils')
+import tinyColor from 'tinycolor2'
+import { getPropType, sortProps, getPropCategory } from './utils.js'
 
-module.exports = {
+export default {
   name: 'format/ods/json',
-  formatter: (dictionary) => {
-    const attributes = sortProps(dictionary.allProperties).reduce((acc, cur) => {
+  format: (dictionary) => {
+    const attributes = sortProps(dictionary.allTokens).reduce((acc, cur) => {
       const prop = {
         value: cur.value,
         name: cur.name,

packages/design-system/build/build-tokens/format-writer-scss.js

@@ -1,9 +1,9 @@
-const { sortProps } = require('./utils')
+import { sortProps } from './utils.js'
 
-module.exports = {
+export default {
   name: 'format/ods/scss',
-  formatter: (dictionary) => {
-    const props = sortProps(dictionary.allProperties)
+  format: (dictionary) => {
+    const props = sortProps(dictionary.allTokens)
     const data = [
       ...props.map((p) => `$${p.name}: ${p.value};`),
       '',

packages/design-system/build/build-tokens/transform-namespace.js

@@ -1,7 +1,7 @@
-module.exports = {
+export default {
   name: 'transform/ods/namespace',
   type: 'name',
-  transformer: function (prop) {
+  transform: (prop) => {
     return ['oc', prop.name].filter(Boolean).join('-')
   }
 }

packages/design-system/build/build-tokens/utils.js

@@ -1,8 +1,8 @@
-const path = require('path')
-const { color } = require('style-value-types')
+import path from 'node:path'
+import { color } from 'style-value-types'
 
-exports.getPropType = (prop) => {
-  const { type } = prop.arguments | {}
+export const getPropType = (prop) => {
+  const { type } = prop.arguments || {}
 
   if (type) {
     return type
@@ -15,9 +15,9 @@ exports.getPropType = (prop) => {
   return '...'
 }
 
-exports.getPropCategory = (prop) => path.parse(prop.filePath).name
+export const getPropCategory = (prop) => path.parse(prop.filePath).name
 
-exports.sortProps = (props) => {
+export const sortProps = (props) => {
   return props.sort((a, b) => {
     if (a.name < b.name) {
       return -1

packages/design-system/package.json

@@ -18,6 +18,7 @@
   },
   "license": "AGPL-3.0",
   "author": "ownClouders",
+  "type": "module",
   "main": "src/index.ts",
   "private": false,
   "scripts": {
@@ -125,7 +126,7 @@
     "sass": "1.85.1",
     "semver": "7.7.1",
     "shelljs": "^0.9.0",
-    "style-dictionary": "^3.9.1",
+    "style-dictionary": "^4.0.0",
     "style-value-types": "^5.0.0",
     "stylelint": "16.15.0",
     "stylelint-config-sass-guidelines": "^12.0.0",