Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.
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.
sass-like
or less-like
css-in-js (eg. mixin
in sass or less).Main differences between css-render and styled-component, jss or emotion:
$ npm install --save-dev css-render
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()
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 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()
.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;
}
Name | Cov |
---|---|
css-render | |
@css-render/plugin-bem | |
vue3-ssr |