Functional CSS for functional UI components
const className = cxs({ color: 'tomato' })
CXS is a functional CSS-in-JS solution that uses atomic styles to maximize deduplication and help with dead code elimination.
npm install cxs
CXS works with any framework, but this example uses React for demonstration purposes.
import React from 'react'
import cxs from 'cxs'
const Box = (props) => {
return (
<div
{...props}
className={className} />
)
}
const className = cxs({
padding: 32,
backgroundColor: 'tomato'
})
export default Box
cxs({
color: 'tomato',
':hover': {
color: 'red'
}
})
cxs({
color: 'tomato',
'@media (min-width: 40em)': {
color: 'red'
}
})
cxs({
color: 'tomato',
h1: {
color: 'red'
}
})
To use CXS in server environments, use the css() function to get the static CSS string after rendering a view.
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import cxs, { css, reset } from 'cxs'
import App from './App'
const html = ReactDOMServer.renderToString(<App />)
const doc = `<!DOCTYPE html>
<style>${css()}</style>
${html}
`
// reset the cache for the next render
reset()
CXS offers three different modes of operation, which produce different rules and class names.
import cxsAtomic from 'cxs'
import cxsMonolithic from 'cxs/monolithic'
import cxsLite from 'cxs/lite'
const styles = {
margin: 0,
marginBottom: 32,
padding: 16,
color: 'tomato',
':hover': {
color: 'orangered'
},
'@media (min-width: 40em)': {
padding: 32
}
}
// Each mode returns a different set of class names
cxsAtomic(styles)
// m-0 mb-32 p-16 c-tomato -hover-c-orangered _zsp35u
cxsMonolithic(styles)
// _q5nmba
cxsLite(styles)
// a b c d e f
import cxs from 'cxs'
The default mode is the atomic mode. This creates atomic rulesets and attempts to create human readable classnames. If a classname is longer than 24 characters, a hashed classname will be used instead.
import cxs from 'cxs/lite'
For super fast performance, use the cxs/lite module.
Lite mode creates alphabetic class names in a sequential order and does not support nested selectors.
Since the class names in cxs/lite are not created in a functional manner, when using cxs/lite on both the server and client, the styles will need to be rehydrated. Rehydration is not yet implemented.
import cxs from 'cxs/monolithic'
To create encapsulated monolithic styles with CXS and use single hashed class names, import the monolithic module.
The monolithic module also accepts custom selectors for styling things like the body element.
cxs('body', {
fontFamily: '-apple-system, sans-serif',
margin: 0,
lineHeight: 1.5
})
import cxs, {
css,
sheet,
reset
} from 'cxs'
// Creates styles and returns micro classnames
cxs({ color: 'tomato' })
// Returns a CSS string of attached rules. Useful for server-side rendering
css()
// The threepointone/glamor StyleSheet instance
// See https://github.com/threepointone/glamor
cxs.sheet
// Clear the cache and flush the glamor stylesheet.
// This is useful for cleaning up in server-side contexts.
cxs.reset()
The CXS function creates a separate rule for each declaration, adds CSS rules to a style tag in the head of the document, and returns multiple classnames.
The returned classname is based on the property and value of the declaration. Some classnames are abbreviated, and long classnames are hashed.
cxs({ color: 'tomato' })
// c-tomato
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)
IE9+, due to the following:
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 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.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.