@ustyle/css
STATUS: Moved to @slimr/css
A tiny alternative to the popular emotion library
Demos: See ./packages/demo
or CodeSandbox
Sister libs:
Pros:
-
Much less bundle size
-
Less is more: faster, less bugs, no breaking changes
-
Is progressive -- lazy loads styles along with component if component is lazy
-
Css shorthand props like chakra-ui:
-
m
-->margin
-
mx
-->margin-left
and bottom -
py
-->padding-top
and bottom - More here!
-
-
CSS Breakpoints shorthand like chakra-ui:
margin: [auto, null, inherit]; /* Translates to */ margin: auto; @media (min-width: 48em) { margin: inherit; }
- Breakpoints are
[30em, 48em, 62em, 80em, 96em]
- Breakpoints are
Cons:
- No SSR support
Setup/Install
npm i @ustyle/css
Usage
// Add some global styles
addCss`
body {
color: lightgray;
}
`
export function App() {
const on = useOn()
return (
<div
className={css`
background: white;
color: ${on ? 'red' : 'initial'};
&:hover {
font-weight: bold;
}
font-size: [20px, null, 16px];
`}
>
Helo css!
</div>
)
}
Comparisons
Emotion
- A popular css-in-js lib that inspired this lib
Pros
- More mature, SSR support
Cons
- Is huge (>10kb)
- Many features require addons, which make bundle even larger
- Does not support zx prop or css shorthand props
Astroturf
- A popular css-in-js lib similar to Emotion but compiles out the css into css stylesheets
Pros
- More performant (zero kbs, no need for caching or Map lookups)
- Support for all the PostCSS magic you may desire
Cons
- Requires babel/bundler config
- Does not support zx prop or css shorthand props
- Is not progressive -- all styles for all components is loaded and blocks initial page paint
Linaria
- Pretty much identical to Astroturf, but maybe better Vite support