1.0.37 • Published 1 year ago
@ustyle/css v1.0.37
@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 bottompy
-->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
1.0.33
1 year ago
1.0.37
1 year ago
1.0.36
1 year ago
1.0.35
1 year ago
1.0.32
1 year ago
1.0.31
1 year ago
1.0.30
1 year ago
1.0.29
1 year ago
1.0.28
1 year ago
1.0.27
1 year ago
1.0.26
1 year ago
1.0.25
1 year ago
1.0.24
1 year ago
1.0.23
1 year ago
1.0.22
1 year ago
1.0.21
1 year ago
1.0.20
1 year ago
1.0.19
1 year ago
1.0.18
1 year ago
1.0.17
1 year ago
1.0.16
1 year ago
1.0.15
1 year ago
1.0.14
1 year ago
1.0.13
1 year ago
1.0.12
1 year ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago