atomss v0.1.9
Atomss
An framework-agnostic atomic css-in-js library with support to nested and ssr
Installation
To install just run npm install atomss or yarn add atomss
Usage
import { css, clsx, keyframes } from 'atomss';
const animation = keyframes({
// percents work too
from: {
color: 'red',
},
to: {
color: 'blue',
},
});
const styles = css({
color: 'red',
animation: `${animation} 5s ease infinite`,
'&:hover': {
color: 'gray',
},
'@media (min-width: 300px)': {
color: 'yellow',
},
});
const another = css({
color: 'red', // will use the same classname
backgroundColor: 'blue',
});
const classNames = clsx(styles, another);SSR
To handle server usages, atomss will provide some helpers, such as hydrate and Cache
Client side
import { hydrate } from 'atomss';
hydrate(); // just run hydrate, this method will handle your previous generated cacheServer side
import { seal, getStyleTag, getScriptTag } from 'atomss';
router.get('/', (req, res) => {
renderToString();
res.send(`
<html>
<head>
${getStyleTag()}
</head>
<body>
<div id="app"></div>
${getScriptTag()}
</body>
</html>
`);
seal(); // run clear to avoid mismatch
});Alert
Today atomss doens't handle custom units or order in properties of same css declaration, the style is as is
How this works
You write a css-like object, atomss parse your input and create a hash key for every declaration, such your parents too. Then for equal declarations the clsx helper will use the same classname.
To avoid mismatch styles, atomss reverse the order of injection in clsx and filter the properties already used, the hash of a class like color: red will be different than @media (min-width: 300px) { color: red }. Then simple color declarations should not override the media query declaration.