embed unitless property

Author: Robin Frischmann

modules/camelCaseProperty.js

@@ -1,4 +1,7 @@
 /* @flow */
+const dashRegex = /-([a-z])/g
+const msRegex = /^Ms/g
+
 export default function camelCaseProperty(property: string): string {
-  return property.replace(/-([a-z])/g, match => match[1].toUpperCase()).replace(/^Ms/g, 'ms')
+  return property.replace(dashRegex, match => match[1].toUpperCase()).replace(msRegex, 'ms')
 }

modules/cssifyObject.js

@@ -5,7 +5,8 @@ export default function cssifyObject(style: Object): string {
   let css: string = ''
 
   for (const property in style) {
-    if (typeof style[property] !== 'string' && typeof style[property] !== 'number') {
+    const value = style[property]
+    if (typeof value !== 'string' && typeof value !== 'number') {
       continue
     }
 
@@ -15,7 +16,7 @@ export default function cssifyObject(style: Object): string {
       css += ';'
     }
 
-    css += cssifyDeclaration(property, style[property])
+    css += cssifyDeclaration(property, value)
   }
 
   return css

modules/isUnitlessProperty.js

@@ -1,6 +1,69 @@
 /* @flow */
-import isUnitlessCSSProperty from 'unitless-css-property'
+import hyphenateProperty from './hyphenateProperty'
+
+const unitlessProperties = {
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  fontWeight: true,
+  lineHeight: true,
+  opacity: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+
+  // SVG-related properties
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true
+}
+
+const prefixedUnitlessProperties = [
+'animationIterationCount',
+  'boxFlex',
+  'boxFlexGroup',
+  'boxOrdinalGroup',
+  'columnCount',
+  'flex',
+  'flexGrow',
+  'flexPositive',
+  'flexShrink',
+  'flexNegative',
+  'flexOrder',
+  'gridRow',
+  'gridColumn',
+  'order',
+  'lineClamp'
+]
+
+const prefixes = ['Webkit', 'ms', 'Moz', 'O']
+
+function getPrefixedProperty(prefix, property) {
+  return prefix + property.charAt(0).toUpperCase() + property.slice(1)
+}
+
+// add all prefixed properties to the unitless properties
+for (let i = 0, len = prefixedUnitlessProperties.length; i < len; ++i) {
+  unitlessProperties[property] = true
+
+  for (let j = 0, jLen = prefixes.length; j < jLen; ++i) {
+    unitlessProperties[getPrefixedProperty(prefix, property)] = true
+  }
+}
+
+
+// add all hypenated properties as well
+for (const property in unitlessProperties) {
+  unitlessProperties[hyphenateStyleName(property)] = true
+}
 
 export default function isUnitlessProperty(property: string): boolean {
-  return isUnitlessCSSProperty(property)
+  return unitlessProperties.hasOwnProperty(property)
 }

modules/unprefixProperty.js

@@ -1,5 +1,7 @@
 /* @flow */
+const prefixRegex = /^(ms|Webkit|Moz|O)/
+
 export default function unprefixProperty(property: string): string {
-  const propertyWithoutPrefix = property.replace(/^(ms|Webkit|Moz|O)/, '')
+  const propertyWithoutPrefix = property.replace(prefixRegex, '')
   return propertyWithoutPrefix.charAt(0).toLowerCase() + propertyWithoutPrefix.slice(1)
 }

modules/unprefixValue.js

@@ -1,7 +1,9 @@
 /* @flow */
+const prefixRegex = /(-ms-|-webkit-|-moz-|-o-)/g
+
 export default function unprefixValue(value: any): any {
   if (typeof value === 'string') {
-    return value.replace(/(-ms-|-webkit-|-moz-|-o-)/g, '')
+    return value.replace(prefixRegex, '')
   }
 
   return value

package.json

@@ -30,8 +30,7 @@
     "rootDir": "modules"
   },
   "dependencies": {
-    "hyphenate-style-name": "^1.0.2",
-    "unitless-css-property": "^1.0.2"
+    "hyphenate-style-name": "^1.0.2"
   },
   "devDependencies": {
     "babel-core": "^6.22.1",