ShadowDom Support

css-render ·

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.

Docs

css-render

Why Using It

You want to ship a library without css at a small price (gzip < 2kb).
Reduce size compared with static css (which contains duplicate logic).
You can't write sass-like or less-like css-in-js (eg. mixin in sass or less).
You want to write style variables in JS.
Support an simple SSR API (now only for vue3).

Comparasion with other CSS-in-JS framework

Main differences between css-render and styled-component, jss or emotion:

It doesn't do the bindings between components and styles. It is more like a style generator with low level mount and unmount API.
It's easier to write like a sass mixin or less mixin.

Examples

Realworld Example

Basic Example

$ 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%;
}

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

Packages

Name	Cov
css-render
@css-render/plugin-bem
vue3-ssr

07akioni / css-render Goto Github PK

css-render's Introduction

css-render ·

Docs

Why Using It

Comparasion with other CSS-in-JS framework

Examples

Realworld Example

Basic Example

BEM Plugin Example

Packages

css-render's People

Contributors

Stargazers

Watchers

Forkers

css-render's Issues

TuSimple/naive-ui version (版本)

Vue version (Vue 版本)

Browser and its version (浏览器及其版本)

System and its version (系统及其版本)

Node version (Node 版本)

Reappearance link (重现链接)

Reappearance steps (重现步骤)

Expected results (期望的结果)

Actual results (实际的结果)

Remarks (补充说明)

Recommend Projects

Recommend Topics

Recommend Org