chore: update example

Author: nado1001

example/create-configuration-file/build/web/tailwind.config.js

@@ -1,4 +1,3 @@
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   mode: "jit",

example/create-configuration-file/package.json

@@ -1,13 +1,13 @@
 {
   "name": "create-configuration-file",
   "version": "1.0.0",
-  "main": "sd.config.js",
+  "main": "sd.config.mjs",
   "license": "MIT",
   "scripts": {
-    "build": "node sd.config.js"
+    "build": "node sd.config.mjs"
   },
   "devDependencies": {
-    "sd-tailwindcss-transformer": "1.4.6",
-    "style-dictionary": "3.9.2"
+    "sd-tailwindcss-transformer": "^2.0.0",
+    "style-dictionary": "^4.1.2"
   }
 }

example/create-configuration-file/sd.config.js

@@ -0,0 +1,14 @@
+import StyleDictionaryModule from 'style-dictionary'
+import { makeSdTailwindConfig } from 'sd-tailwindcss-transformer'
+
+const StyleDictionary = new StyleDictionaryModule(
+  makeSdTailwindConfig({
+    type: 'all',
+    tailwind: {
+      plugins: ['forms', 'typography']
+    }
+  })
+)
+
+await StyleDictionary.hasInitialized
+await StyleDictionary.buildAllPlatforms()

example/create-configuration-file/sd.config.mjs

@@ -1,13 +1,13 @@
 {
   "name": "create-each-theme-file",
   "version": "1.0.0",
-  "main": "sd.config.js",
+  "main": "sd.config.mjs",
   "license": "MIT",
   "scripts": {
-    "build": "node sd.config.js"
+    "build": "node sd.config.mjs"
   },
   "devDependencies": {
-    "sd-tailwindcss-transformer": "1.4.6",
-    "style-dictionary": "3.9.2"
+    "sd-tailwindcss-transformer": "^2.0.0",
+    "style-dictionary": "^4.1.2"
   }
 }

example/create-configuration-file/yarn.lock

@@ -1,14 +1,14 @@
-const StyleDictionaryModule = require('style-dictionary')
-const { makeSdTailwindConfig } = require('sd-tailwindcss-transformer')
+import StyleDictionaryModule from 'style-dictionary'
+import { makeSdTailwindConfig } from 'sd-tailwindcss-transformer'
 
 StyleDictionaryModule.registerTransform({
   type: `value`,
   transitive: true,
   name: `tailwind/font/px`,
-  matcher: function (token) {
+  filter: function (token) {
     return token.attributes.category === 'fontSize'
   },
-  transformer: function ({ value }) {
+  transform: function ({ value }) {
     if (value.indexOf('px') !== -1) {
       return value
     }
@@ -20,10 +20,10 @@ StyleDictionaryModule.registerTransform({
 const types = ['colors', 'fontSize']
 
 types.map((type) => {
-  const StyleDictionary = StyleDictionaryModule.extend(
+  const StyleDictionary = new StyleDictionaryModule(
     makeSdTailwindConfig({
       type,
-      transforms: ['attribute/cti', 'name/cti/kebab', 'tailwind/font/px']
+      transforms: ['attribute/cti', 'name/kebab', 'tailwind/font/px']
     })
   )