Merge pull request #369 from mrajaeim/main

Support Style Dictionary v4 and add preprocessors config

Author: nado1001

README.md

@@ -24,14 +24,14 @@ Generate `tailwind.config.js` by setting type to `all`.
 See [Creating each theme file](https://github.com/nado1001/sd-tailwindcss-transformer#creating-each-theme-file) if you wish to customize the configuration file with [plugin functions](https://tailwindcss.com/docs/plugins), etc.
 
 ```js
-const StyleDictionaryModule = require('style-dictionary')
-const { makeSdTailwindConfig } = require('sd-tailwindcss-transformer')
-
-const StyleDictionary = StyleDictionaryModule.extend(
-  makeSdTailwindConfig({ type: 'all' })
-)
-
-StyleDictionary.buildAllPlatforms()
+import StyleDictionary from 'style-dictionary';
+import { makeSdTailwindConfig } from 'sd-tailwindcss-transformer';
+
+const styleDictionaryTailwind = new StyleDictionary(
+    makeSdTailwindConfig({ type: 'all' }),
+);
+await styleDictionaryTailwind.hasInitialized;
+await styleDictionaryTailwind.buildAllPlatforms();
 ```
 
 Output:
@@ -68,18 +68,21 @@ Create an object for each theme, assuming that various customizations will be ma
 Import and use the created files in `tailwind.config.js`.
 
 ```js
-const StyleDictionaryModule = require('style-dictionary')
-const { makeSdTailwindConfig } = require('sd-tailwindcss-transformer')
+import StyleDictionary from 'style-dictionary';
+import { makeSdTailwindConfig } from 'sd-tailwindcss-transformer';
 
-const types = ['colors', 'fontSize']
+const types = ['colors', 'fontSize'];
 
-types.map((type) => {
-  const StyleDictionary = StyleDictionaryModule.extend(
-    makeSdTailwindConfig({ type })
-  )
+for (const type of types) {
+    let tailwindConfig = makeSdTailwindConfig({
+        type,
+    });
 
-  StyleDictionary.buildAllPlatforms()
-})
+    const styleDictionaryTailwind = new StyleDictionary(tailwindConfig);
+
+    await styleDictionaryTailwind.hasInitialized;
+    await styleDictionaryTailwind.buildAllPlatforms();
+}
 ```
 
 Output:
@@ -110,30 +113,33 @@ CSS custom variables can be used by setting isVariables to `true`.
 In this case, a CSS file must also be generated.
 
 ```js
-const StyleDictionaryModule = require('style-dictionary')
-const { makeSdTailwindConfig } = require('sd-tailwindcss-transformer')
+import StyleDictionary from 'style-dictionary';
+import { makeSdTailwindConfig } from 'sd-tailwindcss-transformer';
 
 const sdConfig = makeSdTailwindConfig({
-  type: 'all',
-  isVariables: true
-})
+    type: 'all',
+    isVariables: true,
+});
 
 sdConfig.platforms['css'] = {
-  transformGroup: 'css',
-  buildPath: './styles/',
-  files: [
-    {
-      destination: 'tailwind.css',
-      format: 'css/variables',
-      options: {
-        outputReferences: true
-      }
-    }
-  ]
-}
-
-const StyleDictionary = StyleDictionaryModule.extend(sdConfig)
-StyleDictionary.buildAllPlatforms()
+    transformGroup: 'css',
+    buildPath: './styles/',
+    files: [
+        {
+            destination: 'tailwind.css',
+            format: 'css/variables',
+            options: {
+                outputReferences: true,
+            },
+        },
+    ],
+};
+
+const styleDictionaryTailwind = new StyleDictionary(
+    makeSdTailwindConfig({ type: 'all' }),
+);
+await styleDictionaryTailwind.hasInitialized;
+await styleDictionaryTailwind.buildAllPlatforms();
 ```
 
 Output:

package.json

@@ -50,14 +50,14 @@
     "prettier": "2.8.8",
     "rimraf": "3.0.2",
     "semantic-release": "21.1.2",
-    "style-dictionary": "3.9.2",
+    "style-dictionary": "^4.1.1",
     "tailwindcss": "3.4.4",
     "ts-node": "10.9.2",
     "tsup": "6.7.0",
     "typescript": "4.9.5",
     "vitest": "0.33.0"
   },
   "peerDependencies": {
-    "style-dictionary": ">=3.7.0"
+    "style-dictionary": ">=4.0.0"
   }
 }

src/index.ts

@@ -1,4 +1,5 @@
-import type { Dictionary, Config } from 'style-dictionary/types'
+import type { Dictionary } from 'style-dictionary/types/DesignToken'
+import type { Config } from 'style-dictionary/types/Config'
 import type { SdTailwindConfigType, TailwindFormatObjType } from './types'
 import {
   addHyphen,
@@ -29,7 +30,7 @@ const formatTokens = (
           ? `var(--${addHyphen(prefix) + cur.name})`
           : `var(--${cur.name})`
       } else {
-        acc[Object.values(cur.attributes).join('.')] = cur.value
+        acc[Object.values(cur.attributes).join('.')] = cur["$value"] || cur["value"]
       }
     }
 
@@ -96,7 +97,8 @@ export const makeSdTailwindConfig = ({
   transforms,
   buildPath,
   prefix,
-  tailwind
+  tailwind,
+  preprocessors
 }: SdTailwindConfigType): Config => {
   if (type === undefined) {
     throw new Error('type is required')
@@ -106,34 +108,39 @@ export const makeSdTailwindConfig = ({
     throw new Error('formatType must be "js" or "cjs"')
   }
 
+  const destination =
+      type !== 'all'
+          ? `${type}.tailwind.${formatType}`
+          : `tailwind.config.${formatType}`
+
   return {
+    preprocessors,
     source: getConfigValue(source, ['tokens/**/*.json']),
-    format: {
-      tailwindFormat: ({ dictionary }: { dictionary: Dictionary }) => {
-        return getTailwindFormat({
-          dictionary,
-          formatType,
-          isVariables,
-          extend,
-          prefix,
-          type,
-          tailwind
-        })
+    hooks: {
+      formats: {
+        tailwindFormat: ({ dictionary }: { dictionary: Dictionary }) => {
+          return getTailwindFormat({
+            dictionary,
+            formatType,
+            isVariables,
+            extend,
+            prefix,
+            type,
+            tailwind
+          })
+        }
       }
     },
     platforms: {
       [type !== 'all' ? `tailwind/${type}` : 'tailwind']: {
         transforms: getConfigValue(transforms, [
           'attribute/cti',
-          'name/cti/kebab'
+          'name/kebab'
         ]),
         buildPath: getConfigValue(buildPath, 'build/web/'),
         files: [
           {
-            destination:
-              type !== 'all'
-                ? `${type}.tailwind.js`
-                : `tailwind.config.${formatType}`,
+            destination,
             format: 'tailwindFormat'
           }
         ]

src/types.ts

@@ -1,6 +1,5 @@
-import type { Dictionary } from 'style-dictionary/types/Dictionary'
-import type { Platform } from 'style-dictionary/types/Platform'
-import type { Config } from 'style-dictionary/types/Config'
+import { Dictionary } from 'style-dictionary/types/DesignToken'
+import type { Config, PlatformConfig } from 'style-dictionary/types/Config'
 import type { Config as TailwindConfig } from 'tailwindcss/types'
 
 export type SdObjType<T extends Record<string, any>> = {
@@ -9,7 +8,13 @@ export type SdObjType<T extends Record<string, any>> = {
 
 export type TailwindOptions = Pick<TailwindConfig, 'content' | 'darkMode'> & {
   plugins: Array<
-    'typography' | ['typography', { className?: string, target?: 'modern' | 'legacy' }] | 'forms' | ['forms', { strategy?: 'base' | 'class' }] | 'aspect-ratio' | 'line-clamp' | 'container-queries'
+    | 'typography'
+    | ['typography', { className?: string; target?: 'modern' | 'legacy' }]
+    | 'forms'
+    | ['forms', { strategy?: 'base' | 'class' }]
+    | 'aspect-ratio'
+    | 'line-clamp'
+    | 'container-queries'
   >
 }
 export type TailwindFormatType = 'js' | 'cjs'
@@ -19,9 +24,10 @@ export type SdTailwindConfigType = {
   formatType?: TailwindFormatType
   isVariables?: boolean
   source?: Config['source']
-  transforms?: Platform['transforms']
-  buildPath?: Platform['buildPath']
-  prefix?: Platform['prefix']
+  preprocessors?: Config['preprocessors']
+  transforms?: PlatformConfig['transforms']
+  buildPath?: PlatformConfig['buildPath']
+  prefix?: PlatformConfig['prefix']
   tailwind?: Partial<TailwindOptions>
   extend?: boolean
 }