add value to css variable transformer

lukasoppermann · Apr 20, 2024 · 889b9ff · 889b9ff
1 parent 8b4ec69
commit 889b9ff
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -92,6 +92,7 @@ StyleDictionary.registerTransform({
   - [dimension/remToPixel](#dimensionremtopixel)
   - [dimension/pixelUnitless](#dimensionpixelunitless)
   - [clamp/css](#clampcss)
+  - [value/cssVariable](#valuetocssvariable)
 - Filters
   - [isSource](#issource)
   - [isColor](#iscolor)
@@ -981,6 +982,49 @@ const myStyleDictionary = StyleDictionary.extend({
 }
 ```
 
+### value/cssVariable
+
+This `value` transformer replaces the value of any token, with a css variable of the same name as the token.
+The idea is that if you want to generate e.g. a js object that references css variables, you use this variable
+
+```js
+const myStyleDictionary = StyleDictionary.extend({
+  "platforms": {
+    "js": {
+      "transforms": ['value/cssVariable'],
+      "files": [{
+        // ...
+      }],
+    }
+  }
+});
+```
+##### Before transformation
+
+```js
+{
+  colors: {
+    danger: {
+      value: "#ff0000",
+      $type: "color"
+    }
+  }
+}
+```
+
+##### After transformation
+
+```js
+{
+  size: {
+    small: {
+      value: "var(--colors-danger)",
+      $type: "color"
+    }
+  }
+}
+```
+
 ## 🚦 Filters
 
 Filters are used to filter out unwanted tokens when [configuring output files](https://amzn.github.io/style-dictionary/#/config?id=file)

diff --git a/__tests__/build.test.js b/__tests__/build.test.js
@@ -18,7 +18,7 @@ describe('index.js', () => {
     expect(StyleDictionary.transform["shadow/css"]).toBeDefined();
     expect(StyleDictionary.transform["font/css"]).toBeDefined();
     expect(StyleDictionary.transform["fontFamily/css"]).toBeDefined();
-    expect(StyleDictionary.transform["variables/css"]).toBeDefined();
+    expect(StyleDictionary.transform["value/cssVariable"]).toBeDefined();
     expect(StyleDictionary.transform["fontWeight/number"]).toBeDefined();
     expect(StyleDictionary.transform["gradient/css"]).toBeDefined();
     expect(StyleDictionary.transform["cubicBezier/css"]).toBeDefined();

diff --git a/__tests__/index.test.ts b/__tests__/index.test.ts
@@ -26,7 +26,7 @@ describe('index.ts', () => {
     expect(StyleDictionary.transform['shadow/css']).toBeDefined()
     expect(StyleDictionary.transform['font/css']).toBeDefined()
     expect(StyleDictionary.transform['fontFamily/css']).toBeDefined()
-    expect(StyleDictionary.transform['variables/css']).toBeDefined()
+    expect(StyleDictionary.transform['value/cssVariable']).toBeDefined()
     expect(StyleDictionary.transform['fontWeight/number']).toBeDefined()
     expect(StyleDictionary.transform['gradient/css']).toBeDefined()
     expect(StyleDictionary.transform['cubicBezier/css']).toBeDefined()

diff --git a/__tests__/transformer/variables-css.test.ts → ...transformer/value-to-css-variable.test.ts b/__tests__/transformer/variables-css.test.ts → ...transformer/value-to-css-variable.test.ts
@@ -1,7 +1,7 @@
 import StyleDictionary from "style-dictionary";
-import { variablesCss } from "../../src/transformer/variables-css";
+import { valueToCssVariable } from "../../src/transformer/value-to-css-variable";
 
-describe("Transformer: variablesCss", () => {
+describe("Transformer: valueToCssVariable", () => {
   const items = [
     {
       name: "red",
@@ -20,13 +20,13 @@ describe("Transformer: variablesCss", () => {
 
   it("transforms names to CSS variable notation", () => {
     expect(
-      items.map((item) => variablesCss.transformer(item, {}))
+      items.map((item) => valueToCssVariable.transformer(item, {}))
     ).toStrictEqual(["var(--red)", "var(--white)"]);
   });
 
   it("adds prefix to CSS variable notation", () => {
     expect(
-      items.map((item) => variablesCss.transformer(item, options))
+      items.map((item) => valueToCssVariable.transformer(item, options))
     ).toStrictEqual([
       "var(--PREFIX-red, #ff0000)",
       "var(--PREFIX-white, #ffffff)",

diff --git a/src/index.ts b/src/index.ts
@@ -38,7 +38,7 @@ import { fontWeightToNumber } from './transformer/font-weight-to-number'
 import { gradientCss } from './transformer/gradient-css'
 import { namePathToDotNotation } from './transformer/name-path-to-dot-notation'
 import { shadowCss } from './transformer/shadow-css'
-import { variablesCss } from './transformer/variables-css'
+import { valueToCssVariable } from './transformer/value-to-css-variable'
 
 /**
  * Parsers
@@ -161,8 +161,8 @@ OrigialStyleDictionary.registerTransform({
 })
 
 OrigialStyleDictionary.registerTransform({
-  name: 'variables/css',
-  ...variablesCss
+  name: 'value/cssVariable',
+  ...valueToCssVariable
 })
 /**
  * Transform groups

diff --git a/src/transformer/variables-css.ts → src/transformer/value-to-css-variable.ts b/src/transformer/variables-css.ts → src/transformer/value-to-css-variable.ts
@@ -30,7 +30,7 @@ function formatCssVariable(name: string, value: string, options: CssOptions) {
  * variablesCss
  * @description convert the `name` to a css variable
  */
-export const variablesCss: StyleDictionary.Transform = {
+export const valueToCssVariable: StyleDictionary.Transform = {
   type: `value`,
   transitive: true,
   transformer: (