Package Exports

css-render

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-render) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

css-render ·

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.

Why Using It

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 using css-render, you can generate CSS at client side and reduce your app's bundle size. (This is a exchange between bandwidth and CPU 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 using css-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.

Documentation

Examples

Basic

$ 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', {
  margin: 0,
  backgroundColor: 'white'
}, [
  c('&.dark', {
    backgroundColor: 'black'
  }),
  c('.container', {
    width: '100%'
  })
])

/** 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()

It outputs

body {
  margin: 0;
  background-color: white;
}

body.dark {
  background-color: black;
}

body .container {
  width: 100%;
}

BEM Plugin Example

$ 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()

It outputs

.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;
}