Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/07akioni/css-render
Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.
https://github.com/07akioni/css-render
css css-in-js preprocessor style
Last synced: 14 days ago
JSON representation
Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.
- Host: GitHub
- URL: https://github.com/07akioni/css-render
- Owner: 07akioni
- License: mit
- Created: 2020-03-17T09:27:11.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-05T07:10:33.000Z (6 months ago)
- Last Synced: 2024-10-23T19:57:58.684Z (21 days ago)
- Topics: css, css-in-js, preprocessor, style
- Language: TypeScript
- Homepage: css-render.vercel.app
- Size: 945 KB
- Stars: 204
- Watchers: 4
- Forks: 22
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# css-render · [](https://github.com/07akioni/css-render/blob/master/LICENSE) [](https://www.npmjs.com/package/css-render) [](https://lgtm.com/projects/g/07akioni/css-render/alerts/) [](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
### Realworld Example
- [DataTable](https://github.com/TuSimple/naive-ui/blob/main/src/data-table/src/styles/index.cssr.ts)
- [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;
}
```
## Packages
|Name|Cov|
|-|-|
|css-render|[](https://codecov.io/gh/07akioni/css-render)|
|@css-render/plugin-bem| [](https://codecov.io/gh/07akioni/css-render)|
|vue3-ssr| [](https://codecov.io/gh/07akioni/css-render)|