pushed some new utils

Author: rofrischmann

.eslintrc

@@ -23,7 +23,9 @@
     "no-mixed-operators": [ 0 ],
     "no-underscore-dangle": [ 0 ],
     "no-plusplus": [ 0 ],
+    "no-continue": [ 0 ],
     "no-restricted-syntax": [ 0 ],
-    "consistent-return": [ 0 ]
+    "consistent-return": [ 0 ],
+    "guard-for-in": [ 0 ]
   }
 }

Changelog.md

@@ -1,4 +1,10 @@
 # Changelog
 
+### 1.0.2
+* added `resolveArrayValue` and `assignStyle`
+
+### 1.0.1
+* added `cssifyDeclaration` and `cssifyObject`
+
 ### 1.0.0
 Initial version

README.md

@@ -18,11 +18,14 @@ 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)
 * [`hyphenateProperty(property)`](#hyphenatepropertyproperty)
 * [`isPrefixedProperty(property)`](#isprefixedpropertyproperty)
 * [`isPrefixedValue(value)`](#isprefixedvaluevalue)
 * [`isUnitlessProperty(property)`](#isunitlessproperty)
 * [`normalizeProperty(property)`](#normalizepropertyproperty)
+* [`resolveArrayValue(property, value)`](#resolvearrayvalueproperty-value)
 * [`unprefixProperty(property)`](#unprefixpropertyproperty)
 * [`unprefixValue(value)`](#unprefixvaluevalue)
 
@@ -34,26 +37,59 @@ Converts the `property` to camelCase.
 ```javascript
 import { camelCaseProperty } from 'css-in-js-utils'
 
-console.log(camelCaseProperty('padding-top'))
+camelCaseProperty('padding-top')
 // => 'paddingTop'
 
-console.log(camelCaseProperty('-webkit-transition'))
+camelCaseProperty('-webkit-transition')
 // => 'WebkitTransition'
 ```
 
 ------
 
+### `cssifyDeclaration(property, value)`
+Generates a CSS declaration (`property`:`value`) string.
+
+```javascript
+import { cssifyDeclaration } from 'css-in-js-utils'
+
+cssifyDeclaration('paddingTop', '400px')
+// => 'padding-top:400px'
+
+cssifyDeclaration('WebkitFlex', 3)
+// => '-webkit-flex:3'
+```
+
+------
+
+### `cssifyObject(object)`
+Generates a CSS string using all key-property pairs in `object`.
+It automatically removes declarations with value types other than `number` and `string`.
+
+```javascript
+import { cssifyObject } from 'css-in-js-utils'
+
+cssifyObject({
+  paddingTop: '400px',
+  paddingBottom: undefined,
+  WebkitFlex: 3,
+  _anyKey: [1, 2, 4]
+})
+// => 'padding-top:400px;-webkit-flex:3'
+```
+
+------
+
 ### `hyphenateProperty(property)`
 Converts the `property` to hyphen-case.
 > Directly mirrors [hyphenate-style-name](https://github.com/rexxars/hyphenate-style-name).
 
 ```javascript
 import { hyphenateProperty } from 'css-in-js-utils'
 
-console.log(hyphenateProperty('paddingTop'))
+hyphenateProperty('paddingTop')
 // => 'padding-top'
 
-console.log(hyphenateProperty('WebkitTransition'))
+hyphenateProperty('WebkitTransition')
 // => '-webkit-transition'
 ```
 
@@ -65,10 +101,10 @@ Checks if a `property` includes a vendor prefix.
 ```javascript
 import { isPrefixedProperty } from 'css-in-js-utils'
 
-console.log(isPrefixedProperty('paddingTop'))
+isPrefixedProperty('paddingTop')
 // => false
 
-console.log(isPrefixedProperty('WebkitTransition'))
+isPrefixedProperty('WebkitTransition')
 // => true
 ```
 
@@ -79,11 +115,11 @@ Checks if a `value` includes vendor prefixes.
 ```javascript
 import { isPrefixedValue } from 'css-in-js-utils'
 
-console.log(isPrefixedValue('200px'))
-console.log(isPrefixedValue(200))
+isPrefixedValue('200px')
+isPrefixedValue(200)
 // => false
 
-console.log(isPrefixedValue('-webkit-calc(100% - 50px)'))
+isPrefixedValue('-webkit-calc(100% - 50px)')
 // => true
 ```
 
@@ -96,11 +132,11 @@ Checks if a `property` accepts unitless values.
 ```javascript
 import { isUnitlessProperty } from 'css-in-js-utils'
 
-console.log(isUnitlessProperty('width'))
+isUnitlessProperty('width')
 // => false
 
-console.log(isUnitlessProperty('flexGrow'))
-console.log(isUnitlessProperty('lineHeight'))
+isUnitlessProperty('flexGrow')
+isUnitlessProperty('lineHeight')
 // => true
 ```
 
@@ -113,22 +149,39 @@ Normalizes the `property` by unprefixing **and** camelCasing it.
 ```javascript
 import { normalizeProperty } from 'css-in-js-utils'
 
-console.log(normalizeProperty('-webkit-transition-delay'))
+normalizeProperty('-webkit-transition-delay')
 // => 'transitionDelay'
 ```
 
 ------
 
+### `resolveArrayValue(property, value)`
+Concatenates array values to single CSS value.
+> Uses the [`hyphenateProperty`](#hyphenatepropertyproperty)-method.
+
+
+```javascript
+import { resolveArrayValue } from 'css-in-js-utils'
+
+resolveArrayValue('display', [ '-webkit-flex', 'flex' ])
+// => '-webkit-flex;display:flex'
+
+resolveArrayValue('paddingTop', [ 'calc(100% - 50px)', '100px' ])
+// => 'calc(100% - 50px);padding-top:100px'
+```
+
+------
+
 ### `unprefixProperty(property)`
 Removes the vendor prefix (if set) from the `property`.
 
 ```javascript
 import { unprefixProperty } from 'css-in-js-utils'
 
-console.log(unprefixProperty('WebkitTransition'))
+unprefixProperty('WebkitTransition')
 // => 'transition'
 
-console.log(unprefixProperty('transitionDelay'))
+unprefixProperty('transitionDelay')
 // => 'transitionDelay'
 ```
 
@@ -140,10 +193,10 @@ Removes all vendor prefixes (if any) from the `value`.
 ```javascript
 import { unprefixValue } from 'css-in-js-utils'
 
-console.log(unprefixValue('-webkit-calc(-moz-calc(100% - 50px)/2)'))
+unprefixValue('-webkit-calc(-moz-calc(100% - 50px)/2)')
 // => 'calc(calc(100% - 50px)/2)'
 
-console.log(unprefixValue('100px'))
+unprefixValue('100px')
 // => '100px'
 ```
 

flow-typed/npm/hyphenate-style-name_vx.x.x.js

@@ -0,0 +1,33 @@
+// flow-typed signature: 891591a45488874951d5117dc307ab7c
+// flow-typed version: <<STUB>>/hyphenate-style-name_v^1.0.2/flow_v0.38.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'hyphenate-style-name'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the 
+ * community by sending a pull request to: 
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'hyphenate-style-name' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+
+
+// Filename aliases
+declare module 'hyphenate-style-name/index' {
+  declare module.exports: $Exports<'hyphenate-style-name'>;
+}
+declare module 'hyphenate-style-name/index.js' {
+  declare module.exports: $Exports<'hyphenate-style-name'>;
+}

flow-typed/npm/unitless-css-property_vx.x.x.js

@@ -0,0 +1,39 @@
+// flow-typed signature: b5cafd4bc97fd336b2d83d1fe546f0b6
+// flow-typed version: <<STUB>>/unitless-css-property_v^1.0.2/flow_v0.38.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'unitless-css-property'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the 
+ * community by sending a pull request to: 
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'unitless-css-property' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'unitless-css-property/modules/index' {
+  declare module.exports: any;
+}
+
+declare module 'unitless-css-property/test/index-test' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'unitless-css-property/modules/index.js' {
+  declare module.exports: $Exports<'unitless-css-property/modules/index'>;
+}
+declare module 'unitless-css-property/test/index-test.js' {
+  declare module.exports: $Exports<'unitless-css-property/test/index-test'>;
+}

modules/__tests__/assignStyle-test.js

@@ -0,0 +1,78 @@
+import assignStyle from '../assignStyle'
+
+describe('Assinging styles', () => {
+  it('should merge properties', () => {
+    expect(assignStyle({ color: 'red' }, { fontSize: 12 }, { lineHeight: 1 })).toEqual({
+      color: 'red',
+      fontSize: 12,
+      lineHeight: 1
+    })
+  })
+
+  it('should overwrite properties from right to left', () => {
+    expect(assignStyle({ fontSize: 12 }, { fontSize: 16 }, { fontSize: 11 })).toEqual({ fontSize: 11 })
+  })
+
+  it('should merge nested objects', () => {
+    expect(
+      assignStyle(
+        {
+          fontSize: 12,
+          ob2: { color: 'red' },
+          ob3: { color: 'red' }
+        },
+        {
+          fontSize: 16,
+          ob2: { fontSize: 12 }
+        },
+        {
+          fontSize: 11,
+          ob3: { color: 'blue' }
+        }
+      )
+    ).toEqual({
+      fontSize: 11,
+      ob2: {
+        color: 'red',
+        fontSize: 12
+      },
+      ob3: { color: 'blue' }
+    })
+  })
+
+  it('should not overwrite objects other than the first one', () => {
+    const ob1 = { color: 'red' }
+    const ob2 = { fontSize: 12 }
+
+    const newOb = assignStyle({}, ob1, ob2)
+
+    expect(newOb).toEqual({
+      color: 'red',
+      fontSize: 12
+    })
+
+    newOb.foo = 'bar'
+    expect(ob1).toEqual({ color: 'red' })
+    expect(ob2).toEqual({ fontSize: 12 })
+  })
+
+  it('should use the first object as base', () => {
+    const ob1 = { color: 'red' }
+    const ob2 = { fontSize: 12 }
+
+    const newOb = assignStyle(ob1, ob2)
+
+    expect(newOb).toEqual({
+      color: 'red',
+      fontSize: 12
+    })
+    expect(ob1).toEqual(newOb)
+
+    newOb.foo = 'bar'
+    expect(ob1).toEqual({
+      color: 'red',
+      fontSize: 12,
+      foo: 'bar'
+    })
+  })
+})

modules/__tests__/cssifyDeclaration-test.js

@@ -0,0 +1,9 @@
+import cssifyDeclaration from '../cssifyDeclaration'
+
+describe('Cssifying declarations', () => {
+  it('should return a valid css declaration', () => {
+    expect(cssifyDeclaration('width', '300px')).toEqual('width:300px')
+    expect(cssifyDeclaration('WebkitFlex', '1')).toEqual('-webkit-flex:1')
+    expect(cssifyDeclaration('msTransitionDuration', '3s')).toEqual('-ms-transition-duration:3s')
+  })
+})

modules/__tests__/cssifyObject-test.js

@@ -0,0 +1,29 @@
+import cssifyObject from '../cssifyObject'
+
+describe('Cssifying objects', () => {
+  it('should generate a valid CSS string', () => {
+    expect(cssifyObject({ color: 'red' })).toEqual('color:red')
+  })
+
+  it('should convert properties to dash case', () => {
+    expect(cssifyObject({ fontSize: '12px' })).toEqual('font-size:12px')
+  })
+
+  it('should separate declarations with semicolons', () => {
+    expect(
+      cssifyObject({
+        fontSize: '12px',
+        color: 'red'
+      })
+    ).toEqual('font-size:12px;color:red')
+  })
+
+  it('should convert vendor prefixes', () => {
+    expect(
+      cssifyObject({
+        WebkitJustifyContent: 'center',
+        msFlexAlign: 'center'
+      })
+    ).toEqual('-webkit-justify-content:center;-ms-flex-align:center')
+  })
+})