fix(color-mode): fix camelCase properties

Author: gregberge

packages/core/src/colorModes.js

@@ -44,7 +44,7 @@ function hasColorModes(theme) {
 export function createColorStyles(theme, { targetSelector = 'body' } = {}) {
   if (!hasColorModes(theme)) return null
   const { modes, ...colors } = theme.colors
-  const styles = toCustomPropertiesDeclarations(
+  let styles = toCustomPropertiesDeclarations(
     colors,
     XSTYLED_COLORS_PREFIX,
     theme,
@@ -64,17 +64,17 @@ export function createColorStyles(theme, { targetSelector = 'body' } = {}) {
     SYSTEM_MODES.forEach(mode => {
       if (modes[mode]) {
         const mediaQuery = getMediaQuery(getColorModeQuery(mode))
-        styles[mediaQuery] = getModePropertiesDeclarations(mode)
+        styles += `${mediaQuery}{${getModePropertiesDeclarations(mode)}}`
       }
     })
   }
 
   Object.keys(modes).forEach(mode => {
     const key = `&.${getColorModeClassName(mode)}`
-    styles[key] = getModePropertiesDeclarations(mode)
+    styles += `${key}{${getModePropertiesDeclarations(mode)}}`
   })
 
-  return { [targetSelector]: styles }
+  return `${targetSelector}{${styles}}`
 }
 
 function hasCustomPropertiesEnabled(theme) {

packages/core/src/colorModes.test.js

@@ -80,29 +80,9 @@ describe('#createColorStyles', () => {
         },
       },
     }
-    expect(createColorStyles(theme)).toEqual({
-      body: {
-        '--xstyled-colors-black': '#000',
-        '--xstyled-colors-white': '#fff',
-        '--xstyled-colors-red': '#ff0000',
-        '--xstyled-colors-danger': '#ff0000',
-        '--xstyled-colors-text': '#000',
-        '@media (prefers-color-scheme: dark)': {
-          '--xstyled-colors-black': '#000',
-          '--xstyled-colors-white': '#fff',
-          '--xstyled-colors-red': '#ff4400',
-          '--xstyled-colors-danger': '#ff4400',
-          '--xstyled-colors-text': '#fff',
-        },
-        '&.xstyled-color-mode-dark': {
-          '--xstyled-colors-black': '#000',
-          '--xstyled-colors-white': '#fff',
-          '--xstyled-colors-red': '#ff4400',
-          '--xstyled-colors-danger': '#ff4400',
-          '--xstyled-colors-text': '#fff',
-        },
-      },
-    })
+    expect(createColorStyles(theme)).toBe(
+      `body{--xstyled-colors-black: #000;--xstyled-colors-white: #fff;--xstyled-colors-red: #ff0000;--xstyled-colors-danger: #ff0000;--xstyled-colors-text: #000;@media (prefers-color-scheme: dark){--xstyled-colors-black: #000;--xstyled-colors-white: #fff;--xstyled-colors-red: #ff4400;--xstyled-colors-danger: #ff4400;--xstyled-colors-text: #fff;}&.xstyled-color-mode-dark{--xstyled-colors-black: #000;--xstyled-colors-white: #fff;--xstyled-colors-red: #ff4400;--xstyled-colors-danger: #ff4400;--xstyled-colors-text: #fff;}}`,
+    )
   })
 })
 

packages/core/src/customProperties.js

@@ -36,7 +36,7 @@ export function toCustomPropertiesDeclarations(
   object,
   parent,
   theme = object,
-  state = {},
+  state = { value: '' },
 ) {
   for (const key in object) {
     const value = object[key]
@@ -46,14 +46,14 @@ export function toCustomPropertiesDeclarations(
       continue
     }
     if (string(value)) {
-      state[toVarName(name)] = value
+      state.value += `${toVarName(name)}: ${value};`
       continue
     }
     if (func(value)) {
-      state[toVarName(name)] = value({ theme })
+      state.value += `${toVarName(name)}: ${value({ theme })};`
       continue
     }
   }
 
-  return state
+  return state.value
 }

packages/core/src/customProperties.test.js

@@ -38,6 +38,18 @@ describe('#toCustomPropertiesReferences', () => {
     })
   })
 
+  it('handles camel case', () => {
+    expect(
+      toCustomPropertiesReferences({
+        colors: { fooBar: 'x' },
+      }),
+    ).toEqual({
+      colors: {
+        fooBar: 'var(--colors-fooBar, x)',
+      },
+    })
+  })
+
   it('supports prefix', () => {
     expect(
       toCustomPropertiesReferences(
@@ -54,32 +66,29 @@ describe('#toCustomPropertiesReferences', () => {
 
 describe('#toCustomPropertiesDeclarations', () => {
   it('only transforms string', () => {
-    expect(toCustomPropertiesDeclarations({ foo: 'bar' })).toEqual({
-      '--foo': 'bar',
-    })
-    expect(toCustomPropertiesDeclarations({ foo: 2 })).toEqual({})
-    expect(toCustomPropertiesDeclarations({ foo: null })).toEqual({})
-    expect(toCustomPropertiesDeclarations({ foo: false })).toEqual({})
-    expect(toCustomPropertiesDeclarations({ foo: undefined })).toEqual({})
+    expect(toCustomPropertiesDeclarations({ foo: 'bar' })).toBe('--foo: bar;')
+    expect(toCustomPropertiesDeclarations({ foo: 2 })).toBe('')
+    expect(toCustomPropertiesDeclarations({ foo: null })).toBe('')
+    expect(toCustomPropertiesDeclarations({ foo: false })).toBe('')
+    expect(toCustomPropertiesDeclarations({ foo: undefined })).toBe('')
+  })
+
+  it('handles camel case', () => {
+    expect(toCustomPropertiesDeclarations({ fooBar: 'x' })).toBe('--fooBar: x;')
   })
 
   it('supports nesting', () => {
     expect(
       toCustomPropertiesDeclarations({ colors: { primary: 'blue' } }),
-    ).toEqual({
-      '--colors-primary': 'blue',
-    })
+    ).toBe('--colors-primary: blue;')
   })
 
   it('supports xstyled func references', () => {
     expect(
       toCustomPropertiesDeclarations({
         colors: { blue: '#0000FF', primary: th.color('blue') },
       }),
-    ).toEqual({
-      '--colors-blue': '#0000FF',
-      '--colors-primary': '#0000FF',
-    })
+    ).toBe('--colors-blue: #0000FF;--colors-primary: #0000FF;')
   })
 
   it('supports prefix', () => {
@@ -90,8 +99,6 @@ describe('#toCustomPropertiesDeclarations', () => {
         },
         'xstyled',
       ),
-    ).toEqual({
-      '--xstyled-foo': 'bar',
-    })
+    ).toBe('--xstyled-foo: bar;')
   })
 })