fix: references inside color modifiers

.changeset/thirty-chairs-end.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Support references in color modifiers now that style-dictionary transformers can defer themselves.

package.json

@@ -46,7 +46,7 @@
     "expr-eval-fork": "^2.0.2",
     "is-mergeable-object": "^1.1.1",
     "postcss-calc-ast-parser": "^0.1.4",
-    "style-dictionary": "4.0.0-prerelease.8"
+    "style-dictionary": "4.0.0-prerelease.9"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.0",

src/color-modifiers/transformColorModifiers.ts

@@ -1,4 +1,5 @@
 import type { DesignToken } from 'style-dictionary/types';
+import { usesReferences } from 'style-dictionary/utils';
 import { modifyColor } from './modifyColor.js';
 import { ColorModifier } from '@tokens-studio/types';
 import { ColorModifierOptions } from '../TransformOptions.js';
@@ -10,6 +11,14 @@ export function transformColorModifiers(
   options?: ColorModifierOptions,
 ): string | undefined {
   const modifier = token.$extensions['studio.tokens']?.modify as ColorModifier;
+
+  // If some of the modifier props contain references or the modifier itself is a reference
+  // we should return undefined to manually defer this transformation until the references are resolved
+  // see: https://github.com/amzn/style-dictionary/blob/v4/docs/transforms.md#defer-transitive-transformation-manually
+  if (usesReferences(modifier) || Object.values(modifier).some(prop => usesReferences(prop))) {
+    return undefined;
+  }
+
   if (options?.format) {
     modifier.format = options.format;
   }

src/registerTransforms.ts

@@ -78,6 +78,7 @@ export async function registerTransforms(
     name: 'ts/size/px',
     type: 'value',
     matcher: token =>
+      typeof token.type === 'string' &&
       ['sizing', 'spacing', 'borderRadius', 'borderWidth', 'fontSizes', 'dimension'].includes(
         token.type,
       ),
@@ -166,7 +167,7 @@ export async function registerTransforms(
     name: 'ts/shadow/css/shorthand',
     type: 'value',
     transitive: true,
-    matcher: token => ['boxShadow'].includes(token.type),
+    matcher: token => typeof token.type === 'string' && ['boxShadow'].includes(token.type),
     transformer: token =>
       Array.isArray(token.value)
         ? token.value.map(single => transformShadowForCSS(single)).join(', ')

test/integration/color-modifier-references.test.ts

@@ -0,0 +1,56 @@
+import type StyleDictionary from 'style-dictionary';
+import { expect } from '@esm-bundle/chai';
+import { promises } from 'node:fs';
+import path from 'node:path';
+import { cleanup, init } from './utils.js';
+
+const outputDir = 'test/integration/tokens/';
+const outputFileName = 'vars.css';
+const outputFilePath = path.resolve(outputDir, outputFileName);
+
+const cfg = {
+  source: ['test/integration/tokens/color-modifier-references.tokens.json'],
+  platforms: {
+    css: {
+      transformGroup: 'tokens-studio',
+      prefix: 'sd',
+      buildPath: outputDir,
+      files: [
+        {
+          destination: outputFileName,
+          format: 'css/variables',
+        },
+      ],
+    },
+  },
+};
+
+let dict: StyleDictionary | undefined;
+
+describe('typography references', () => {
+  beforeEach(async () => {
+    if (dict) {
+      cleanup(dict);
+    }
+    dict = await init(cfg);
+  });
+
+  afterEach(async () => {
+    if (dict) {
+      await cleanup(dict);
+    }
+  });
+
+  it('supports references inside color modifiers', async () => {
+    const file = await promises.readFile(outputFilePath, 'utf-8');
+    expect(file).to.include(
+      `--sdAlpha: 0.3;
+  --sdColor: #ffffff4d;`,
+    );
+  });
+
+  it('supports color modifier that is a reference itself, containing another reference', async () => {
+    const file = await promises.readFile(outputFilePath, 'utf-8');
+    expect(file).to.include(`--sdColor2: #0000004d;`);
+  });
+});

test/integration/cross-file-refs.test.ts

@@ -1,7 +1,7 @@
 import type StyleDictionary from 'style-dictionary';
 import { expect } from '@esm-bundle/chai';
-import { promises } from 'fs';
-import path from 'path';
+import { promises } from 'node:fs';
+import path from 'node:path';
 import { cleanup, init } from './utils.js';
 
 const outputDir = 'test/integration/tokens/';

test/integration/custom-group.test.ts

@@ -1,8 +1,8 @@
 import { expect } from '@esm-bundle/chai';
 import StyleDictionary from 'style-dictionary';
 import { transforms, registerTransforms } from '../../src/index.js';
-import { promises } from 'fs';
-import path from 'path';
+import { promises } from 'node:fs';
+import path from 'node:path';
 import { cleanup } from './utils.js';
 
 const outputDir = 'test/integration/tokens/';

test/integration/exclude-parent-keys.test.ts

@@ -1,6 +1,6 @@
 import { expect } from '@esm-bundle/chai';
-import { promises } from 'fs';
-import path from 'path';
+import { promises } from 'node:fs';
+import path from 'node:path';
 import { cleanup, init } from './utils.js';
 
 const outputDir = 'test/integration/tokens/';

test/integration/expand-composition.test.ts

@@ -1,7 +1,7 @@
 import type StyleDictionary from 'style-dictionary';
 import { expect } from '@esm-bundle/chai';
-import { promises } from 'fs';
-import path from 'path';
+import { promises } from 'node:fs';
+import path from 'node:path';
 import { cleanup, init } from './utils.js';
 
 const outputDir = 'test/integration/tokens/';

test/integration/math-in-complex-values.test.ts

@@ -1,7 +1,7 @@
 import type StyleDictionary from 'style-dictionary';
 import { expect } from '@esm-bundle/chai';
-import { promises } from 'fs';
-import path from 'path';
+import { promises } from 'node:fs';
+import path from 'node:path';
 import { cleanup, init } from './utils.js';
 
 const outputDir = 'test/integration/tokens/';

test/integration/object-value-references.test.ts

@@ -1,7 +1,7 @@
 import type StyleDictionary from 'style-dictionary';
 import { expect } from '@esm-bundle/chai';
-import { promises } from 'fs';
-import path from 'path';
+import { promises } from 'node:fs';
+import path from 'node:path';
 import { cleanup, init } from './utils.js';
 
 const outputDir = 'test/integration/tokens/';

test/integration/output-references.test.ts

@@ -1,7 +1,7 @@
 import type StyleDictionary from 'style-dictionary';
 import { expect } from '@esm-bundle/chai';
-import { promises } from 'fs';
-import path from 'path';
+import { promises } from 'node:fs';
+import path from 'node:path';
 import { cleanup, init } from './utils.js';
 
 const outputDir = 'test/integration/tokens/';

test/integration/sd-transforms.test.ts

@@ -1,7 +1,7 @@
 import type StyleDictionary from 'style-dictionary';
 import { expect } from '@esm-bundle/chai';
-import { promises } from 'fs';
-import path from 'path';
+import { promises } from 'node:fs';
+import path from 'node:path';
 import { cleanup, init } from './utils.js';
 
 const outputDir = 'test/integration/tokens/';

test/integration/swift-UI-color.test.ts

@@ -1,8 +1,8 @@
 import StyleDictionary from 'style-dictionary';
 import { expect } from '@esm-bundle/chai';
 import Color from 'tinycolor2';
-import { promises } from 'fs';
-import path from 'path';
+import { promises } from 'node:fs';
+import path from 'node:path';
 import { cleanup, init } from './utils.js';
 
 const outputDir = 'test/integration/tokens/';

test/integration/tokens/color-modifier-references.tokens.json

@@ -0,0 +1,37 @@
+{
+  "alpha": {
+    "value": 0.3,
+    "type": "other"
+  },
+  "color": {
+    "value": "#FFFFFF",
+    "type": "color",
+    "$extensions": {
+      "studio.tokens": {
+        "modify": {
+          "type": "alpha",
+          "value": "{alpha}",
+          "space": "srgb",
+          "format": "hex"
+        }
+      }
+    }
+  },
+  "modifier": {
+    "value": {
+      "type": "alpha",
+      "value": "{alpha}",
+      "space": "srgb",
+      "format": "hex"
+    }
+  },
+  "color2": {
+    "value": "#000000",
+    "type": "color",
+    "$extensions": {
+      "studio.tokens": {
+        "modify": "{modifier}"
+      }
+    }
+  }
+}

test/spec/color-modifiers/transformColorModifiers.spec.ts

@@ -310,4 +310,24 @@ describe('transform color modifiers', () => {
 
     expect(transformColorModifiers(token)).to.equal('rgb(50% 0% 25% / 0.5)');
   });
+
+  // https://github.com/amzn/style-dictionary/blob/v4/docs/transforms.md#defer-transitive-transformation-manually
+  it('should return undefined if the transformation needs to be deferred', () => {
+    const token = {
+      value: '#C14242',
+      type: 'color',
+      $extensions: {
+        'studio.tokens': {
+          modify: {
+            type: 'darken',
+            value: '{darkenAmount}',
+            space: 'srgb',
+            format: 'srgb',
+          },
+        },
+      },
+    };
+
+    expect(transformColorModifiers(token)).to.be.undefined;
+  });
 });