
Security News
libxml2 Maintainer Ends Embargoed Vulnerability Reports, Citing Unsustainable Burden
Libxml2’s solo maintainer drops embargoed security fixes, highlighting the burden on unpaid volunteers who keep critical open source software secure.
css-render
Advanced tools
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;
}
$ npm install --save-dev css-render @css-render/vue3-ssr
To make ssr works, you need to make
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.
Name | Cov |
---|---|
css-render | |
@css-render/plugin-bem | |
vue3-ssr |
FAQs
Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.
The npm package css-render receives a total of 31,737 weekly downloads. As such, css-render popularity was classified as popular.
We found that css-render demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Libxml2’s solo maintainer drops embargoed security fixes, highlighting the burden on unpaid volunteers who keep critical open source software secure.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.