A tiny (~2kb) React css-in-js library inspired by chakra-ui, emotion, and styled-components libs
npm install @slimr/styledA tiny (~2kb) React css-in-js library inspired by chakra-ui, emotion, and styled-components libs
Demo: CodeSandbox
Features:
- Easily create React components with styles using familiar syntax
- Much less bundle size and runtime sluggishness than others
- Supports declaring css and styled components inside of Components for better code colocating
- Zx/Css shorthand props like chakra-ui
- Concise responsive CSS syntax Breakpoints shorthand similar to chakra-ui
- Import pre-enhanced HTML Elements like Div or A for profit
@slimr is a set of slim React (hence '@slimr') libs. Check them all out on github!
``bash`
npm i @slimr/styled
See npm for more info.
` Props to help style based on CSS state const MyDiv = styled.div Some styles are available as shorthand -- all of them here. Specify responsive styles as arrays, similar to chakra-ui Default breakpoints are Import pre-enhanced HTML Elements like // style props - A popular css-in-js lib that inspired this lib Pros - More mature, SSR support Cons - Is crazy large bundle impact (80+kb) - A popular css-in-js lib that inspired this lib Pros - More mature, SSR support Cons - Is massive (~12kb), plus has dependency on emotion (~11kb) - A popular css-in-js lib similar to styled-components Pros - More mature, SSR support Cons - Is large (>10kb) - another tiny 1kb styled-components like css-in-js Pros: - More mature, SSR support Cons: - Many features require addons, which in sum may make the bundle larger than slimrtypescriptc: red;
import {addCSs, createClass, css} from '@slimr/styled'
addCss('.foo { color: purple }')
c1 = createClass('c: red;')
c4 = cssc: red;} /> // will resolve to 's0' like abovew: [100%, null, 400px]
c6 = css // width = 100% on mobile and table, 400px on desktop``$3
typescript
import {styled} from '@slimr/styled'
_zx={{color: 'blue}} // applies color = blue
_active={{color: 'blue'}} // applied on :active
_dark={{color: 'blue'}} // applied when browser prefers dark modes
_focus={{color: 'blue'}} // applied on :focus
_focusVisible={{color: 'blue'}} // applied on :focusVisible
_focusWithin={{color: 'blue'}} // applied on :focusWithin
_hover={{color: 'blue'}} // applied on :hover
_light={{color: 'blue'}} // applied on :light
_target={{color: 'blue'}} // applied on :target
_visited={{color: 'blue'}} // applied on :visited``$3
typescript
import {styled} from '@slimr/styled'
const MyDiv = styled.div
_bgColor="blue"
_c="green"
_p={18}
_pos="absolute"
_w={100}
``[30em, 48em, 62em, 80em, 96em]$3
and can be overridden by setting css.breakpoints`typescript
import {styled} from '@slimr/styled'
const MyDiv = styled.div
_w=[100%, null, 200px] // width = 100% on mobile, tablet. 200px on > tablet
_zx={{w: ['100%', null, '200px']}} // is equivalent to _w
``Div$3
or A for profit. With a few exceptions, most elements`
accept ANY CSS style as a prop when prefixed by '\_'typescript``
import {Div, A} from '@slimr/styled' // a div with responsive padding
// stateful styles
I grow during keypress and am green on hover
Comparisons
$3
- Lots of premade components$3
- Does not support zx prop or css shorthand props$3
- Many features require addons, which make bundle even larger
- Does not support zx prop or css shorthand props$3
- Does not support zx prop or css shorthand props