# @chakra-lite/css

> A tiny (1kb) alternative to the popular emotion library for react AND preact

Latest version **3.0.14** (published 2022-12-23) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @chakra-lite/css
pnpm add @chakra-lite/css
yarn add @chakra-lite/css
bun add @chakra-lite/css
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.14 |
| Published | 2022-12-23 |
| First published | 2022-12-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Brian Dombrowski |
| Maintainers | bdombro |
| Keywords | chakra, chakra-ui, emotion, styled-components, preact, react |

## Links

- npm: https://www.npmjs.com/package/@chakra-lite/css
- Repository: https://github.com/bdombro/chakra-lite
- Homepage: https://github.com/bdombro/chakra-lite#readme
- Issues: https://github.com/bdombro/chakra-lite/issues
- npm.io page: https://npm.io/package/@chakra-lite/css

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 3.0.14 (latest) — 2022-12-23
- 3.0.13 — 2022-12-23
- 3.0.12 — 2022-12-23
- 3.0.11 — 2022-12-23
- 3.0.10 — 2022-12-23
- 3.0.7 — 2022-12-23
- 3.0.6 — 2022-12-23
- 3.0.5 — 2022-12-23
- 3.0.4 — 2022-12-23

## README

# @chakra-lite/css

A tiny (1kb) alternative to the popular emotion library for react AND preact

Sister packages:

- @chakra-lite/styled
- @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 css 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

```bash
npm i @chakra-lite/css
```

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

## Usage

Preview below. For full code, see demo folder

```tsx
// 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()

  // Feel free to declare css inside components!
  const fontWeight = on ? 'bold' : 'initial'

  css`
    body
      font-weight: ${fontWeight}
  `
  return <div>This should be black or gray background, lightgray font, {fontWeight} weight</div>
}
```

### Comparisons

#### [Emotion](https://emotion.sh/docs/introduction)

- A popular css-in-js lib that this lib is based on

Pros

- Very feature rich

Cons

- Is large (~11kb)

---
_Source: https://npm.io/package/@chakra-lite/css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._