1.0.3 relase

Author: rofrischmann

.eslintrc

@@ -25,6 +25,7 @@
     "no-plusplus": [ 0 ],
     "no-continue": [ 0 ],
     "no-restricted-syntax": [ 0 ],
+    "no-prototype-builtins": [ 0 ],
     "consistent-return": [ 0 ],
     "guard-for-in": [ 0 ]
   }

Changelog.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### 1.0.3
+* performance improvements
+
 ### 1.0.2
 * added `resolveArrayValue` and `assignStyle`
 

README.md

@@ -19,11 +19,11 @@ By now I have authored and collaborated on many different libraries and found I
 ## Utilities
 * [`camelCaseProperty(property)`](#camelcasepropertyproperty)
 * [`cssifyDeclaration(property, value)`](#cssifydeclarationproperty-value)
-* [`cssifyObject(object)`](#cssifyobjectproperty)
+* [`cssifyObject(object)`](#cssifyobjectobject)
 * [`hyphenateProperty(property)`](#hyphenatepropertyproperty)
 * [`isPrefixedProperty(property)`](#isprefixedpropertyproperty)
 * [`isPrefixedValue(value)`](#isprefixedvaluevalue)
-* [`isUnitlessProperty(property)`](#isunitlessproperty)
+* [`isUnitlessProperty(property)`](#isunitlesspropertyproperty)
 * [`normalizeProperty(property)`](#normalizepropertyproperty)
 * [`resolveArrayValue(property, value)`](#resolvearrayvalueproperty-value)
 * [`unprefixProperty(property)`](#unprefixpropertyproperty)
@@ -127,7 +127,6 @@ isPrefixedValue('-webkit-calc(100% - 50px)')
 
 ### `isUnitlessProperty(property)`
 Checks if a `property` accepts unitless values.
-> Directly mirrors [unitless-css-property](https://github.com/rofrischmann/unitless-css-property).
 
 ```javascript
 import { isUnitlessProperty } from 'css-in-js-utils'
@@ -137,6 +136,7 @@ isUnitlessProperty('width')
 
 isUnitlessProperty('flexGrow')
 isUnitlessProperty('lineHeight')
+isUnitlessProperty('line-height')
 // => true
 ```
 

modules/__tests__/isUnitlessProperty-test.js

@@ -0,0 +1,37 @@
+import isUnitlessProperty from '../isUnitlessProperty'
+
+describe('Checking for unitless CSS properties', () => {
+  it('should return true for unitless properties', () => {
+    expect(isUnitlessProperty('fontWeight')).toEqual(true)
+    expect(isUnitlessProperty('flex')).toEqual(true)
+    expect(isUnitlessProperty('gridColumn')).toEqual(true)
+  })
+
+  it('should return true for hypenated unitless properties', () => {
+    expect(isUnitlessProperty('font-weight')).toEqual(true)
+    expect(isUnitlessProperty('grid-column')).toEqual(true)
+  })
+
+  it('should return true for prefixed unitless properties', () => {
+    expect(isUnitlessProperty('WebkitFlex')).toEqual(true)
+    expect(isUnitlessProperty('msFlex')).toEqual(true)
+    expect(isUnitlessProperty('WebkitColumnCount')).toEqual(true)
+    expect(isUnitlessProperty('msColumnCount')).toEqual(true)
+  })
+
+  it('should return true for hypenated prefixed unitless properties', () => {
+    expect(isUnitlessProperty('-webkit-flex')).toEqual(true)
+    expect(isUnitlessProperty('-ms-flex')).toEqual(true)
+    expect(isUnitlessProperty('-webkit-column-count')).toEqual(true)
+    expect(isUnitlessProperty('-ms-column-count')).toEqual(true)
+  })
+
+  it('should equal false for other properties', () => {
+    expect(isUnitlessProperty('fontSize')).toEqual(false)
+    expect(isUnitlessProperty('font-size')).toEqual(false)
+    expect(isUnitlessProperty('-webkit-border-radius')).toEqual(false)
+    expect(isUnitlessProperty('-ms-border-radius')).toEqual(false)
+    expect(isUnitlessProperty('WebkitBorderRadius')).toEqual(false)
+    expect(isUnitlessProperty('msBorderRadius')).toEqual(false)
+  })
+})

modules/assignStyle.js

@@ -1,5 +1,5 @@
 /* @flow */
-export default function assignStyle(base, ...extendingStyles) {
+export default function assignStyle(base: Object, ...extendingStyles: Array<Object>) {
   for (let i = 0, len = extendingStyles.length; i < len; ++i) {
     const style = extendingStyles[i]
 

modules/isUnitlessProperty.js

@@ -1,7 +1,7 @@
 /* @flow */
 import hyphenateProperty from './hyphenateProperty'
 
-const unitlessProperties = {
+const unitlessProperties: Object = {
   borderImageOutset: true,
   borderImageSlice: true,
   borderImageWidth: true,
@@ -13,7 +13,6 @@ const unitlessProperties = {
   widows: true,
   zIndex: true,
   zoom: true,
-
   // SVG-related properties
   fillOpacity: true,
   floodOpacity: true,
@@ -25,8 +24,8 @@ const unitlessProperties = {
   strokeWidth: true
 }
 
-const prefixedUnitlessProperties = [
-'animationIterationCount',
+const prefixedUnitlessProperties: Array<string> = [
+  'animationIterationCount',
   'boxFlex',
   'boxFlexGroup',
   'boxOrdinalGroup',
@@ -43,25 +42,25 @@ const prefixedUnitlessProperties = [
   'lineClamp'
 ]
 
-const prefixes = ['Webkit', 'ms', 'Moz', 'O']
+const prefixes: Array<string> = ['Webkit', 'ms', 'Moz', 'O']
 
-function getPrefixedProperty(prefix, property) {
+function getPrefixedProperty(prefix: string, property: string): string {
   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) {
+  const property = prefixedUnitlessProperties[i]
   unitlessProperties[property] = true
 
-  for (let j = 0, jLen = prefixes.length; j < jLen; ++i) {
-    unitlessProperties[getPrefixedProperty(prefix, property)] = true
+  for (let j = 0, jLen = prefixes.length; j < jLen; ++j) {
+    unitlessProperties[getPrefixedProperty(prefixes[j], property)] = true
   }
 }
 
-
 // add all hypenated properties as well
 for (const property in unitlessProperties) {
-  unitlessProperties[hyphenateStyleName(property)] = true
+  unitlessProperties[hyphenateProperty(property)] = true
 }
 
 export default function isUnitlessProperty(property: string): boolean {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-in-js-utils",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Useful utility functions for CSS in JS solutions",
   "main": "lib/index.js",
   "files": [