An framework-agnostic atomic css-in-js library with support to nested and ssr
To install just run npm install atomss or yarn add atomss
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);To handle server usages, atomss will provide some helpers, such as hydrate and Cache
import { hydrate } from 'atomss';
hydrate(); // just run hydrate, this method will handle your previous generated cacheimport { 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
});Today atomss doens't handle custom units or order in properties of same css declaration, the style is as is
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent