- Notifications
You must be signed in to change notification settings - Fork11
Useful utility functions for CSS in JS solutions
License
robinweser/css-in-js-utils
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A library that provides useful utilities functions for CSS-in-JS solutions.
They are intended to be used by CSS-in-JS library authors rather used directly.
yarn add css-in-js-utils
By now I have authored and collaborated on many different libraries and found I would rewrite the very same utility functions every time. That's why this repository is hosting small utilities especially built for CSS-in-JS solutions and tools. Even if there are tons of different libraries already, they all basically use the same mechanisms and utilities.
assignStyle(base, ...extend)camelCaseProperty(property)cssifyDeclaration(property, value)cssifyObject(object)hyphenateProperty(property)isPrefixedProperty(property)isPrefixedValue(value)isUnitlessProperty(property)normalizeProperty(property)resolveArrayValue(property, value)unprefixProperty(property)unprefixValue(value)
Merges deep style objects similar toObject.assign.
It also merges array values into a single array whithout creating duplicates. The last occurence of every item wins.
import{assignStyle}from'css-in-js-utils'assignStyle({color:'red',backgroundColor:'black'},{ color:'blue'})// => { color: 'blue', backgroundColor: 'black' }assignStyle({color:'red',':hover':{backgroundColor:'black'}},{ ':hover':{backgroundColor:'blue'}})// => { color: 'red', ':hover': { backgroundColor: 'blue' }}
Converts theproperty to camelCase.
import{camelCaseProperty}from'css-in-js-utils'camelCaseProperty('padding-top')// => 'paddingTop'camelCaseProperty('-webkit-transition')// => 'WebkitTransition'
Generates a CSS declaration (property:value) string.
import{cssifyDeclaration}from'css-in-js-utils'cssifyDeclaration('paddingTop','400px')// => 'padding-top:400px'cssifyDeclaration('WebkitFlex',3)// => '-webkit-flex:3'
Generates a CSS string using all key-property pairs inobject.It automatically removes declarations with value types other thannumber andstring.
import{cssifyObject}from'css-in-js-utils'cssifyObject({paddingTop:'400px',paddingBottom:undefined,WebkitFlex:3,_anyKey:[1,2,4]})// => 'padding-top:400px;-webkit-flex:3'
Converts theproperty to hyphen-case.
Directly mirrorshyphenate-style-name.
import{hyphenateProperty}from'css-in-js-utils'hyphenateProperty('paddingTop')// => 'padding-top'hyphenateProperty('WebkitTransition')// => '-webkit-transition'
Checks if aproperty includes a vendor prefix.
import{isPrefixedProperty}from'css-in-js-utils'isPrefixedProperty('paddingTop')// => falseisPrefixedProperty('WebkitTransition')// => true
Checks if avalue includes vendor prefixes.
import{isPrefixedValue}from'css-in-js-utils'isPrefixedValue('200px')isPrefixedValue(200)// => falseisPrefixedValue('-webkit-calc(100% - 50px)')// => true
Checks if aproperty accepts unitless values.
import{isUnitlessProperty}from'css-in-js-utils'isUnitlessProperty('width')// => falseisUnitlessProperty('flexGrow')isUnitlessProperty('lineHeight')isUnitlessProperty('line-height')// => true
Normalizes theproperty by unprefixingand camelCasing it.
Uses the
camelCasePropertyandunprefixProperty-methods.
import{normalizeProperty}from'css-in-js-utils'normalizeProperty('-webkit-transition-delay')// => 'transitionDelay'
Concatenates array values to single CSS value.
Uses the
hyphenateProperty-method.
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'
Removes the vendor prefix (if set) from theproperty.
import{unprefixProperty}from'css-in-js-utils'unprefixProperty('WebkitTransition')// => 'transition'unprefixProperty('transitionDelay')// => 'transitionDelay'
Removes all vendor prefixes (if any) from thevalue.
import{unprefixValue}from'css-in-js-utils'unprefixValue('-webkit-calc(-moz-calc(100% - 50px)/2)')// => 'calc(calc(100% - 50px)/2)'unprefixValue('100px')// => '100px'
Every utility function may be imported directly to save bundle size.
importcamelCasePropertyfrom'css-in-js-utils/lib/camelCaseProperty'
css-in-js-utils is licensed under theMIT License.
Documentation is licensed underCreative Common License.
Created with ♥ by@rofrischmann.
About
Useful utility functions for CSS in JS solutions
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Contributors8
Uh oh!
There was an error while loading.Please reload this page.