feat(cssvar): allow a default value for cssVar

Allow the user to pass a default value to cssVar for when a variable is not found.

src/helpers/cssVar.js

@@ -4,9 +4,7 @@ import PolishedError from '../internalHelpers/_errors'
 const cssVariableRegex = /--[\S]*/g
 
 /**
- * Fetches the value of a passed CSS Variable.
- *
- * Passthrough can be enabled (off by default) for when you are unsure of the input and want non-variable values to be returned instead of an error.
+ * Fetches the value of a passed CSS Variable in the :root scope, or otherwise returns a defaultValue if provided.
  *
  * @example
  * // Styles as object usage
@@ -27,10 +25,9 @@ const cssVariableRegex = /--[\S]*/g
  */
 export default function cssVar(
   cssVariable: string,
-  passThrough?: boolean,
+  defaultValue?: string | number,
 ): string | number {
   if (!cssVariable || !cssVariable.match(cssVariableRegex)) {
-    if (passThrough) return cssVariable
     throw new PolishedError(73)
   }
 
@@ -47,7 +44,9 @@ export default function cssVar(
 
   if (variableValue) {
     return variableValue.trim()
-  } else {
-    throw new PolishedError(74)
+  } else if (defaultValue) {
+    return defaultValue
   }
+
+  throw new PolishedError(74)
 }

src/helpers/test/cssVar.test.js

@@ -10,32 +10,44 @@ beforeAll(() => {
   document.documentElement.style.setProperty('--our-background-color', 'red') // eslint-disable-line no-undef
   // $FlowFixMe
   document.documentElement.style.setProperty('--our-Background-Color', 'orange') // eslint-disable-line no-undef
+  // $FlowFixMe
+  document.documentElement.style.setProperty('--our-complex-value', '12px 12px') // eslint-disable-line no-undef
 })
 
 describe('cssVar', () => {
   test('gets a css variable', () => {
     expect(cssVar('--background')).toEqual('#FFF')
   })
+
   test('gets a hyphenated css variable', () => {
     expect(cssVar('--foreground-color')).toEqual('#000')
   })
+
   test('gets a complex hyphenated css variable', () => {
     expect(cssVar('--our-background-color')).toEqual('red')
   })
+
   test('respects casing', () => {
     expect(cssVar('--our-Background-Color')).toEqual('orange')
   })
-  test('errors when variable is not found', () => {
+
+  test('respects complex values', () => {
+    expect(cssVar('--our-complex-value')).toEqual('12px 12px')
+  })
+
+  test("returns default when variable isn't found.", () => {
+    expect(cssVar('--unfound-variable', 'orange')).toEqual('orange')
+  })
+
+  test('errors when variable is not found and no default is provided', () => {
     expect(() => {
       cssVar('--unfound-variable')
-    }).toThrow('CSS variable not found.')
+    }).toThrow('CSS variable not found and no default was provided.')
   })
+
   test('errors when variable is not formatted correctly', () => {
     expect(() => {
       cssVar('-bad-formatted-variable')
     }).toThrow('Please provide a valid CSS variable.')
   })
-  test('passes value through when passthrough mode is enabled', () => {
-    expect(cssVar('#FFF', true)).toEqual('#FFF')
-  })
 })

src/internalHelpers/errors.md

@@ -297,7 +297,7 @@ Please provide a valid CSS variable.
 
 ## 74
 
-CSS variable not found.
+CSS variable not found and no default was provided.
 
 ## 75