@chakra-lite/styled NPM

@chakra-lite/styled and @chakra-lite/styled-preact

A tiny (1kb) alternative to the popular styled-components library for react AND preact

Sister packages:

@chakra-lite/css
@chakra-lite/react

Pros:

Much less bundle size and runtime sluggishness
Less is more: less bugs, no breaking changes
Compatible with preact and react
Supports declaring styled components inside of Components for better code colocating and NO MORE NEED TO PASS ARGS!
Supports css AND tss - a tab based css

Cons:

No SSR support

Setup/Install

npm i @chakra-lite/styled

or for preact

npm i @chakra-lite/styled-preact

Tip: Set "moduleResolution": "NodeNext" in tsconfig.json to get the best typescript experience

Usage

Preview below. For full code, see demo folder

// Add some global styles
css`
  body {
    color: lightgray;
  }
`

// Also works with tab syntax (tss)
css`
 body
  background: black
 @media (width > 500px)
  body
   background: #333
`

export function App() {
  const on = useOn()
  const [ref, width] = useWidth()

  let pColor = ''
  if (width > 400 && width > 800) {
    pColor = on ? 'white' : 'pink'
  } else {
    pColor = on ? 'white' : 'red'
  }

  // Feel free to declare styled components inside components!

  // A basic div with css template string
  const Div = styled.div`
    :self {
      color: #55f;
    }
  `

  // A basic div with tss string and nested component
  const Container = styled.div(`
    :self
      container-type: inline-size
      max-width: 500px
    :self ${Div}
      background: white
  `)

  // A basic div with tab syntax (tss) template string and dynamic color
  const Div2 = styled.div`
  :self
   color: ${pColor}
  @container (width > 400px) and (width > 800px)
   :self
    color: ${pColor}
 `

  // An extension of Div2 with tss template string
  const Div3 = styled(Div2)`
    :self
      background: black
      padding: 10px
  `
  // An extension of Div3 with css string
  const Div4 = styled(Div3)(':self { font-size: 30px; }')

  return (
    <Container forwardRef={ref as any}>
      <Div>This should be blue font with white background</Div>
      <h3>THIS SHOULD BE WHITE</h3>
      <Div4 style={{ textTransform: 'uppercase' }}>
        This should be
        <ul>
          <li>uppercase</li>
          <li>font-size 30</li>
          <li>padding: 10</li>
          <li>background: black</li>
          <li>font color: {pColor}</li>
        </ul>
      </Div4>
    </Container>
  )
}