add tests (#1040)

.eslintrc.cjs

@@ -35,6 +35,7 @@ module.exports = {
   },
   // rules which apply to JS, TS, etc.
   rules: {
+    'import/no-nodejs-modules': 0,
     'filenames/match-regex': 0,
     'eslint-comments/no-unused-disable': 0,
     'react/prop-types': 0,

.github/workflows/build_config.yml

@@ -0,0 +1,33 @@
+name: Testing custom transforms, formats, etc. for Style Dictionary
+
+on:
+  pull_request:
+    branches-ignore:
+      - 'changeset-release/**'
+  workflow_dispatch:
+
+jobs:
+  changes:
+    uses: ./.github/workflows/hasChanged.yml
+
+  build:
+    needs: changes
+    if: needs.changes.outputs.buildConfig == 'true' || github.event_name == 'workflow_dispatch'
+    name: Test if custom transforms, formats, etc. are working
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm i --no-audit --no-fund --ignore-scripts
+
+      - name: Run test
+        run: |
+          npm run test:integration

.github/workflows/hasChanged.yml

@@ -12,6 +12,9 @@ on:
       src:
         description: "Boolean value indicating change in src folder"
         value: ${{ jobs.hasChanged.outputs.src }}
+      buildConfig:
+        description: "Boolean value indicating changes of the build configuration in src folder"
+        value: ${{ jobs.hasChanged.outputs.buildConfig }}
       scripts:
         description: "Boolean value indicating change in scripts folder"
         value: ${{ jobs.hasChanged.outputs.scripts }}
@@ -35,6 +38,7 @@ jobs:
       outputAffected: ${{ steps.filter.outputs.outputAffected }}
       tokens: ${{ steps.filter.outputs.tokens }}
       src: ${{ steps.filter.outputs.src }}
+      buildConfig: ${{ steps.filter.outputs.buildConfig }}
       scripts: ${{ steps.filter.outputs.scripts }}
       buildScripts: ${{ steps.filter.outputs.buildScripts }}
       dependencies: ${{ steps.filter.outputs.dependencies }}
@@ -53,6 +57,8 @@ jobs:
             - 'src/**/**.ts'
             - 'src/**/**.json'
             - 'src/**/**.json5'
+          buildConfig:
+            - 'src/**/**.ts'
           scripts:
             - 'scripts/**'
           buildScripts:

.gitignore

@@ -7,3 +7,4 @@ coverage/
 docs/public/
 color-contrast-check.json
 blob-report
+integration/build

integration/build.test.ts

@@ -0,0 +1,62 @@
+import {PrimerStyleDictionary} from '../src/PrimerStyleDictionary'
+import fs from 'fs'
+
+describe('PrimerStyleDictionary', () => {
+  const basePath = `./integration`
+  const extendedSD = PrimerStyleDictionary.extend({
+    source: [`${basePath}/tokens/**/*.json5`],
+    platforms: {
+      css: {
+        prefix: 'PREFIX',
+        transformGroup: 'css',
+        buildPath: `${basePath}/build/css/`,
+        files: [
+          {
+            options: {
+              showFileHeader: false,
+            },
+            destination: 'variables.css',
+            format: 'css/variables',
+          },
+        ],
+      },
+      advancedCss: {
+        prefix: 'PREFIX',
+        transformGroup: 'css',
+        buildPath: `${basePath}/build/css/`,
+        files: [
+          {
+            options: {
+              showFileHeader: false,
+            },
+            destination: 'advanced.css',
+            format: 'css/advanced',
+          },
+        ],
+      },
+    },
+  })
+
+  extendedSD.cleanAllPlatforms()
+  extendedSD.buildAllPlatforms()
+
+  it('it should transform with css/variables format', () => {
+    const output = fs.readFileSync(`${basePath}/build/css/variables.css`, 'utf8')
+    const expectedOutput = `:root {
+  --prefix-base-color-blue-500: #2C29FF; /* The primary color for interactive elements. */
+  --prefix-fg-color-link: #2C29FF;
+}
+`
+    expect(output).toBe(expectedOutput)
+  })
+
+  it('it should transform with css/advanced format', () => {
+    const output = fs.readFileSync(`${basePath}/build/css/advanced.css`, 'utf8')
+    const expectedOutput = `:root {
+  --prefix-base-color-blue-500: #2c29ff; /* The primary color for interactive elements. */
+  --prefix-fg-color-link: #2c29ff;
+}
+`
+    expect(output).toBe(expectedOutput)
+  })
+})

integration/tokens/base.json5

@@ -0,0 +1,13 @@
+{
+  base: {
+    color: {
+      blue: {
+        "500": {
+          "$value": '#2C29FF',
+          "$type": 'color',
+          "$description": 'The primary color for interactive elements.',
+        },
+      }
+    }
+  }
+}

integration/tokens/functional.json5

@@ -0,0 +1,8 @@
+{
+  fgColor: {
+    link: {
+      $value: '{base.color.blue.500}',
+      $type: 'color',
+    }
+  }
+}

integrationbuild/css/variables.css

@@ -0,0 +1,4 @@
+:root {
+  --prefix-base-color-blue-500: #2c29ff; /* The primary color for interactive elements. */
+  --prefix-fg-color-link: #2c29ff;
+}

package.json

@@ -40,7 +40,8 @@
     "prepack": "npm run build",
     "release": "changeset publish",
     "start:storybook": "npm run build && cd docs/storybook && npm run storybook",
-    "test": "vitest run --coverage"
+    "test": "vitest run --coverage",
+    "test:integration": "vitest run -r integration"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {

src/formats/cssAdvanced.test.ts

@@ -224,7 +224,7 @@ describe('Format: tokens nested in media query', () => {
   /**
    * Test cases for formatting tokens with simple css variables
    */
-  it('Shows comment if option.description is true', () => {
+  it('Shows comment if option.formatting.commentStyle is long or not set', () => {
     const input = getMockFormatterArguments({
       dictionary: getMockDictionary({
         tokens: {
@@ -238,7 +238,9 @@ describe('Format: tokens nested in media query', () => {
         },
       }),
       options: {
-        descriptions: true,
+        formatting: {
+          commentStyle: 'long',
+        },
       },
       file: {
         destination: 'size-fine.css',
@@ -253,19 +255,7 @@ describe('Format: tokens nested in media query', () => {
       },
     })
 
-    const expectedOutput = syncPrettier.format(
-      ` @media (prefers-color-scheme: light){
-        :root {
-          --red: transformedValue; /* This is a description */
-        }
-      }`,
-      {parser: 'css', printWidth: 500},
-    )
-    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
-  })
-
-  it('Hides comment if option.description is false or not set', () => {
-    const input = getMockFormatterArguments({
+    const inputUnset = getMockFormatterArguments({
       dictionary: getMockDictionary({
         tokens: {
           subgroup: {
@@ -277,23 +267,34 @@ describe('Format: tokens nested in media query', () => {
           },
         },
       }),
-      options: {
-        descriptions: false,
-      },
+      options: {}, // description not set
       file: {
         destination: 'size-fine.css',
         options: {
           showFileHeader: false,
           queries: [
             {
-              query: '@media (prefers-color-scheme: dark)',
+              query: '@media (prefers-color-scheme: light)',
             },
           ],
         },
       },
     })
 
-    const inputUnset = getMockFormatterArguments({
+    const expectedOutput = syncPrettier.format(
+      ` @media (prefers-color-scheme: light){
+        :root {
+          --red: transformedValue; /* This is a description */
+        }
+      }`,
+      {parser: 'css', printWidth: 500},
+    )
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(inputUnset)).toStrictEqual(expectedOutput)
+  })
+
+  it('Hides comment if option.formatting.commentStle is set to none', () => {
+    const input = getMockFormatterArguments({
       dictionary: getMockDictionary({
         tokens: {
           subgroup: {
@@ -305,7 +306,11 @@ describe('Format: tokens nested in media query', () => {
           },
         },
       }),
-      options: {}, // description not set
+      options: {
+        formatting: {
+          commentStyle: 'none',
+        },
+      },
       file: {
         destination: 'size-fine.css',
         options: {
@@ -328,6 +333,5 @@ describe('Format: tokens nested in media query', () => {
       {parser: 'css', printWidth: 500},
     )
     expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
-    expect(cssAdvanced(inputUnset)).toStrictEqual(expectedOutput)
   })
 })

src/formats/cssAdvanced.ts

@@ -18,10 +18,9 @@ export const cssAdvanced: StyleDictionary.Formatter = ({
     queries: [],
   },
   file,
-  platform,
 }: FormatterArguments): string => {
   // get options
-  const {outputReferences, descriptions} = options
+  const {outputReferences, formatting} = options
   // selector
   const selector = file.options?.selector !== undefined ? file.options.selector : ':root'
   // query extension property
@@ -34,22 +33,12 @@ export const cssAdvanced: StyleDictionary.Formatter = ({
     },
   ]
   // set formatting
-  const formatting: LineFormatting = {
-    commentStyle: descriptions ? 'long' : 'none',
+  const mergedFormatting: LineFormatting = {
+    commentStyle: 'long',
+    ...formatting,
   }
   // clone dictionary
   const dictionary = {...originalDictionary}
-  // add prefix to tokens
-  if (platform.prefix) {
-    dictionary.allTokens = dictionary.allTokens.map(
-      token =>
-        ({
-          ...token,
-          name: `${platform.prefix}-${token.name}`,
-          path: [platform.prefix, ...token.path],
-        }) as TransformedToken,
-    )
-  }
   // get queries from tokens
   for (const designToken of dictionary.allTokens) {
     const query = designToken.$extensions?.[queryExtProp]
@@ -88,7 +77,12 @@ export const cssAdvanced: StyleDictionary.Formatter = ({
     // early abort if no matches
     if (!filteredDictionary.allTokens.length) continue
     // add tokens into root
-    const css = formattedVariables({format: 'css', dictionary: filteredDictionary, outputReferences, formatting})
+    const css = formattedVariables({
+      format: 'css',
+      dictionary: filteredDictionary,
+      outputReferences,
+      formatting: mergedFormatting,
+    })
     // wrap css
     const cssWithSelector = wrapWithSelector(css, query.selector !== undefined ? query.selector : selector)
     // add css with or without query

src/formats/jsonNestedPrefixed.test.ts

@@ -61,7 +61,8 @@ describe('Format: Json nested with prefixes', () => {
                "filePath": "file.json",
                "isSource": true,
                "value": "transformedValue",
-               "attributes": {}
+               "attributes": {},
+               "description": "This is a description"
             }
           }
         }

src/test-utilities/getMockDictionary.ts

@@ -6,6 +6,8 @@ const mockDictionaryDefault = {
     subgroup: {
       red: getMockToken({
         name: 'red',
+        description: 'This is a description',
+        value: 'transformedValue',
         path: ['tokens', 'subgroup', 'red'],
       }),
     },

tsconfig.json

@@ -18,6 +18,6 @@
       "~/*": ["*"]
     }
   },
-  "include": ["src/", "scripts/", "docs/", "config/", "playwright.config.ts", "e2e", "vitest.config.ts"],
+  "include": ["src/", "scripts/", "docs/", "config/", "playwright.config.ts", "e2e", "integration", "vitest.config.ts"],
   "exclude": ["./src/@types"]
 }

vitest.config.ts

@@ -3,11 +3,12 @@ import {defineConfig, configDefaults} from 'vitest/config'
 export default defineConfig({
   test: {
     globals: true,
-    exclude: [...configDefaults.exclude, 'e2e/*', 'docs/*'],
+    exclude: [...configDefaults.exclude, 'e2e/*', 'integration/*', 'docs/*'],
     coverage: {
       exclude: [
         'docs/*',
         'e2e/*',
+        'integration/*',
         '.eslintrc.cjs',
         'vitest.config.ts',
         '.prettierrc.js',