![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
css-in-js-utils
Advanced tools
Readme
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
.
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
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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.