Replacing css/themed and css/Variables formatter with css/advanced (#931

) * replacing themed * replace cssVariables formatter
primer · Apr 25, 2024 · 518fbfc · 518fbfc
1 parent 0e7641a
commit 518fbfc
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 160 deletions.
diff --git a/.changeset/popular-dryers-end.md b/.changeset/popular-dryers-end.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+Replacing css/themed and css/variables with css/advanced
diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts
@@ -30,12 +30,10 @@ import {
   javascriptEsm,
   typescriptExportDefinition,
   jsonNestedPrefixed,
-  cssThemed,
   cssCustomMedia,
   jsonOneDimensional,
   jsonPostCssFallback,
-  cssMediaQuery,
-  cssVariables,
+  cssAdvanced,
   jsonFigma,
 } from './formats'
 
@@ -50,25 +48,15 @@ StyleDictionary.registerParser(w3cJsonParser)
  *
  */
 StyleDictionary.registerFormat({
-  name: 'css/themed',
-  formatter: cssThemed,
+  name: 'css/advanced',
+  formatter: cssAdvanced,
 })
 
 StyleDictionary.registerFormat({
   name: 'css/customMedia',
   formatter: cssCustomMedia,
 })
 
-StyleDictionary.registerFormat({
-  name: 'css/mediaQuery',
-  formatter: cssMediaQuery,
-})
-
-StyleDictionary.registerFormat({
-  name: 'css/variables',
-  formatter: cssVariables,
-})
-
 StyleDictionary.registerFormat({
   name: 'javascript/esm',
   formatter: javascriptEsm,

diff --git a/src/formats/cssMediaQuery.test.ts → src/formats/cssAdvanced.test.ts b/src/formats/cssMediaQuery.test.ts → src/formats/cssAdvanced.test.ts
@@ -1,4 +1,4 @@
-import {cssMediaQuery} from './cssMediaQuery'
+import {cssAdvanced} from './cssAdvanced'
 import {getMockDictionary, getMockFormatterArguments, getMockToken} from '../test-utilities'
 import {format} from 'prettier'
 import type {TransformedToken} from 'style-dictionary'
@@ -12,7 +12,7 @@ describe('Format: tokens nested in media query', () => {
       }`,
       {parser: 'css', printWidth: 500},
     )
-    expect(cssMediaQuery(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
   })
 
   it('Wrap all tokens in screen media query', () => {
@@ -37,7 +37,7 @@ describe('Format: tokens nested in media query', () => {
       }`,
       {parser: 'css', printWidth: 500},
     )
-    expect(cssMediaQuery(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
   })
 
   it('Ignore if no matching media query is found', () => {
@@ -55,7 +55,7 @@ describe('Format: tokens nested in media query', () => {
         },
       },
     })
-    expect(cssMediaQuery(input)).toStrictEqual('')
+    expect(cssAdvanced(input)).toStrictEqual('')
   })
 
   it('Wraps in defined media query if files match', () => {
@@ -91,7 +91,7 @@ describe('Format: tokens nested in media query', () => {
       }`,
       {parser: 'css', printWidth: 500},
     )
-    expect(cssMediaQuery(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
   })
 
   it('Show comment if option.description is true', () => {
@@ -131,7 +131,7 @@ describe('Format: tokens nested in media query', () => {
       }`,
       {parser: 'css', printWidth: 500},
     )
-    expect(cssMediaQuery(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
   })
 
   it('Hides comment if option.description is false or not set', () => {
@@ -197,7 +197,7 @@ describe('Format: tokens nested in media query', () => {
       }`,
       {parser: 'css', printWidth: 500},
     )
-    expect(cssMediaQuery(input)).toStrictEqual(expectedOutput)
-    expect(cssMediaQuery(inputUnset)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(inputUnset)).toStrictEqual(expectedOutput)
   })
 })
diff --git a/src/formats/cssMediaQuery.ts → src/formats/cssAdvanced.ts b/src/formats/cssMediaQuery.ts → src/formats/cssAdvanced.ts
@@ -5,7 +5,14 @@ import {format} from 'prettier'
 import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
 const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
 
-export const cssMediaQuery: StyleDictionary.Formatter = ({
+const wrapWithSelector = (css: string, selector: string | false): string => {
+  // return without selector
+  if (selector === false || selector.trim().length === 0) return css
+  // return with selector
+  return `${selector} { ${css} }`
+}
+
+export const cssAdvanced: StyleDictionary.Formatter = ({
   dictionary: originalDictionary,
   options = {
     queries: [],
@@ -16,7 +23,7 @@ export const cssMediaQuery: StyleDictionary.Formatter = ({
   // get options
   const {outputReferences, descriptions} = options
   // selector
-  const selector = file.options?.selector || ':root'
+  const selector = file.options?.selector !== undefined ? file.options.selector : ':root'
   // query extension property
   const queryExtProp = file.options?.queryExtensionProperty || 'mediaQuery'
   // get queries from file options
@@ -81,14 +88,11 @@ export const cssMediaQuery: StyleDictionary.Formatter = ({
     // early abort if no matches
     if (!filteredDictionary.allTokens.length) continue
     // add tokens into root
-    const rootCss = `${selector} {${formattedVariables({
-      format: 'css',
-      dictionary: filteredDictionary,
-      outputReferences,
-      formatting,
-    })}}`
+    const css = formattedVariables({format: 'css', dictionary: filteredDictionary, outputReferences, formatting})
+    // wrap css
+    const cssWithSelector = wrapWithSelector(css, query.selector !== undefined ? query.selector : selector)
     // add css with or without query
-    output.push(queryString ? `${queryString} { ${rootCss} }` : rootCss)
+    output.push(queryString ? `${queryString} { ${cssWithSelector} }` : cssWithSelector)
   }
   // return prettified
   return format(output.join('\n'), {parser: 'css', printWidth: 500})

diff --git a/src/formats/cssThemed.test.ts b/src/formats/cssThemed.test.ts
@@ -1,4 +1,4 @@
-import {cssThemed} from './cssThemed'
+import {cssAdvanced} from './cssAdvanced'
 import {getMockFormatterArguments} from '../test-utilities'
 import {format} from 'prettier'
 
@@ -14,15 +14,26 @@ describe('Format: Css Themed', () => {
         printWidth: 500,
       },
     )
-    expect(cssThemed(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
   })
 
   it('Formats tokens with custom selectors', () => {
     const input = getMockFormatterArguments({
-      options: {
-        selector: `[data-color-mode="dark"][data-dark-theme="dark"]`,
-        selectorLight: `[data-color-mode="auto"][data-light-theme="dark"]`,
-        selectorDark: `[data-color-mode="auto"][data-dark-theme="dark"]`,
+      file: {
+        destination: 'dark.css',
+        options: {
+          showFileHeader: false,
+          queries: [
+            {
+              selector:
+                '[data-color-mode="dark"][data-dark-theme="dark"], [data-color-mode="auto"][data-light-theme="dark"]',
+            },
+            {
+              query: '@media (prefers-color-scheme: dark)',
+              selector: '[data-color-mode="auto"][data-dark-theme="dark"]',
+            },
+          ],
+        },
       },
     })
     const expectedOutput = format(
@@ -37,13 +48,22 @@ describe('Format: Css Themed', () => {
     }`,
       {parser: 'css', printWidth: 500},
     )
-    expect(cssThemed(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
   })
 
-  it('Formats tokens with only options.selector', () => {
+  it('Formats tokens with only one selector', () => {
     const input = getMockFormatterArguments({
-      options: {
-        selector: `[data-color-mode="dark"]`,
+      file: {
+        destination: 'dark.css',
+        options: {
+          showFileHeader: false,
+          selector: '',
+          queries: [
+            {
+              query: `[data-color-mode="dark"]`,
+            },
+          ],
+        },
       },
     })
     const expectedOutput = format(
@@ -52,36 +72,6 @@ describe('Format: Css Themed', () => {
     }`,
       {parser: 'css', printWidth: 500},
     )
-    expect(cssThemed(input)).toStrictEqual(expectedOutput)
-  })
-
-  it('Formats tokens with only options.selectorLight', () => {
-    const input = getMockFormatterArguments({
-      options: {
-        selectorLight: `[data-color-mode="light"]`,
-      },
-    })
-    const expectedOutput = format(
-      `:root, [data-color-mode="light"]{
-        --red: transformedValue;
-    }`,
-      {parser: 'css', printWidth: 500},
-    )
-    expect(cssThemed(input)).toStrictEqual(expectedOutput)
-  })
-
-  it('Formats tokens with only options.selectorDark', () => {
-    const input = getMockFormatterArguments({
-      options: {
-        selectorLight: `[data-color-mode="dark"]`,
-      },
-    })
-    const expectedOutput = format(
-      `:root, [data-color-mode="dark"]{
-        --red: transformedValue;
-    }`,
-      {parser: 'css', printWidth: 500},
-    )
-    expect(cssThemed(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
   })
 })
diff --git a/src/formats/cssThemed.ts b/src/formats/cssThemed.ts
diff --git a/src/formats/cssVariables.test.ts b/src/formats/cssVariables.test.ts
@@ -1,4 +1,4 @@
-import {cssVariables} from './cssVariables'
+import {cssAdvanced} from './cssAdvanced'
 import {getMockFormatterArguments} from '../test-utilities'
 import {format} from 'prettier'
 
@@ -14,13 +14,17 @@ describe('Format: css/variables', () => {
         printWidth: 500,
       },
     )
-    expect(cssVariables(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
   })
 
   it('Formats tokens with custom selectors', () => {
     const input = getMockFormatterArguments({
-      options: {
-        selector: `[data-color-mode="dark"]`,
+      file: {
+        destination: 'test.css',
+        options: {
+          showFileHeader: false,
+          selector: `[data-color-mode="dark"]`,
+        },
       },
     })
     const expectedOutput = format(
@@ -29,13 +33,17 @@ describe('Format: css/variables', () => {
     }`,
       {parser: 'css', printWidth: 500},
     )
-    expect(cssVariables(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
   })
 
   it('Formats tokens with only options.selector', () => {
     const input = getMockFormatterArguments({
-      options: {
-        selector: `[data-color-mode="dark"]`,
+      file: {
+        destination: 'test.css',
+        options: {
+          showFileHeader: false,
+          selector: `[data-color-mode="dark"]`,
+        },
       },
     })
     const expectedOutput = format(
@@ -44,6 +52,6 @@ describe('Format: css/variables', () => {
     }`,
       {parser: 'css', printWidth: 500},
     )
-    expect(cssVariables(input)).toStrictEqual(expectedOutput)
+    expect(cssAdvanced(input)).toStrictEqual(expectedOutput)
   })
 })
diff --git a/src/formats/cssVariables.ts b/src/formats/cssVariables.ts
diff --git a/src/formats/index.ts b/src/formats/index.ts
@@ -1,7 +1,5 @@
-export {cssThemed} from './cssThemed'
 export {cssCustomMedia} from './cssCustomMedia'
-export {cssMediaQuery} from './cssMediaQuery'
-export {cssVariables} from './cssVariables'
+export {cssAdvanced} from './cssAdvanced'
 export {jsonFigma} from './jsonFigma'
 export {javascriptCommonJs} from './javascriptCommonJs'
 export {javascriptEsm} from './javascriptEsm'