Merge pull request #175 from tkh44/clean-up-css-operations

Clean up css operations
emotion-js · Jul 25, 2017 · 96a53d1 · 96a53d1
2 parents 89cb795 + 1aee08e
commit 96a53d1
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "emotion",
-  "version": "6.0.2",
+  "version": "7.0.0",
   "description": "high performance css-in-js",
   "main": "lib/index.js",
   "files": [

diff --git a/src/glamor/CSSPropertyOperations/CSSProperty.js b/src/glamor/CSSPropertyOperations/CSSProperty.js
@@ -13,47 +13,52 @@
  * CSS properties which accept numbers but are not in units of "px".
  */
 
+import { forEach, keys } from '../../utils'
+
 let isUnitlessNumber = {
-  animationIterationCount: true,
-  borderImageOutset: true,
-  borderImageSlice: true,
-  borderImageWidth: true,
-  boxFlex: true,
-  boxFlexGroup: true,
-  boxOrdinalGroup: true,
-  columnCount: true,
-  flex: true,
-  flexGrow: true,
-  flexPositive: true,
-  flexShrink: true,
-  flexNegative: true,
-  flexOrder: true,
-  gridRow: true,
-  gridRowStart: true,
-  gridRowEnd: true,
-  gridColumn: true,
-  gridColumnStart: true,
-  gridColumnEnd: true,
-  fontWeight: true,
-  lineClamp: true,
-  lineHeight: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  tabSize: true,
-  widows: true,
-  zIndex: true,
-  zoom: true,
+  animationIterationCount: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  fontWeight: 1,
+  lineClamp: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
 
   // SVG-related properties
-  fillOpacity: true,
-  floodOpacity: true,
-  stopOpacity: true,
-  strokeDasharray: true,
-  strokeDashoffset: true,
-  strokeMiterlimit: true,
-  strokeOpacity: true,
-  strokeWidth: true
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
 }
 
 /**
@@ -74,9 +79,9 @@ let prefixes = ['Webkit', 'ms', 'Moz', 'O']
 
 // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
 // infinite loop, because it iterates over the newly added props too.
-Object.keys(isUnitlessNumber).forEach(function (prop) {
-  prefixes.forEach(function (prefix) {
-    isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop]
+keys(isUnitlessNumber).forEach(function (prop) {
+  forEach(prefixes, function (prefix) {
+    isUnitlessNumber[prefixKey(prefix, prop)] = 1
   })
 })
 

diff --git a/src/glamor/CSSPropertyOperations/dangerousStyleValue.js b/src/glamor/CSSPropertyOperations/dangerousStyleValue.js
@@ -11,8 +11,6 @@
 
 import isUnitlessNumber from './CSSProperty'
 
-let styleWarnings = {}
-
 /**
  * Convert a value into the proper css writable value. The style name `name`
  * should be logical (no hyphens), as specified
@@ -23,29 +21,18 @@ let styleWarnings = {}
  * @param {ReactDOMComponent} component
  * @return {string} Normalized style value with dimensions applied.
  */
-function dangerousStyleValue (name, value, component) {
+function dangerousStyleValue (name, value) {
   let isEmpty = value == null || typeof value === 'boolean' || value === ''
   if (isEmpty) {
     return ''
   }
 
   let isNonNumeric = isNaN(value)
-  if (
-    isNonNumeric ||
-    value === 0 ||
-    (isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])
-  ) {
+  if (isNonNumeric || value === 0 || isUnitlessNumber[name] === 1) {
     return '' + value // cast to string
   }
 
   if (typeof value === 'string') {
-    if (component && value !== '0') {
-      let owner = component._currentElement._owner
-      let ownerName = owner ? owner.getName() : null
-      if (ownerName && !styleWarnings[ownerName]) {
-        styleWarnings[ownerName] = {}
-      }
-    }
     value = value.trim()
   }
   return value + 'px'

diff --git a/src/glamor/CSSPropertyOperations/index.js b/src/glamor/CSSPropertyOperations/index.js
@@ -145,7 +145,7 @@ if (process.env.NODE_ENV !== 'production') {
    * @return {?string}
    */
 
-export function createMarkupForStyles (styles, component) {
+export function createMarkupForStyles (styles) {
   let serialized = ''
   for (let styleName in styles) {
     const isCustomProp = styleName.indexOf('--') === 0
@@ -154,15 +154,14 @@ export function createMarkupForStyles (styles, component) {
     }
     let styleValue = styles[styleName]
     if (process.env.NODE_ENV !== 'production' && !isCustomProp) {
-      warnValidStyle(styleName, styleValue, component)
+      warnValidStyle(styleName, styleValue)
     }
     if (styleValue != null) {
       if (isCustomProp) {
         serialized += `${styleName}:${styleValue};`
       } else {
         serialized += processStyleName(styleName) + ':'
-        serialized +=
-          dangerousStyleValue(styleName, styleValue, component) + ';'
+        serialized += dangerousStyleValue(styleName, styleValue) + ';'
       }
     }
   }

diff --git a/src/glamor/clean.js b/src/glamor/clean.js
@@ -1,37 +1,37 @@
+import { keys, forEach } from '../utils'
+
 // Returns true for null, false, undefined and {}
 function isFalsy (value) {
   return (
     value === null ||
     value === undefined ||
     value === false ||
-    (typeof value === 'object' && Object.keys(value).length === 0)
+    (typeof value === 'object' && keys(value).length === 0)
   )
 }
 
 function cleanObject (object) {
   if (isFalsy(object)) return null
   if (typeof object !== 'object') return object
 
-  let acc = {},
-    keys = Object.keys(object),
-    hasFalsy = false
-  for (let i = 0; i < keys.length; i++) {
-    let value = object[keys[i]]
+  let acc = {}
+  let hasFalsy = false
+  forEach(keys(object), (value) => {
     const filteredValue = clean(value)
     if (filteredValue === null || filteredValue !== value) {
       hasFalsy = true
     }
     if (filteredValue !== null) {
-      acc[keys[i]] = filteredValue
+      acc[value] = filteredValue
     }
-  }
-  return Object.keys(acc).length === 0 ? null : hasFalsy ? acc : object
+  })
+  return keys(acc).length === 0 ? null : hasFalsy ? acc : object
 }
 
 function cleanArray (rules) {
   let hasFalsy = false
   const filtered = []
-  rules.forEach(rule => {
+  forEach(rules, rule => {
     const filteredRule = clean(rule)
     if (filteredRule === null || filteredRule !== rule) {
       hasFalsy = true