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's design 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.

Get Started

$ 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 work in browser
 */
style.mount()
// ...
style.unmount()

which outputs

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

body.dark {
  background-color: black;
}

body .container {
  width: '100%';
}

Plugins

BEM

$ 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
 */
style.mount()
// ...
style.unmount()

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