Merge pull request #85 from kristerkari/bugfix/dont-use-camel-case-for-css-custom-properties

Allow CSS custom properties to be used without converting to camel case

Author: kristerkari

src/__tests__/index.js

@@ -47,6 +47,10 @@ it('allows undefined values', () => {
   })
 })
 
+it('allows CSS custom properties to pass through', () => {
+  expect(transformCss([['--my-prop', '0%']])).toEqual({ '--my-prop': '0%' })
+})
+
 it('allows percent in unspecialized transform', () => {
   expect(transformCss([['top', '0%']])).toEqual({ top: '0%' })
 })

src/index.js

@@ -59,7 +59,13 @@ export const getStylesForProperty = (propName, inputValue, allowShorthand) => {
     : { [propName]: propValue }
 }
 
-export const getPropertyName = camelizeStyleName
+export const getPropertyName = propName => {
+  const isCustomProp = /^--\w+/.test(propName)
+  if (isCustomProp) {
+    return propName
+  }
+  return camelizeStyleName(propName)
+}
 
 export default (rules, shorthandBlacklist = []) =>
   rules.reduce((accum, rule) => {