@payfit/unity-themes 2.24.2 → 2.25.1

package/src/scripts/formats/unity-theme.test.ts

@@ -9,145 +9,152 @@ import { describe, expect, it } from 'vitest'
 
 import { unityThemeFormat } from './unity-theme.js'
 
-const transformedTokens = [
-  {
-    name: 'color-primary',
-    $value: '#000000',
-    $type: 'color',
-    path: ['color', 'primary'],
-    original: { $value: '#000000' },
-    filePath: '',
-    isSource: false,
-  },
-  {
-    name: 'color-secondary',
-    $value: '#555555',
-    $type: 'color',
-    path: ['color', 'secondary'],
-    original: { $value: '{color.gray}' },
-    filePath: '',
-    isSource: false,
-  },
-  {
-    name: 'color-gray',
-    $value: '#555555',
-    $type: 'color',
-    path: ['color', 'gray'],
-    original: { $value: '#555555' },
-  },
-  {
-    name: 'spacing-1',
-    $value: '0.25rem',
-    $type: 'spacing',
-    path: ['spacing', '1'],
-    original: { $value: '0.25rem' },
-    filePath: '',
-    isSource: false,
-  },
-  {
-    name: 'spacing-2',
-    $value: '0.25rem',
-    $type: 'spacing',
-    path: ['spacing', '2'],
-    original: { $value: '{spacing.1}' },
-    filePath: '',
-    isSource: false,
-  },
-  {
-    name: 'grid-12-column-columns--default',
-    $value: '12',
-    $type: 'number',
-    path: ['grid', '12-column', 'columns'],
-    original: { $value: '12' },
-    filePath: '',
-    isSource: false,
-  },
-  {
-    name: 'grid-12-column-gutter--default',
-    $value: '1rem',
-    $type: 'dimension',
-    path: ['grid', '12-column', 'gutter'],
-    original: { $value: '1rem' },
-  },
-  {
-    name: 'grid-12-column-margin--default',
-    $value: '0.25rem',
-    $type: 'dimension',
-    path: ['grid', '12-column', 'margin'],
-    original: { $value: '{spacing.1}' },
-  },
-  {
-    name: 'breakpoint-tablet',
-    $value: '768px',
-    $type: 'breakpoint',
-    path: ['breakpoint', 'tablet'],
-    original: { $value: '768px' },
-  },
-  {
-    name: 'breakpoint-desktop',
-    $value: '1024px',
-    $type: 'breakpoint',
-    path: ['breakpoint', 'desktop'],
-    original: { $value: '1024px' },
-  },
-  {
-    name: 'typography-default-h1',
-    $value: 'normal 700 32px/1.104 Inter, sans-serif ',
-    $type: 'typography',
-    path: ['typography', 'h1', 'default'],
-    attributes: {
-      type: 'h1',
-      category: 'typography',
-      item: 'default',
+/**
+ * Creates mock tokens. When prefix is set, token names include the prefix
+ * (matching the behavior of the updated name transforms).
+ */
+function createTransformedTokens(prefix?: string) {
+  const p = prefix ? `${prefix}-` : ''
+  return [
+    {
+      name: `${p}color-primary`,
+      $value: '#000000',
+      $type: 'color',
+      path: ['color', 'primary'],
+      original: { $value: '#000000' },
+      filePath: '',
+      isSource: false,
     },
-    original: {
-      $value: {
-        fontFamily: 'Inter, sans-serif',
-        fontSize: '32px',
-        fontWeight: 700,
-        lineHeight: 1.104,
-      },
+    {
+      name: `${p}color-secondary`,
+      $value: '#555555',
+      $type: 'color',
+      path: ['color', 'secondary'],
+      original: { $value: '{color.gray}' },
+      filePath: '',
+      isSource: false,
     },
-  },
-  {
-    name: 'typography-sm-h1',
-    $value: 'normal 700 36px/1.104 Inter, sans-serif ',
-    $type: 'typography',
-    path: ['typography', 'h1', 'sm'],
-    attributes: {
-      type: 'h1',
-      category: 'typography',
-      item: 'sm',
+    {
+      name: `${p}color-gray`,
+      $value: '#555555',
+      $type: 'color',
+      path: ['color', 'gray'],
+      original: { $value: '#555555' },
     },
-    original: {
-      $value: {
-        fontFamily: 'Inter, sans-serif',
-        fontSize: '36px',
-        fontWeight: 700,
-        lineHeight: 1.104,
+    {
+      name: `${p}spacing-1`,
+      $value: '0.25rem',
+      $type: 'spacing',
+      path: ['spacing', '1'],
+      original: { $value: '0.25rem' },
+      filePath: '',
+      isSource: false,
+    },
+    {
+      name: `${p}spacing-2`,
+      $value: '0.25rem',
+      $type: 'spacing',
+      path: ['spacing', '2'],
+      original: { $value: '{spacing.1}' },
+      filePath: '',
+      isSource: false,
+    },
+    {
+      name: `${p}grid-12-column-columns--default`,
+      $value: '12',
+      $type: 'number',
+      path: ['grid', '12-column', 'columns'],
+      original: { $value: '12' },
+      filePath: '',
+      isSource: false,
+    },
+    {
+      name: `${p}grid-12-column-gutter--default`,
+      $value: '1rem',
+      $type: 'dimension',
+      path: ['grid', '12-column', 'gutter'],
+      original: { $value: '1rem' },
+    },
+    {
+      name: `${p}grid-12-column-margin--default`,
+      $value: '0.25rem',
+      $type: 'dimension',
+      path: ['grid', '12-column', 'margin'],
+      original: { $value: '{spacing.1}' },
+    },
+    {
+      name: `${p}breakpoint-tablet`,
+      $value: '768px',
+      $type: 'breakpoint',
+      path: ['breakpoint', 'tablet'],
+      original: { $value: '768px' },
+    },
+    {
+      name: `${p}breakpoint-desktop`,
+      $value: '1024px',
+      $type: 'breakpoint',
+      path: ['breakpoint', 'desktop'],
+      original: { $value: '1024px' },
+    },
+    {
+      name: `${p}typography-default-h1`,
+      $value: 'normal 700 32px/1.104 Inter, sans-serif ',
+      $type: 'typography',
+      path: ['typography', 'h1', 'default'],
+      attributes: {
+        type: 'h1',
+        category: 'typography',
+        item: 'default',
+      },
+      original: {
+        $value: {
+          fontFamily: 'Inter, sans-serif',
+          fontSize: '32px',
+          fontWeight: 700,
+          lineHeight: 1.104,
+        },
       },
     },
-  },
-  {
-    name: 'typography-md-h2',
-    $value: 'normal 600 24px/1.2 Inter, sans-serif ',
-    $type: 'typography',
-    path: ['typography', 'h2', 'md'],
-    attributes: {
-      type: 'h2',
-      category: 'typography',
-      item: 'md',
+    {
+      name: `${p}typography-sm-h1`,
+      $value: 'normal 700 36px/1.104 Inter, sans-serif ',
+      $type: 'typography',
+      path: ['typography', 'h1', 'sm'],
+      attributes: {
+        type: 'h1',
+        category: 'typography',
+        item: 'sm',
+      },
+      original: {
+        $value: {
+          fontFamily: 'Inter, sans-serif',
+          fontSize: '36px',
+          fontWeight: 700,
+          lineHeight: 1.104,
+        },
+      },
     },
-    original: {
-      $value: {
-        fontFamily: 'Inter, sans-serif',
-        fontSize: '24px',
-        fontWeight: 600,
-        lineHeight: 1.2,
+    {
+      name: `${p}typography-md-h2`,
+      $value: 'normal 600 24px/1.2 Inter, sans-serif ',
+      $type: 'typography',
+      path: ['typography', 'h2', 'md'],
+      attributes: {
+        type: 'h2',
+        category: 'typography',
+        item: 'md',
+      },
+      original: {
+        $value: {
+          fontFamily: 'Inter, sans-serif',
+          fontSize: '24px',
+          fontWeight: 600,
+          lineHeight: 1.2,
+        },
       },
     },
-  },
-] as unknown as TransformedToken[]
+  ] as unknown as TransformedToken[]
+}
 
 const tokenDef = {
   color: {
@@ -198,22 +205,19 @@ const tokenDef = {
   },
 } as unknown as TransformedTokens
 
-const createMockFormatFnArguments = (
-  prefix?: string,
-  outputReferences = false,
-): FormatFnArguments =>
+const createMockFormatFnArguments = (prefix?: string): FormatFnArguments =>
   ({
     dictionary: {
       tokens: tokenDef,
       unfilteredTokens: tokenDef,
-      allTokens: transformedTokens,
+      allTokens: createTransformedTokens(prefix),
       tokenMap: new Map(),
     } as unknown as Dictionary,
     platform: {},
     options: {
       prefix,
-      selector: '@theme static',
-      outputReferences,
+      selector: '@theme',
+      outputReferences: true,
       usesDtcg: true,
       fileHeader: '/* theme header */',
     },
@@ -222,7 +226,7 @@ const createMockFormatFnArguments = (
       options: {
         prefix,
         selector: '@theme',
-        outputReferences,
+        outputReferences: true,
         usesDtcg: true,
         fileHeader: '/* theme header */',
       },
@@ -230,41 +234,26 @@ const createMockFormatFnArguments = (
   }) as unknown as FormatFnArguments
 
 describe('css/unity-theme Format', () => {
-  it('should output theme configuration without references (outputReferences = false)', async () => {
-    const args = createMockFormatFnArguments(undefined, false)
+  it('should output @theme with var() references when no prefix is set', async () => {
+    const args = createMockFormatFnArguments(undefined)
     const result = await unityThemeFormat(args)
 
     expect(result).toMatchInlineSnapshot(`
-      "/**
-       * Do not edit directly, this file was auto-generated.
-       */
-
-      @import "@fontsource/inter";
-      @import "@fontsource/inter/500.css";
-      @import "@fontsource/inter/600.css";
-      @import "@fontsource/inter/700.css";
-      @import "@fontsource/source-serif-4";
-      @import "@fontsource/source-serif-4/500.css";
-      @import "@fontsource/source-serif-4/600.css";
-      @import "@fontsource/source-serif-4/700.css";
-      @import "@fontsource/roboto-mono";
-      @import "tailwindcss";
-
-      @theme static {
+      "@theme {
         --color-*: initial;
-        --color-primary: #000000;
-        --color-secondary: #555555;
-        --color-gray: #555555;
-        --spacing-1: 0.25rem;
-        --spacing-2: 0.25rem;
-        --grid-12-column-columns--default: 12;
-        --grid-12-column-gutter--default: 1rem;
-        --grid-12-column-margin--default: 0.25rem;
+        --color-primary: var(--color-primary);
+        --color-secondary: var(--color-secondary);
+        --color-gray: var(--color-gray);
+        --spacing-1: var(--spacing-1);
+        --spacing-2: var(--spacing-2);
+        --grid-12-column-columns--default: var(--grid-12-column-columns--default);
+        --grid-12-column-gutter--default: var(--grid-12-column-gutter--default);
+        --grid-12-column-margin--default: var(--grid-12-column-margin--default);
         --breakpoint-tablet: 768px;
         --breakpoint-desktop: 1024px;
-        --typography-default-h1: normal 700 32px/1.104 Inter, sans-serif;
-        --typography-sm-h1: normal 700 36px/1.104 Inter, sans-serif;
-        --typography-md-h2: normal 600 24px/1.2 Inter, sans-serif;
+        --typography-default-h1: var(--typography-default-h1);
+        --typography-sm-h1: var(--typography-sm-h1);
+        --typography-md-h2: var(--typography-md-h2);
       }
 
       @utility grid-12-column {
@@ -287,97 +276,26 @@ describe('css/unity-theme Format', () => {
     `)
   })
 
-  it.skip('should output theme configuration with references (outputReferences = true)', async () => {
-    const args = createMockFormatFnArguments(undefined, true)
-    const result = await unityThemeFormat(args)
-
-    expect(result).toMatchInlineSnapshot(`
-      "/**
-       * Do not edit directly, this file was auto-generated.
-       */
-
-      @import "@fontsource/inter";
-      @import "@fontsource/inter/500.css";
-      @import "@fontsource/inter/600.css";
-      @import "@fontsource/inter/700.css";
-      @import "@fontsource/source-serif-4";
-      @import "@fontsource/source-serif-4/500.css";
-      @import "@fontsource/source-serif-4/600.css";
-      @import "@fontsource/source-serif-4/700.css";
-      @import "tailwindcss";
-
-      @theme {
-        --color-*: initial;
-        --color-primary: #000000;
-        --color-gray: #555555;
-        --color-secondary: var(--uy-color-gray);
-        --spacing-1: 0.25rem;
-        --spacing-2: var(--uy-spacing-1);
-        --grid-12-column-columns--default: 12;
-        --grid-12-column-gutter--default: 1rem;
-        --grid-12-column-margin--default: var(--uy-spacing-1);
-        --breakpoint-tablet: 768px;
-        --breakpoint-desktop: 1024px;
-        --typography-h1: normal 700 32px/1.104 Inter, sans-serif;
-      }
-
-      @layer components {
-        .layout-grid-12-column {
-          display: grid;
-          grid-template-columns: repeat(var(--grid-12-column-columns), 1fr);
-          grid-gap: var(--grid-12-column-gutter);
-          margin: 0 var(--grid-12-column-margin);
-        }
-      }
-
-      @utility typography-* {
-        font: var(--value-default);
-        @media screen and (min-width: 490px) {
-          font: var(--value-sm, var(--value-default));
-        }
-        @media screen and (min-width: 768px) {
-          font: var(--value-md, var(--value-sm));
-        }
-      }
-      "
-    `)
-  })
-
-  it('should output theme configuration with prefix (prefix: any string)', async () => {
-    const args = createMockFormatFnArguments('uy', false)
+  it('should strip prefix from @theme declarations but keep it in var() references', async () => {
+    const args = createMockFormatFnArguments('uy')
     const result = await unityThemeFormat(args)
 
     expect(result).toMatchInlineSnapshot(`
-      "/**
-       * Do not edit directly, this file was auto-generated.
-       */
-
-      @import "@fontsource/inter";
-      @import "@fontsource/inter/500.css";
-      @import "@fontsource/inter/600.css";
-      @import "@fontsource/inter/700.css";
-      @import "@fontsource/source-serif-4";
-      @import "@fontsource/source-serif-4/500.css";
-      @import "@fontsource/source-serif-4/600.css";
-      @import "@fontsource/source-serif-4/700.css";
-      @import "@fontsource/roboto-mono";
-      @import "tailwindcss" prefix(uy);
-
-      @theme static {
+      "@theme {
         --color-*: initial;
-        --color-primary: #000000;
-        --color-secondary: #555555;
-        --color-gray: #555555;
-        --spacing-1: 0.25rem;
-        --spacing-2: 0.25rem;
-        --grid-12-column-columns--default: 12;
-        --grid-12-column-gutter--default: 1rem;
-        --grid-12-column-margin--default: 0.25rem;
+        --color-primary: var(--uy-color-primary);
+        --color-secondary: var(--uy-color-secondary);
+        --color-gray: var(--uy-color-gray);
+        --spacing-1: var(--uy-spacing-1);
+        --spacing-2: var(--uy-spacing-2);
+        --grid-12-column-columns--default: var(--uy-grid-12-column-columns--default);
+        --grid-12-column-gutter--default: var(--uy-grid-12-column-gutter--default);
+        --grid-12-column-margin--default: var(--uy-grid-12-column-margin--default);
         --breakpoint-tablet: 768px;
         --breakpoint-desktop: 1024px;
-        --typography-default-h1: normal 700 32px/1.104 Inter, sans-serif;
-        --typography-sm-h1: normal 700 36px/1.104 Inter, sans-serif;
-        --typography-md-h2: normal 600 24px/1.2 Inter, sans-serif;
+        --typography-default-h1: var(--uy-typography-default-h1);
+        --typography-sm-h1: var(--uy-typography-sm-h1);
+        --typography-md-h2: var(--uy-typography-md-h2);
       }
 
       @utility grid-12-column {
@@ -399,4 +317,13 @@ describe('css/unity-theme Format', () => {
       "
     `)
   })
+
+  it('should output breakpoint values as static (not var references)', async () => {
+    const args = createMockFormatFnArguments('uy')
+    const result = await unityThemeFormat(args)
+
+    expect(result).toContain('--breakpoint-tablet: 768px;')
+    expect(result).toContain('--breakpoint-desktop: 1024px;')
+    expect(result).not.toContain('var(--uy-breakpoint-')
+  })
 })

package/src/scripts/formats/unity-theme.ts

@@ -1,12 +1,10 @@
 import type { FormatFnArguments } from 'style-dictionary/types'
 
 import prettier from 'prettier'
-import StyleDictionary from 'style-dictionary'
 
-import { generateThemeHeader } from './generators/header-generator.js'
 import { processGridTokens } from './processors/grid-processor.js'
 import { processTypographyTokens } from './processors/typography-processor.js'
-import { getPrefixes, processCssVariables } from './utils.js'
+import { getPrefixes } from './utils.js'
 
 export const name = 'css/unity-theme'
 
@@ -14,73 +12,38 @@ export async function unityThemeFormat(args: FormatFnArguments) {
   const { dictionary, options } = args
   const { variablePrefix } = getPrefixes(options)
 
-  const header = await generateThemeHeader(args)
+  // Build @theme block directly from the dictionary.
+  // Every variable becomes a var(--uy-*) reference so the CSS cascade
+  // controls which value is active at runtime.
+  // Exception: breakpoint variables must be static pixel values because
+  // Tailwind resolves them at build time to generate @media rules.
+  const themeLines: string[] = ['--color-*: initial;']
+
+  for (const token of dictionary.allTokens) {
+    // Strip the prefix from the declaration name (Tailwind adds it)
+    const unprefixedName = token.name.replace(
+      new RegExp(`^${variablePrefix}`),
+      '',
+    )
+
+    if (
+      unprefixedName.startsWith('breakpoint-') ||
+      unprefixedName.startsWith('container-')
+    ) {
+      themeLines.push(`  --${unprefixedName}: ${token.$value};`)
+    } else {
+      themeLines.push(`  --${unprefixedName}: var(--${token.name});`)
+    }
+  }
 
-  // Get the raw CSS variable declarations without prefix for @theme block
-  const rawCssVars = (await StyleDictionary.hooks.formats['css/variables']?.({
-    ...args,
-    file: {
-      ...args.file,
-      options: { ...args.file.options, showFileHeader: false },
-    },
-    options: {
-      ...options,
-      prefix: '',
-    },
-  })) as string
+  const themeBlock = `@theme {\n${themeLines.join('\n')}\n}`
 
-  // Process the CSS variables to add prefix to var() references
-  const processedCssVars = processCssVariables(
-    rawCssVars,
-    variablePrefix,
-  ).replace('@theme static {', '@theme static {\n--color-*: initial;')
   const gridClasses = processGridTokens(dictionary, options)
   const typographyClasses = processTypographyTokens(dictionary, options)
 
-  /*
-  Important annotations
-
-  When using prefix with `@import "tailwindcss" prefix(prefix);`, take into account:
-
-  1.  variable declarations inside @theme must not have the prefix
-  ```css
-  @theme {
-    // wrong! duplicated prefix
-    --uy-color-primary: #000;
-  }
-  ```
-
-  2. When compiled by tailwind v4, the variables WILL HAVE the prefix
-  ```css
-  @theme {
-    --color-primary: #000;
-  }
-
-  // generates:
-  :root {
-    --uy-color-primary: #000;
-  }
-
-  3. Therefore, if we want `outputReferences` to work, the variable name referred to inside `var()` MUST have the prefix.
-
-  ```css
-  @theme {
-    --color-gray-1000: #000;
-    --color-primary: var(--color-gray-1000); // ⚠️Achtung! won't work because tailwind does not process variables inside var()
-    --color-primary: var(--uy-color-gray-1000); // ✅ works!
-  }
-
-  // generates:
-  :root {
-    --uy-color-gray-1000: #000;
-    --uy-color-primary: var(--uy-color-gray-1000);
-  }
-  ```
-  **/
   return prettier.format(
-    `${header}
-
-    ${processedCssVars}
+    `
+    ${themeBlock}
 
     ${gridClasses}
 

package/src/scripts/transforms/tailwind-color-token.test.ts

@@ -282,5 +282,23 @@ describe('tailwind color token transform', () => {
 
       expect(result).toBe('color-primary')
     })
+
+    it('should prepend prefix when config.prefix is set', () => {
+      const token = createMockToken(['color', 'primary', 'default'])
+      const config = { ...createMockConfig(), prefix: 'uy' }
+
+      const result = transform(token, config, {})
+
+      expect(result).toBe('uy-color-primary')
+    })
+
+    it('should not prepend prefix when config.prefix is undefined', () => {
+      const token = createMockToken(['color', 'blue', '500'])
+      const config = createMockConfig()
+
+      const result = transform(token, config, {})
+
+      expect(result).toBe('color-blue-500')
+    })
   })
 })

package/src/scripts/transforms/tailwind-color-token.ts

@@ -1,13 +1,17 @@
 import type { Token } from 'style-dictionary'
-import type { Config, NameTransform } from 'style-dictionary/types'
+import type { NameTransform } from 'style-dictionary/types'
+
+import { prefixTransform } from '../utils/prefix-transform'
 
 type Transformer = NameTransform['transform']
 
-export function filter(token: Token, options: Config): boolean {
+export function filter(token: Token): boolean {
   return token.path[0] === 'color'
 }
 
-export const transform: Transformer = (token, config) => {
+export const tailwindColorTokenNameTransform: Transformer = token => {
   const ignoreDefault = (nameToken: string) => !nameToken.includes('default')
   return [...token.path.filter(ignoreDefault)].join('-').toLowerCase()
 }
+
+export const transform = prefixTransform(tailwindColorTokenNameTransform)

package/src/scripts/transforms/tailwind-grid-token.test.ts

@@ -88,5 +88,27 @@ describe('tailwind-grid-token', () => {
 
       expect(result).toBe('grid-layout-columns--default')
     })
+
+    it('should prepend prefix when config.prefix is set', () => {
+      const token: TransformedToken = {
+        name: 'grid-layout-default-columns',
+        path: ['grid', 'layout', 'default', 'columns'],
+        original: { $value: 6 },
+        attributes: {
+          category: 'grid',
+          type: 'layout',
+          item: 'default',
+          subitem: 'columns',
+        },
+        $value: 6,
+        $type: 'number',
+        filePath: 'test.json',
+        isSource: true,
+      }
+
+      const result = transform(token, { prefix: 'uy' }, {})
+
+      expect(result).toBe('uy-grid-layout-columns--default')
+    })
   })
 })