Merge pull request #3836 from Royal-Navy/feat/generate-css-vars-from-…

…tokens feat(DesignTokens): Generate and expose CSS vars
Royal-Navy · Jul 4, 2024 · 47db5cb · 47db5cb
2 parents fcb8939 + aa27ff4
commit 47db5cb
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git a/packages/design-tokens/.eslintignore b/packages/design-tokens/.eslintignore
@@ -1,3 +1,4 @@
 src/tokens
 src/flat.ts
 babel.config.js
+build-dictionary.js
diff --git a/packages/design-tokens/build-dictionary.js b/packages/design-tokens/build-dictionary.js
@@ -16,4 +16,15 @@ StyleDictionary.registerFormat({
   formatter: mapDeepDoubleQuotesTemplate,
 })
 
+StyleDictionary.registerFormat({
+  name: 'css/variables',
+  formatter: function ({ dictionary, options }) {
+    return `${this.selector || ':root'} {
+  ${dictionary.allProperties
+    .map((prop) => `--${prop.name}: ${prop.value};`)
+    .join('\n  ')}
+}`
+  },
+})
+
 StyleDictionary.buildAllPlatforms()
diff --git a/packages/design-tokens/config.json b/packages/design-tokens/config.json
@@ -1,14 +1,26 @@
 {
   "source": ["src/tokens/light/*.json"],
   "platforms": {
+    "web": {
+      "transformGroup": "css",
+      "buildPath": "dist/",
+      "files": [
+        {
+          "destination": "variables.css",
+          "format": "css/variables"
+        }
+      ]
+    },
     "scss": {
       "transformGroup": "scss",
       "buildPath": "dist/",
-      "files": [{
-        "destination": "index.scss",
-        "format": "sass/map-deep-double-quotes",
-        "mapName": "tokens"
-      }]
+      "files": [
+        {
+          "destination": "variables.scss",
+          "format": "sass/map-deep-double-quotes",
+          "mapName": "tokens"
+        }
+      ]
     },
     "ts-flat": {
       "transformGroup": "js",

diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
@@ -24,11 +24,11 @@
     "types": "tsc --emitDeclarationOnly --declarationMap --declaration --noEmit false --allowJs false --outDir dist/types",
     "prepack": "pnpm run build",
     "test": "jest",
-    "lint": "eslint src --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json --max-warnings 0 --resolve-plugins-relative-to ../eslint-config-react"
+    "lint": "eslint src --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json --resolve-plugins-relative-to ../eslint-config-react"
   },
   "lint-staged": {
     "*.@(js|jsx|ts|tsx)": [
-      "eslint --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json --max-warnings 0 --resolve-plugins-relative-to ../eslint-config-react",
+      "eslint --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json --resolve-plugins-relative-to ../eslint-config-react",
       "prettier --write"
     ]
   },