
Security News
Crates.io Implements Trusted Publishing Support
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
css-in-js-utils
Advanced tools
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)
assignStyle(base, ...extend)
Merges deep style objects similar to Object.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' }}
camelCaseProperty(property)
Converts the property
to camelCase.
import { camelCaseProperty } from 'css-in-js-utils'
camelCaseProperty('padding-top')
// => 'paddingTop'
camelCaseProperty('-webkit-transition')
// => 'WebkitTransition'
cssifyDeclaration(property, value)
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'
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
.
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.
import { hyphenateProperty } from 'css-in-js-utils'
hyphenateProperty('paddingTop')
// => 'padding-top'
hyphenateProperty('WebkitTransition')
// => '-webkit-transition'
isPrefixedProperty(property)
Checks if a property
includes a vendor prefix.
import { isPrefixedProperty } from 'css-in-js-utils'
isPrefixedProperty('paddingTop')
// => false
isPrefixedProperty('WebkitTransition')
// => true
isPrefixedValue(value)
Checks if a value
includes vendor prefixes.
import { isPrefixedValue } from 'css-in-js-utils'
isPrefixedValue('200px')
isPrefixedValue(200)
// => false
isPrefixedValue('-webkit-calc(100% - 50px)')
// => true
isUnitlessProperty(property)
Checks if a property
accepts unitless values.
import { isUnitlessProperty } from 'css-in-js-utils'
isUnitlessProperty('width')
// => false
isUnitlessProperty('flexGrow')
isUnitlessProperty('lineHeight')
isUnitlessProperty('line-height')
// => true
normalizeProperty(property)
Normalizes the property
by unprefixing and camelCasing it.
Uses the
camelCaseProperty
andunprefixProperty
-methods.
import { normalizeProperty } from 'css-in-js-utils'
normalizeProperty('-webkit-transition-delay')
// => 'transitionDelay'
resolveArrayValue(property, value)
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'
unprefixProperty(property)
Removes the vendor prefix (if set) from the property
.
import { unprefixProperty } from 'css-in-js-utils'
unprefixProperty('WebkitTransition')
// => 'transition'
unprefixProperty('transitionDelay')
// => 'transitionDelay'
unprefixValue(value)
Removes all vendor prefixes (if any) from the value
.
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.
import camelCaseProperty from 'css-in-js-utils/lib/camelCaseProperty'
css-in-js-utils is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.
FAQs
Useful utility functions for CSS in JS solutions
The npm package css-in-js-utils receives a total of 2,184,274 weekly downloads. As such, css-in-js-utils popularity was classified as popular.
We found that css-in-js-utils demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.