WIP
Functional CSS for functional UI components
cxs is a css-in-js solution to dynamically create stylesheets with a functional approach
window.matchMediadisplay: block and float: leftnpm i cxs
// UI component example
import yo from 'yo-yo'
import cxs from 'cxs'
const Button = ({ text, onclick }) => {
// Pass a style object to cxs, which returns a string for
// adding hashed classnames to HTML.
// Numbers are converted to px values.
// Pseudo classes and @media queries work as well.
// cxs attaches a stylesheet to the head and updates
// rules with each call.
const className = cxs({
fontSize: 14,
color: 'white',
backgroundColor: '#07c',
':hover': {
backgroundColor: '#06b'
},
'@media screen and (min-width:40em)': {
fontSize: 18
}
})
// Apply the classname to your component
return yo`
<button
className=${className}
onclick=${onclick}>
${text}
</button>
`
}
// For server-side rendering,
// get the CSS string after rendering a component tree
const body = view(state).toString()
const css = cxs.css
const html `<!DOCTYPE html>
<html>
<head>
<style>${css}</style>
</head>
<body>${body}</body>
</html>
`
// Returns a hashed className string and creates CSS rules for style objects
const className = cxs({ color: 'tomato' })
// Attach a style tag and CSSStyleSheet to the document
// This is useful for manually controlling style insertion
// when `options.autoAttach` is set to false.
cxs.attach()
// An array of cached CSS rules
const rules = cxs.rules
// A CSS string of cached rules. Useful for server-side rendering
const css = cxs.css
// Clears the rule cache. This can be used after building a DOM tree and attaching styles
cxs.clearCache()
// Options
// Disable automatic style insertion by setting `autoAttach` to false.
cxs.options.autoAttach = true
// Change the debounce time
cxs.options.debounce = 0
cxs does not handle vendor prefixing to keep the module size at a minimum.
To add vendor prefixes, use a prefixing module like inline-style-prefixer
import cxs from 'cxs'
import prefixer from 'inline-style-prefixer/static'
const prefixed = prefixer({
display: 'flex'
})
const cx = cxs(prefixed)
Compared to other, similar modules, cxs is an attempt to create a smaller and simpler API and a smaller overall module. For more customizable and robust solutions, see the following:
CSSStyleSheet.insertRule()Array.filterArray.mapArray.reduceArray.forEachMIT License
FAQs
Fast af css-in-js in under 1kb
The npm package cxs receives a total of 10,225 weekly downloads. As such, cxs popularity was classified as popular.
We found that cxs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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.
Research
Security News
Malicious PyPI package ‘set-utils’ steals Ethereum private keys by exfiltrating them through blockchain transactions via the Polygon RPC.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.