# css-render

> Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.

Latest version **0.15.14** (published 2024-05-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-render
pnpm add css-render
yarn add css-render
bun add css-render
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.15.14 |
| Published | 2024-05-05 |
| First published | 2020-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 48.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 211 |
| Author | 07akioni |
| Maintainers | 07akioni |
| Keywords | css-render, css, style, css in js, css-in-js |

## Links

- npm: https://www.npmjs.com/package/css-render
- Repository: https://github.com/07akioni/css-render
- Issues: https://github.com/07akioni/css-render/issues
- npm.io page: https://npm.io/package/css-render

## Dependencies (2)

- [csstype](https://npm.io/package/csstype.md) ~3.0.5
- [@emotion/hash](https://npm.io/package/@emotion/hash.md) ~0.8.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.15.14 (latest) — 2024-05-05
- 0.15.13 — 2024-05-05
- 0.15.12 — 2022-12-24
- 0.15.11 — 2022-08-21
- 0.15.10 — 2022-05-16
- 0.15.9 — 2022-03-05
- 0.15.8 — 2021-12-28
- 0.15.7 — 2021-12-28
- 0.15.6 — 2021-09-02
- 0.15.5 — 2021-07-24
- 0.15.4 — 2021-06-13
- 0.15.3 — 2021-06-12
- 0.15.2 — 2021-06-02
- 0.15.1 — 2021-06-01
- 0.15.0 — 2021-06-01
- … 62 more at https://npm.io/package/css-render/versions

## README

# css-render · [![GitHub Liscense](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/07akioni/css-render/blob/master/LICENSE) [![npm](https://img.shields.io/npm/v/css-render)](https://www.npmjs.com/package/css-render) [![Total alerts](https://img.shields.io/lgtm/alerts/g/07akioni/css-render.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/07akioni/css-render/alerts/) [![codecov](https://codecov.io/gh/07akioni/css-render/branch/master/graph/badge.svg?token=28OJZAHLK4&precision=2)](https://codecov.io/gh/07akioni/css-render)

Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.

It's mainly built for **library builders** (who wants make their library work without css import at small overhead). It's not recommend to use it in a webapp.

It is not designed to totally replace other style-related solutions, but to be a progressive tool which can just work as a supplementary of your style files or totally replace your `.css` files.

## Docs
[css-render](https://css-render.vercel.app/)

## Why Using It
1. You want to ship a library without css at a small price (gzip < 2kb).
2. Reduce size compared with static css (which contains duplicate logic).
3. You can't write `sass-like` or `less-like` css-in-js (eg. `mixin` in sass or less).
4. You want to write style variables in JS.
5. Support an simple SSR API (now only for vue3).

## Comparasion with other CSS-in-JS framework

Main differences between css-render and styled-component, jss or emotion:
1. It doesn't do the bindings between components and styles. It is more like a style generator with low level mount and unmount API.
2. It's easier to write like a sass mixin or less mixin.


## Examples
### Realword Example
- [XScroll](https://github.com/07akioni/vueuc/blob/main/src/x-scroll/src/index.ts)
- [VirtualList](https://github.com/07akioni/vueuc/blob/main/src/virtual-list/src/VirtualList.ts)

### Basic Example
```bash
$ npm install --save-dev css-render
```
```js
import CssRender from 'css-render'
/**
 * CommonJS:
 * const { CssRender } = require('css-render')
 */

const {
  c
} = CssRender()

const style = c('body', ({ props }) => ({
  margin: 0,
  backgroundColor: props.backgroundColor
}), [
  c('&.dark', {
    backgroundColor: 'black'
  }),
  c('.container', {
    width: '100%'
  })
])

/** use it as string */
console.log(style.render({ backgroundColor: 'white' }))
/**
 * or mount on document.head. (the following lines only work in the browser.)
 */
style.mount()
// ...
style.unmount()
```
```css
body {
  margin: 0;
  background-color: white;
}

body.dark {
  background-color: black;
}

body .container {
  width: 100%;
}
```

### BEM Plugin Example
```bash
$ npm install --save-dev css-render @css-render/plugin-bem
```

You can use bem plugin to generate bem CSS like this:

```js
import CssRender from 'css-render'
import bem from '@css-render/plugin-bem'
/**
 * CommonJS:
 * const { CssRender } = require('css-render')
 * const { plugin: bem } = require('@css-render/plugin-bem')
 */

const cssr = CssRender()
const plugin = bem({
  blockPrefix: '.c-'
})
cssr.use(plugin) // bind the plugin with the cssr instance
const {
  cB, cE, cM
} = plugin

const style = cB(
  'container',
  [
    cE(
      'left, right', 
      {
        width: '50%'
      }
    ),
    cM(
      'dark', 
      [
        cE(
          'left, right',
          {
            backgroundColor: 'black'
          }
        )
      ]
    )
  ]
)

/** use it as string */
console.log(style.render())
/**
 * or mount on document.head
 * the following lines only works in browser, don't call them in node.js
 */
style.mount()
// ...
style.unmount()
```
```css
.c-container .c-container__left, .c-container .c-container__right {
  width: 50%;
}

.c-container.c-container--dark .c-container__left, .c-container.c-container--dark .c-container__right {
  background-color: black;
}
```

## Vue3 SSR
```bash
$ npm install --save-dev css-render @css-render/vue3-ssr
```

To make ssr works, you need to make
```tsx
import { h, createSSRApp, defineComponent } from 'vue'
import { renderToString } from '@vue/server-renderer'

import { CssRender } from 'css-render'
import { SsrContext, ssrAdapter } from '@css-render/vue3-ssr'

const Child = defineComponent({
  setup () {
    c('div', {
      color: 'red'
    }).mount({
      id: 'mount-id',
      // You need to pass the ssrAdapter to `mount` function
      // to make ssr work.
      // If you want it work with CSR, just set it to undefined
      ssr: ssrAdapter 
    })
  },
  render () {
    return 'Child'
  }
})

const App = defineComponent({
  render () {
    // Wrap the SsrContext at the root of your app
    return h(SsrContext, null, {
      default: () => h(Child)
    })
  }
})

const app = createSSRApp(App)

renderToString(app).then(v => { console.log(v) })
```

Finally you will find the rendered SSR HTML includes mounted style.

## Packages
|Name|Cov|
|-|-|
|css-render|[![codecov](https://codecov.io/gh/07akioni/css-render/branch/master/graph/badge.svg?token=28OJZAHLK4&flag=css-render)](https://codecov.io/gh/07akioni/css-render)|
|@css-render/plugin-bem| [![codecov](https://codecov.io/gh/07akioni/css-render/branch/master/graph/badge.svg?token=28OJZAHLK4&flag=plugin-bem)](https://codecov.io/gh/07akioni/css-render)|
|vue3-ssr| [![codecov](https://codecov.io/gh/07akioni/css-render/branch/master/graph/badge.svg?token=28OJZAHLK4&flag=vue3-ssr)](https://codecov.io/gh/07akioni/css-render)|

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