Merge pull request #100 from tokens-studio/upgrade-sd-27

feat: upgrade to style-dictionary pre 27

Author: jorenbroekema

.changeset/silent-tables-pretend.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/configurator": patch
+---
+
+Upgrade to Style Dictionary 4.0.0-prerelease.27

package-lock.json

@@ -17,6 +17,7 @@
     "./utils": "./src/utils.js"
   },
   "scripts": {
+    "start": "wds",
     "dev": "wds",
     "build": "rimraf dist && rollup -c rollup.config.js",
     "release": "npm run build && changeset publish"
@@ -36,7 +37,7 @@
     "magic-string": "^0.30.8",
     "path-unified": "^0.1.0",
     "prettier": "^3.2.5",
-    "style-dictionary": "4.0.0-prerelease.26",
+    "style-dictionary": "4.0.0-prerelease.27",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

package.json

@@ -137,7 +137,7 @@ class PlatformsDialog extends LitElement {
       >
         <sd-selection-display slot="selection-display"></sd-selection-display>
         ${repeat(
-          Object.keys(StyleDictionary.transformGroup)
+          Object.keys(StyleDictionary.hooks.transformGroups)
             // put tokens-studio transformGroup first
             .sort((a, b) => {
               if (a === "tokens-studio") return -1;
@@ -155,7 +155,7 @@ class PlatformsDialog extends LitElement {
           `
         )}
         ${repeat(
-          Object.keys(StyleDictionary.transform)
+          Object.keys(StyleDictionary.hooks.transforms)
             // put tokens-studio transforms first
             .sort((a, b) => {
               if (a.startsWith("ts/")) return -1;
@@ -189,7 +189,7 @@ class PlatformsDialog extends LitElement {
       >
         <sd-selection-display slot="selection-display"></sd-selection-display>
         ${repeat(
-          Object.keys(StyleDictionary.format),
+          Object.keys(StyleDictionary.hooks.formats),
           (format) => format,
           (format) => html`
             <sd-option .checked=${false} .choiceValue="${format}"

src/components/platforms/platforms-dialog.js

@@ -169,7 +169,9 @@ class TokenPlatforms extends LitElement {
       <div class="transform">
         <h4>${platform.transformGroup}</h4>
         <div class="text-small">
-          ${StyleDictionary.transformGroup[platform.transformGroup]?.join(", ")}
+          ${StyleDictionary.hooks.transformGroups[
+            platform.transformGroup
+          ]?.join(", ")}
         </div>
       </div>
     `;

src/components/platforms/token-platforms.js

@@ -20,9 +20,10 @@ import { snackbar } from "./components/snackbar/SnackbarManager.js";
 const { promises } = fs;
 
 StyleDictionary.registerParser({
+  name: "js-tokens-parser",
   // matches js, mjs
   pattern: /\.(j|mj)s$/,
-  parse: async ({ filePath }) => {
+  parser: async ({ filePath }) => {
     const bundled = await bundle(filePath);
     const url = URL.createObjectURL(
       new Blob([bundled], { type: "text/javascript" })