add test for cssVariables (#927)

src/formats/cssVariables.test.ts

@@ -0,0 +1,49 @@
+import {cssVariables} from './cssVariables'
+import {getMockFormatterArguments} from '../test-utilities'
+import {format} from 'prettier'
+
+describe('Format: css/variables', () => {
+  it('Formats tokens', () => {
+    const input = getMockFormatterArguments()
+    const expectedOutput = format(
+      `:root {
+      --red: transformedValue;
+    }`,
+      {
+        parser: 'css',
+        printWidth: 500,
+      },
+    )
+    expect(cssVariables(input)).toStrictEqual(expectedOutput)
+  })
+
+  it('Formats tokens with custom selectors', () => {
+    const input = getMockFormatterArguments({
+      options: {
+        selector: `[data-color-mode="dark"]`,
+      },
+    })
+    const expectedOutput = format(
+      ` [data-color-mode="dark"] {
+            --red: transformedValue;
+    }`,
+      {parser: 'css', printWidth: 500},
+    )
+    expect(cssVariables(input)).toStrictEqual(expectedOutput)
+  })
+
+  it('Formats tokens with only options.selector', () => {
+    const input = getMockFormatterArguments({
+      options: {
+        selector: `[data-color-mode="dark"]`,
+      },
+    })
+    const expectedOutput = format(
+      `[data-color-mode="dark"]{
+        --red: transformedValue;
+    }`,
+      {parser: 'css', printWidth: 500},
+    )
+    expect(cssVariables(input)).toStrictEqual(expectedOutput)
+  })
+})

src/formats/cssVariables.ts

@@ -4,9 +4,9 @@ import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
 const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
 
 /**
- * @description Converts `StyleDictionary.dictionary.tokens` to css with prefers dark and light section
+ * @description Converts `StyleDictionary.dictionary.tokens` to csssection
  * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
- * @param arguments.options outputReferences `boolean`, selector `string`, selectorLight `string`, selectorDark `string`
+ * @param arguments.options outputReferences `boolean`, selector `string`
  * @returns formatted `string`
  */
 export const cssVariables: StyleDictionary.Formatter = ({dictionary, options = {}, file}: FormatterArguments) => {