chore: upgrade style-dictionary to v4

package.json

@@ -42,7 +42,6 @@
     "css-tree": "2.3.1",
     "figma-api-exporter": "github:brave/figma-api-exporter#08ea66f0794fcb3fa0240692d9016a562b4fbcef",
     "jsdom": "21.1.2",
-    "lodash.camelcase": "4.3.0",
     "lodash.merge": "4.6.2",
     "postcss": "8.5.3",
     "postcss-js": "4.0.1",
@@ -54,7 +53,7 @@
     "sass": "1.86.0",
     "sass-loader": "13.3.3",
     "storybook": "8.6.12",
-    "style-dictionary": "3.9.2",
+    "style-dictionary": "4.3.3",
     "style-loader": "3.3.4",
     "svelte-check": "3.8.6",
     "svelte-loader": "3.2.4",

src/postcss/theme.js

@@ -37,8 +37,8 @@ const defaultOptions = {
 
 /**
  * @param {{
- *  darkSelector: string,
- *  lightSelector: string,
+ *  darkSelector?: string,
+ *  lightSelector?: string,
  *  wrapSelector?: (selector: string) => string,
  * }} options The options for configuring the selectors for darkmode.
  */

src/scripts/common.js

@@ -6,7 +6,7 @@ import { fileURLToPath } from 'url'
 /**
  * Recursively walks all files in a folder
  * @param {string} dir The directory to walk
- * @param {((name: string, path: string, entry: Dirent) => boolean)?} skip A function for filtering out entries
+ * @param {((name: string, path: string, entry: Dirent) => boolean)} [skip] A function for filtering out entries
  * @returns {Promise<AsyncIterable<string>}
  */
 export async function* walk(dir, skip) {

src/tokens/config.ts

@@ -1,4 +1,4 @@
-import { Config } from 'style-dictionary'
+import type { Config } from 'style-dictionary/types'
 import leoParser from './transformation/common/leoParser'
 
 function formatLayerPathPart(
@@ -12,13 +12,23 @@ function formatLayerPathPart(
 
 export default function getConfig(layers: string[]) {
   return {
+    hooks: {
+      parsers: {
+        'leo-parser': leoParser
+      }
+    },
+    parsers: ['leo-parser'],
     source: layers.map((layer) => `src/tokens/${layer}*.json`),
-    parsers: [leoParser],
     platforms: {
       tailwind: {
         transformGroup: 'tailwind/css',
         buildPath: 'tokens/tailwind/',
         preset: formatLayerPathPart(layers),
+        options: {
+          formatting: {
+            fileHeaderTimestamp: true
+          }
+        },
         files: [
           {
             destination: `${formatLayerPathPart(layers, {
@@ -61,16 +71,19 @@ export default function getConfig(layers: string[]) {
       css: {
         transformGroup: 'custom/css',
         buildPath: 'tokens/css/',
+        options: {
+          showFileHeader: true,
+          formatting: {
+            fileHeaderTimestamp: true
+          }
+        },
         files: [
           {
             destination: `variables${formatLayerPathPart(layers, {
               prefix: '-'
             })}.css`,
             format: 'custom/css',
-            filter: 'filterWeb',
-            options: {
-              showFileHeader: true
-            }
+            filter: 'filterWeb'
           },
           {
             destination: `variables${formatLayerPathPart(layers, {
@@ -84,6 +97,11 @@ export default function getConfig(layers: string[]) {
       'json-flat': {
         transformGroup: 'js',
         buildPath: 'tokens/json/',
+        options: {
+          formatting: {
+            fileHeaderTimestamp: true
+          }
+        },
         files: [
           {
             destination: `styles${formatLayerPathPart(layers, {
@@ -96,6 +114,11 @@ export default function getConfig(layers: string[]) {
       skia: {
         transformGroup: 'skia',
         buildPath: 'tokens/skia/',
+        options: {
+          formatting: {
+            fileHeaderTimestamp: true
+          }
+        },
         files: [
           {
             destination: 'nala_color_id.h',
@@ -137,6 +160,11 @@ export default function getConfig(layers: string[]) {
       ios: {
         transformGroup: 'ios',
         buildPath: 'tokens/ios-swift/',
+        options: {
+          formatting: {
+            fileHeaderTimestamp: true
+          }
+        },
         files: [
           {
             destination: 'Gradients.swift',
@@ -158,6 +186,11 @@ export default function getConfig(layers: string[]) {
       android: {
         transformGroup: 'android',
         buildPath: 'tokens/android/',
+        options: {
+          formatting: {
+            fileHeaderTimestamp: true
+          }
+        },
         files: [
           {
             destination: 'values/styles.xml',

src/tokens/transformTokens.ts

@@ -12,10 +12,10 @@ import './transformation/android'
 StyleDictionary.registerTransform({
   name: 'size/percent',
   type: 'value',
-  matcher: (token) => {
+  filter: (token) => {
     return token.unit === 'percent' && token.value !== 0
   },
-  transformer: (token) => {
+  transform: (token) => {
     return `${token.value}%`
   }
 })
@@ -25,10 +25,11 @@ StyleDictionary.registerTransform({
  * all of the relevant tokens together in one.
  */
 for (const platform of ['android', 'ios', 'skia']) {
-  const StyleDictionaryExtended = StyleDictionary.extend(
+  const StyleDictionaryExtended = new StyleDictionary(
     getConfig(['universal', platform, 'browser'])
   )
-  StyleDictionaryExtended.buildPlatform(platform)
+  await StyleDictionaryExtended.hasInitialized
+  await StyleDictionaryExtended.buildPlatform(platform)
 }
 
 /**
@@ -48,9 +49,11 @@ const layers = [
   'web3'
 ]
 for (const layer of layers) {
-  const StyleDictionaryExtended = StyleDictionary.extend(getConfig([layer]))
+  const StyleDictionaryExtended = new StyleDictionary(getConfig([layer]))
 
-  StyleDictionaryExtended.buildPlatform('css')
-  StyleDictionaryExtended.buildPlatform('json-flat')
-  StyleDictionaryExtended.buildPlatform('tailwind')
+  await StyleDictionaryExtended.hasInitialized
+
+  await StyleDictionaryExtended.buildPlatform('css')
+  await StyleDictionaryExtended.buildPlatform('json-flat')
+  await StyleDictionaryExtended.buildPlatform('tailwind')
 }

src/tokens/transformation/android/colorName.js → src/tokens/transformation/android/colorName.ts

@@ -1,14 +1,17 @@
+import type { Transform } from 'style-dictionary/types'
+
 export default {
+  name: 'android/transformColorName',
   type: 'name',
-  matcher: function (token) {
+  filter: function (token) {
     return token.type === 'color'
   },
-  transformer: function (token) {
+  transform: function (token) {
     return token.name
       .replace('color_', '')
       .replace('light_', '')
       .replace('dark_', '')
       .replace('legacy_light_', '')
       .replace('legacy_dark_', '')
   }
-}
+} as Transform

src/tokens/transformation/android/filters/darkColor.ts

@@ -0,0 +1,7 @@
+import type { Filter } from 'style-dictionary/types'
+import { matchDarkThemeToken } from '../../common/tokenFilters'
+
+export default {
+  name: 'android/filterDarkColor',
+  filter: (token) => matchDarkThemeToken(token)
+} as Filter

src/tokens/transformation/android/filters/fontStyle.ts

@@ -0,0 +1,6 @@
+import type { Filter } from 'style-dictionary/types'
+
+export default {
+  name: 'android/filterFontStyle',
+  filter: (token) => token.attributes.category === 'font'
+} as Filter

src/tokens/transformation/android/filters/lightColor.ts

@@ -0,0 +1,9 @@
+import type { Filter } from 'style-dictionary/types'
+import { matchLightThemeToken } from '../../common/tokenFilters'
+
+export default {
+  name: 'android/filterLightColor',
+  filter: (token) =>
+    // We are adding primitive colors in light colors as values/colors.xml would be the default color file and we don't have dark version of primitive colors.
+    matchLightThemeToken(token) || token.name.startsWith('primitive')
+} as Filter

src/tokens/transformation/android/fontSizeToSp.ts

@@ -0,0 +1,12 @@
+import type { Transform } from 'style-dictionary/types'
+
+export default {
+  name: 'android/transformFontSizeToSp',
+  type: 'value',
+  filter: function (token) {
+    return token.type === 'custom-fontStyle'
+  },
+  transform: function (token) {
+    return `${token.value.fontSize}sp`
+  }
+} as Transform

src/tokens/transformation/android/formats/colorStyle.ts

@@ -0,0 +1,24 @@
+import { TinyColor } from '@ctrl/tinycolor'
+import type { Format } from 'style-dictionary/types'
+import { fileHeader } from 'style-dictionary/utils'
+
+export default {
+  name: 'android/formatColorStyle',
+  format: ({ dictionary, platform, options = {}, file }) => {
+    const colorStyles = dictionary.allTokens
+      .filter((compositeToken) => compositeToken.type === 'color')
+      .map((compositeToken) => {
+        const colorCode = new TinyColor(
+          compositeToken.original.value
+        ).toHexString()
+        return `<color name="${compositeToken.name}">${colorCode}</color>`
+      })
+    return `
+  <?xml version="1.0" encoding="utf-8"?>
+  ${fileHeader({ file, commentStyle: 'xml' })}
+  <resources>
+    ${colorStyles.join('\n')}
+  </resources>
+  `
+  }
+} as Format

src/tokens/transformation/android/formats/dimenStyle.ts

@@ -0,0 +1,21 @@
+import type { Format } from 'style-dictionary/types'
+import { fileHeader } from 'style-dictionary/utils'
+
+export default {
+  name: 'android/formatDimenStyle',
+  format: ({ dictionary, platform, options = {}, file }) => {
+    const fontStyles = dictionary.allTokens
+      .filter((compositeToken) => compositeToken.type === 'custom-fontStyle')
+      .map((compositeToken) => {
+        const dimenName = compositeToken.name.replace('font_android_', '')
+        return ` <dimen name="${dimenName}">${compositeToken.value}</dimen>`
+      })
+    return `
+<?xml version="1.0" encoding="utf-8"?>
+${fileHeader({ file, commentStyle: 'xml' })}
+<resources>
+  ${fontStyles.join('\n')}
+</resources>
+`
+  }
+} as Format