Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.
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.
- If you have a large CSS bundle with duplicate generation logic, such as a
button.css
with info, success, warning, error and ... buttons, you will need to transfer all the style literals in network. By usingcss-render
, you can generate CSS at client side and reduce your app's bundle size. (This is a exchange betweenbandwidth
andCPU time
) - You may write
sass
,less
or other preprocessors' mixins. However the logic can't be reused at client side (at a small cost). For example, you can generate a red button's style in preprocessors at server side, but you can't handle a dynamic color input at client side. By usingcss-render
, you can generate styles dynamically based on JS variables (which can styling something like::before
or:hover
more easliy than inline style). - You want to write style variables in JS.
If you still have any question, Q&A may help you.
- First Step
- Create a CNode & Render a CNode Tree
- CssRender Instance
- Advanced Mount & Unmount Options
- Plugin Development
$ npm install --save-dev css-render
import CssRender from 'css-render'
/**
* common js:
* 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()
body {
margin: 0;
background-color: white;
}
body.dark {
background-color: black;
}
body .container {
width: 100%;
}
$ npm install --save-dev css-render @css-render/plugin-bem
You can use bem plugin to generate bem CSS like this:
import CssRender from 'css-render'
import CssRenderBemPlugin from '@css-render/plugin-bem'
/**
* common js:
* const { CssRender } = require('css-render')
* const { plugin: CssRenderBemPlugin } = require('@css-render/plugin-bem')
*/
const cssr = CssRender()
const plugin = CssRenderBemPlugin({
blockPrefix: '.c-'
})
cssr.use(plugin)
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()
.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;
}