WIP
Functional CSS for functional UI components
cxs is a css-in-js solution to dynamically create stylesheets with a functional approach
display: block and float: leftnpm i cxs
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.
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>
`
}
// attach the stylesheet to the document after rendering
const tree = view(state)
document.body.appendChild(tree)
cxs.attach()
// Or return a CSS string for server-side rendering
const body = view(state).toString()
const css = cxs.getCss()
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
cxs.attach()
// Returns an array of cached CSS rules
const rules = cxs.getRules()
// Returns a CSS string of cached rules. Useful for server-side rendering
const css = cxs.getCss()
// Clears the rule cache. This can be used after building a DOM tree and attaching styles
cxs.clearCache()
MIT 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.