@payfit/unity-themes 2.55.22 → 2.56.0

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

@@ -1,329 +0,0 @@
-import type {
-  Dictionary,
-  FormatFnArguments,
-  TransformedToken,
-  TransformedTokens,
-} from 'style-dictionary/types'
-
-import { describe, expect, it } from 'vitest'
-
-import { unityThemeFormat } from './unity-theme.js'
-
-/**
- * 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,
-    },
-    {
-      name: `${p}color-secondary`,
-      $value: '#555555',
-      $type: 'color',
-      path: ['color', 'secondary'],
-      original: { $value: '{color.gray}' },
-      filePath: '',
-      isSource: false,
-    },
-    {
-      name: `${p}color-gray`,
-      $value: '#555555',
-      $type: 'color',
-      path: ['color', 'gray'],
-      original: { $value: '#555555' },
-    },
-    {
-      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: `${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,
-        },
-      },
-    },
-    {
-      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[]
-}
-
-const tokenDef = {
-  color: {
-    primary: { $value: '#000000' },
-    secondary: { $value: '{color.gray}' },
-    gray: { $value: '#555555' },
-  },
-  spacing: {
-    '1': { $value: '0.25rem' },
-    '2': { $value: '{spacing.1}' },
-  },
-  grid: {
-    '12-column': {
-      columns: { $value: 12 },
-      gutter: { $value: '1rem' },
-      margin: { $value: '{spacing.1}' },
-    },
-  },
-  typography: {
-    h1: {
-      default: {
-        fontFamily: 'Inter, sans-serif',
-        fontSize: '32px',
-        fontWeight: 700,
-        lineHeight: 1.104,
-      },
-      sm: {
-        fontFamily: 'Inter, sans-serif',
-        fontSize: '36px',
-        fontWeight: 700,
-        lineHeight: 1.104,
-      },
-    },
-    h2: {
-      md: {
-        fontFamily: 'Inter, sans-serif',
-        fontSize: '24px',
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-    },
-  },
-  breakpoint: {
-    sm: { $value: '490px' },
-    md: { $value: '768px' },
-    tablet: { $value: '768px' },
-    desktop: { $value: '1024px' },
-  },
-} as unknown as TransformedTokens
-
-const createMockFormatFnArguments = (prefix?: string): FormatFnArguments =>
-  ({
-    dictionary: {
-      tokens: tokenDef,
-      unfilteredTokens: tokenDef,
-      allTokens: createTransformedTokens(prefix),
-      tokenMap: new Map(),
-    } as unknown as Dictionary,
-    platform: {},
-    options: {
-      prefix,
-      selector: '@theme',
-      outputReferences: true,
-      usesDtcg: true,
-      fileHeader: '/* theme header */',
-    },
-    file: {
-      destination: 'unity.css',
-      options: {
-        prefix,
-        selector: '@theme',
-        outputReferences: true,
-        usesDtcg: true,
-        fileHeader: '/* theme header */',
-      },
-    },
-  }) as unknown as FormatFnArguments
-
-describe('css/unity-theme Format', () => {
-  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(`
-      "@theme {
-        --color-*: initial;
-        --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: var(--typography-default-h1);
-        --typography-sm-h1: var(--typography-sm-h1);
-        --typography-md-h2: var(--typography-md-h2);
-      }
-
-      @utility grid-12-column {
-        display: grid;
-        grid-template-columns: repeat(var(--grid-12-column-columns--default), 1fr);
-        grid-gap: var(--grid-12-column-gutter--default);
-        margin: 0 var(--grid-12-column-margin--default);
-      }
-
-      @utility typography-* {
-        font: --value(--typography-default-*);
-        @media screen and (min-width: 490px) {
-          font: --value(--typography-sm- *);
-        }
-        @media screen and (min-width: 768px) {
-          font: --value(--typography-md- *);
-        }
-      }
-      "
-    `)
-  })
-
-  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(`
-      "@theme {
-        --color-*: initial;
-        --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: 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 {
-        display: grid;
-        grid-template-columns: repeat(var(--uy-grid-12-column-columns--default), 1fr);
-        grid-gap: var(--uy-grid-12-column-gutter--default);
-        margin: 0 var(--uy-grid-12-column-margin--default);
-      }
-
-      @utility typography-* {
-        font: --value(--typography-default-*);
-        @media screen and (min-width: 490px) {
-          font: --value(--typography-sm- *);
-        }
-        @media screen and (min-width: 768px) {
-          font: --value(--typography-md- *);
-        }
-      }
-      "
-    `)
-  })
-
-  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,54 +0,0 @@
-import type { FormatFnArguments } from 'style-dictionary/types'
-
-import prettier from 'prettier'
-
-import { processGridTokens } from './processors/grid-processor.js'
-import { processTypographyTokens } from './processors/typography-processor.js'
-import { getPrefixes } from './utils.js'
-
-export const name = 'css/unity-theme'
-
-export async function unityThemeFormat(args: FormatFnArguments) {
-  const { dictionary, options } = args
-  const { variablePrefix } = getPrefixes(options)
-
-  // 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});`)
-    }
-  }
-
-  const themeBlock = `@theme {\n${themeLines.join('\n')}\n}`
-
-  const gridClasses = processGridTokens(dictionary, options)
-  const typographyClasses = processTypographyTokens(dictionary, options)
-
-  return prettier.format(
-    `
-    ${themeBlock}
-
-    ${gridClasses}
-
-    ${typographyClasses}
-  `,
-    { parser: 'css', printWidth: 120, tabWidth: 2, useTabs: false },
-  )
-}

package/src/scripts/formats/utils.test.ts

@@ -1,264 +0,0 @@
-import type { Config, LocalOptions } from 'style-dictionary/types'
-
-import { describe, expect, it } from 'vitest'
-
-import { getPrefixes, processCssVariables } from './utils.js'
-
-describe('getPrefixes', () => {
-  const createMockOptions = (prefix?: string): Config & LocalOptions => ({
-    prefix,
-    platforms: {},
-    source: [],
-    include: [],
-    exclude: [],
-    files: [],
-    transform: {},
-    transformGroup: {},
-    format: {},
-    action: {},
-    fileHeader: '',
-    log: {},
-  })
-
-  it('should return empty prefixes when no prefix is provided', () => {
-    const options = createMockOptions()
-    const result = getPrefixes(options)
-
-    expect(result).toEqual({
-      classPrefix: '',
-      variablePrefix: '',
-    })
-  })
-
-  it('should return prefixes with backslash escape for class prefix', () => {
-    const options = createMockOptions('uy')
-    const result = getPrefixes(options)
-
-    expect(result).toEqual({
-      classPrefix: 'uy\\:',
-      variablePrefix: 'uy-',
-    })
-  })
-
-  it('should handle different prefix values', () => {
-    const testCases = [
-      {
-        prefix: 'unity',
-        expected: { classPrefix: 'unity\\:', variablePrefix: 'unity-' },
-      },
-      {
-        prefix: 'custom',
-        expected: { classPrefix: 'custom\\:', variablePrefix: 'custom-' },
-      },
-      {
-        prefix: 'test-prefix',
-        expected: {
-          classPrefix: 'test-prefix\\:',
-          variablePrefix: 'test-prefix-',
-        },
-      },
-    ]
-
-    testCases.forEach(({ prefix, expected }) => {
-      const options = createMockOptions(prefix)
-      const result = getPrefixes(options)
-
-      expect(result).toEqual(expected)
-    })
-  })
-
-  it('should handle empty string prefix', () => {
-    const options = createMockOptions('')
-    const result = getPrefixes(options)
-
-    expect(result).toEqual({
-      classPrefix: '',
-      variablePrefix: '',
-    })
-  })
-})
-
-describe('processCssVariables', () => {
-  it('should add prefix to var() references', () => {
-    const rawCssVars = `
-      --color-primary: #000000;
-      --color-secondary: var(--color-gray-500);
-      --spacing-1: 0.25rem;
-      --spacing-2: var(--spacing-1);
-    `
-    const variablePrefix = 'uy-'
-
-    const result = processCssVariables(rawCssVars, variablePrefix)
-
-    expect(result).toMatchInlineSnapshot(`
-      "
-            --color-primary: #000000;
-            --color-secondary: var(--uy-color-gray-500);
-            --spacing-1: 0.25rem;
-            --spacing-2: var(--uy-spacing-1);
-          "
-    `)
-  })
-
-  it('should handle empty variable prefix', () => {
-    const rawCssVars = `
-      --color-primary: var(--color-gray-500);
-      --spacing-1: var(--spacing-base);
-    `
-    const variablePrefix = ''
-
-    const result = processCssVariables(rawCssVars, variablePrefix)
-
-    expect(result).toMatchInlineSnapshot(`
-      "
-            --color-primary: var(--color-gray-500);
-            --spacing-1: var(--spacing-base);
-          "
-    `)
-  })
-
-  it('should handle complex var() references', () => {
-    const rawCssVars = `
-      --color-primary: var(--color-gray-500);
-      --color-secondary: var(--color-primary);
-      --color-tertiary: var(--color-secondary);
-      --spacing-1: var(--spacing-base);
-      --spacing-2: var(--spacing-1);
-      --spacing-3: var(--spacing-2);
-    `
-    const variablePrefix = 'custom-'
-
-    const result = processCssVariables(rawCssVars, variablePrefix)
-
-    expect(result).toMatchInlineSnapshot(`
-      "
-            --color-primary: var(--custom-color-gray-500);
-            --color-secondary: var(--custom-color-primary);
-            --color-tertiary: var(--custom-color-secondary);
-            --spacing-1: var(--custom-spacing-base);
-            --spacing-2: var(--custom-spacing-1);
-            --spacing-3: var(--custom-spacing-2);
-          "
-    `)
-  })
-
-  it('should handle nested var() references', () => {
-    const rawCssVars = `
-      --color-primary: var(--color-gray-500);
-      --color-secondary: var(--color-primary);
-      --color-tertiary: var(--color-secondary);
-    `
-    const variablePrefix = 'nested-'
-
-    const result = processCssVariables(rawCssVars, variablePrefix)
-
-    expect(result).toMatchInlineSnapshot(`
-      "
-            --color-primary: var(--nested-color-gray-500);
-            --color-secondary: var(--nested-color-primary);
-            --color-tertiary: var(--nested-color-secondary);
-          "
-    `)
-  })
-
-  it('should handle CSS without var() references', () => {
-    const rawCssVars = `
-      --color-primary: #000000;
-      --color-secondary: #ffffff;
-      --spacing-1: 0.25rem;
-      --spacing-2: 0.5rem;
-    `
-    const variablePrefix = 'uy-'
-
-    const result = processCssVariables(rawCssVars, variablePrefix)
-
-    expect(result).toMatchInlineSnapshot(`
-      "
-            --color-primary: #000000;
-            --color-secondary: #ffffff;
-            --spacing-1: 0.25rem;
-            --spacing-2: 0.5rem;
-          "
-    `)
-  })
-
-  it('should handle empty CSS string', () => {
-    const rawCssVars = ''
-    const variablePrefix = 'uy-'
-
-    const result = processCssVariables(rawCssVars, variablePrefix)
-
-    expect(result).toBe('')
-  })
-
-  it('should handle CSS with mixed var() and non-var() values', () => {
-    const rawCssVars = `
-      --color-primary: #000000;
-      --color-secondary: var(--color-gray-500);
-      --color-tertiary: #ffffff;
-      --spacing-1: 0.25rem;
-      --spacing-2: var(--spacing-1);
-      --spacing-3: 1rem;
-    `
-    const variablePrefix = 'mixed-'
-
-    const result = processCssVariables(rawCssVars, variablePrefix)
-
-    expect(result).toMatchInlineSnapshot(`
-      "
-            --color-primary: #000000;
-            --color-secondary: var(--mixed-color-gray-500);
-            --color-tertiary: #ffffff;
-            --spacing-1: 0.25rem;
-            --spacing-2: var(--mixed-spacing-1);
-            --spacing-3: 1rem;
-          "
-    `)
-  })
-
-  it('should handle CSS with special characters in variable names', () => {
-    const rawCssVars = `
-      --color-primary: var(--color-gray-500);
-      --color-secondary: var(--color-primary);
-      --spacing-1: var(--spacing-base);
-      --border-radius: var(--radius-small);
-    `
-    const variablePrefix = 'special-'
-
-    const result = processCssVariables(rawCssVars, variablePrefix)
-
-    expect(result).toMatchInlineSnapshot(`
-      "
-            --color-primary: var(--special-color-gray-500);
-            --color-secondary: var(--special-color-primary);
-            --spacing-1: var(--special-spacing-base);
-            --border-radius: var(--special-radius-small);
-          "
-    `)
-  })
-
-  it('should handle CSS with multiple var() references on the same line', () => {
-    const rawCssVars = `
-      --color-primary: var(--color-gray-500);
-      --color-secondary: var(--color-primary);
-      --color-tertiary: var(--color-secondary);
-      --spacing-1: var(--spacing-base);
-      --spacing-2: var(--spacing-1);
-      --spacing-3: var(--spacing-2);
-    `
-    const variablePrefix = 'multi-'
-
-    const result = processCssVariables(rawCssVars, variablePrefix)
-
-    expect(result).toMatchInlineSnapshot(`
-      "
-            --color-primary: var(--multi-color-gray-500);
-            --color-secondary: var(--multi-color-primary);
-            --color-tertiary: var(--multi-color-secondary);
-            --spacing-1: var(--multi-spacing-base);
-            --spacing-2: var(--multi-spacing-1);
-            --spacing-3: var(--multi-spacing-2);
-          "
-    `)
-  })
-})

package/src/scripts/formats/utils.ts

@@ -1,15 +0,0 @@
-import type { Prefixes, ProcessorOptions } from '../types.js'
-
-export function getPrefixes(options: ProcessorOptions): Prefixes {
-  const classPrefix = options.prefix ? `${options.prefix}\\:` : ''
-  const variablePrefix = options.prefix ? `${options.prefix}-` : ''
-
-  return { classPrefix, variablePrefix }
-}
-
-export function processCssVariables(
-  rawCssVars: string,
-  variablePrefix: string,
-): string {
-  return rawCssVars.replace(/var\(--([^)]+)\)/g, `var(--${variablePrefix}$1)`)
-}