Don't kebabCase property names

Because it breaks stuff sadly, like any vendor prefixed properties that
start with `-`.

__tests__/defineClass.test.js

@@ -17,7 +17,7 @@ it('does not modify the case of selector names', () => {
   expect(c(output.toString())).toEqual(`.inlineBlock { display: inline-block }`)
 })
 
-it('converts property names to kebab-case', () => {
-  let output = defineClass('bg-1', {backgroundColor: '#bada55'})
-  expect(c(output.toString())).toEqual(`.bg-1 { background-color: #bada55 }`)
+it('does not modify the case of property names', () => {
+  let output = defineClass('smooth', {'-webkit-font-smoothing': 'antialiased'})
+  expect(c(output.toString())).toEqual(`.smooth { -webkit-font-smoothing: antialiased }`)
 })

src/generators/backgroundColors.js

@@ -5,7 +5,7 @@ import normalizeColorList from '../util/normalizeColorList'
 export default function ({ colors, backgroundColors }) {
   return _.map(normalizeColorList(backgroundColors, colors), (color, className) => {
     return defineClass(`bg-${className}`, {
-      backgroundColor: color,
+      'background-color': color,
     })
   })
 }

src/generators/backgroundSize.js

@@ -3,10 +3,10 @@ import defineClasses from '../util/defineClasses'
 export default function() {
   return defineClasses({
     'bg-cover': {
-      backgroundSize: 'cover',
+      'background-size': 'cover',
     },
     'bg-contain': {
-      backgroundSize: 'contain',
+      'background-size': 'contain',
     },
   })
 }

src/generators/borderColors.js

@@ -7,7 +7,7 @@ export default function ({ colors, borders }) {
 
   return _.map(borderColors, (color, className) => {
     return defineClass(`border-${className}`, {
-      borderColor: color,
+      'border-color': color,
     })
   })
 }

src/generators/borderWidths.js

@@ -6,19 +6,19 @@ import findColor from '../util/findColor'
 function defaultBorder(width, color) {
   return defineClasses({
     'border': {
-      border: `${width} solid ${color}`,
+      'border': `${width} solid ${color}`,
     },
     'border-t': {
-      borderTop: `${width} solid ${color}`,
+      'border-top': `${width} solid ${color}`,
     },
     'border-r': {
-      borderRight: `${width} solid ${color}`,
+      'border-right': `${width} solid ${color}`,
     },
     'border-b': {
-      borderBottom: `${width} solid ${color}`,
+      'border-bottom': `${width} solid ${color}`,
     },
     'border-l': {
-      borderLeft: `${width} solid ${color}`,
+      'border-left': `${width} solid ${color}`,
     },
   })
 }
@@ -26,19 +26,19 @@ function defaultBorder(width, color) {
 function sizedBorder(size, width, color) {
   return defineClasses({
     [`border-${size}`]: {
-      border: `${width} solid ${color}`,
+      'border': `${width} solid ${color}`,
     },
     [`border-t-${size}`]: {
-      borderTop: `${width} solid ${color}`,
+      'border-top': `${width} solid ${color}`,
     },
     [`border-r-${size}`]: {
-      borderRight: `${width} solid ${color}`,
+      'border-right': `${width} solid ${color}`,
     },
     [`border-b-${size}`]: {
-      borderBottom: `${width} solid ${color}`,
+      'border-bottom': `${width} solid ${color}`,
     },
     [`border-l-${size}`]: {
-      borderLeft: `${width} solid ${color}`,
+      'border-left': `${width} solid ${color}`,
     },
   })
 }

src/generators/constrain.js

@@ -4,7 +4,7 @@ import defineClass from '../util/defineClass'
 export default function ({ constrain }) {
   return _.map(constrain, (size, className) => {
     return defineClass(`constrain-${className}`, {
-      maxWidth: size,
+      'max-width': size,
     })
   })
 }

src/generators/flex.js

@@ -5,82 +5,82 @@ import defineClasses from '../util/defineClasses'
 export default function() {
   return defineClasses({
     'flex': {
-      display: 'flex',
+      'display': 'flex',
     },
     'inline-flex': {
-      display: 'inline-flex',
+      'display': 'inline-flex',
     },
     'flex-row': {
-      flexDirection: 'row',
+      'flex-direction': 'row',
     },
     'flex-row-reverse': {
-      flexDirection: 'row-reverse',
+      'flex-direction': 'row-reverse',
     },
     'flex-col': {
-      flexDirection: 'column',
+      'flex-direction': 'column',
     },
     'flex-col-reverse': {
-      flexDirection: 'column-reverse',
+      'flex-direction': 'column-reverse',
     },
     'flex-wrap': {
-      flexWrap: 'wrap',
+      'flex-wrap': 'wrap',
     },
     'flex-wrap-reverse': {
-      flexWrap: 'wrap-reverse',
+      'flex-wrap': 'wrap-reverse',
     },
     'flex-nowrap': {
-      flexWrap: 'nowrap',
+      'flex-wrap': 'nowrap',
     },
     'items-start': {
-      alignItems: 'flex-start',
+      'align-items': 'flex-start',
     },
     'items-end': {
-      alignItems: 'flex-end',
+      'align-items': 'flex-end',
     },
     'items-center': {
-      alignItems: 'center',
+      'align-items': 'center',
     },
     'items-baseline': {
-      alignItems: 'baseline',
+      'align-items': 'baseline',
     },
     'items-stretch': {
-      alignItems: 'stretch',
+      'align-items': 'stretch',
     },
     'justify-start': {
-      justifyContent: 'flex-start',
+      'justify-content': 'flex-start',
     },
     'justify-end': {
-      justifyContent: 'flex-end',
+      'justify-content': 'flex-end',
     },
     'justify-center': {
-      justifyContent: 'center',
+      'justify-content': 'center',
     },
     'justify-between': {
-      justifyContent: 'space-between',
+      'justify-content': 'space-between',
     },
     'justify-around': {
-      justifyContent: 'space-around',
+      'justify-content': 'space-around',
     },
     'flex-auto': {
-      flex: 'auto',
+      'flex': 'auto',
     },
     'flex-initial': {
-      flex: 'initial',
+      'flex': 'initial',
     },
     'flex-none': {
-      flex: 'none',
+      'flex': 'none',
     },
     'flex-grow': {
-      flexGrow: '1',
+      'flex-grow': '1',
     },
     'flex-shrink': {
-      flexShrink: '1',
+      'flex-shrink': '1',
     },
     'flex-no-grow': {
-      flexGrow: '0',
+      'flex-grow': '0',
     },
     'flex-no-shrink': {
-      flexShrink: '0',
+      'flex-shrink': '0',
     },
   })
 }

src/generators/shadows.js

@@ -4,7 +4,7 @@ import defineClass from '../util/defineClass'
 export default function({shadows}) {
   return _.map(shadows, (shadow, className) => {
     return defineClass(`shadow-${className}`, {
-      boxShadow: shadow,
+      'box-shadow': shadow,
     })
   })
 }

src/util/defineClass.js

@@ -4,7 +4,7 @@ import postcss from 'postcss'
 export default function(className, properties) {
   const decls = _.map(properties, (value, property) => {
     return postcss.decl({
-      prop: _.kebabCase(property),
+      prop: `${property}`,
       value: `${value}`,
     })
   })