From 889b9ff2e3d5af1ee928605d715735ec3741ae71 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Sat, 20 Apr 2024 09:12:41 +0200 Subject: [PATCH] add value to css variable transformer --- README.md | 44 +++++++++++++++++++ __tests__/build.test.js | 2 +- __tests__/index.test.ts | 2 +- ....test.ts => value-to-css-variable.test.ts} | 8 ++-- src/index.ts | 6 +-- ...iables-css.ts => value-to-css-variable.ts} | 2 +- 6 files changed, 54 insertions(+), 10 deletions(-) rename __tests__/transformer/{variables-css.test.ts => value-to-css-variable.test.ts} (69%) rename src/transformer/{variables-css.ts => value-to-css-variable.ts} (95%) diff --git a/README.md b/README.md index ced07dc..b04d1b9 100644 --- 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 index 5abb0b7..55b99a7 100644 --- 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 index 3796f9d..a0568af 100644 --- 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 b/__tests__/transformer/value-to-css-variable.test.ts similarity index 69% rename from __tests__/transformer/variables-css.test.ts rename to __tests__/transformer/value-to-css-variable.test.ts index 52f95ac..d831888 100644 --- a/__tests__/transformer/variables-css.test.ts +++ b/__tests__/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 index 2bd8b75..910019b 100644 --- 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 b/src/transformer/value-to-css-variable.ts similarity index 95% rename from src/transformer/variables-css.ts rename to src/transformer/value-to-css-variable.ts index a509b6c..48d2827 100644 --- a/src/transformer/variables-css.ts +++ b/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: (