vanilla-style

Functional modal css-in-js.

Easy set HTMLElement styles, and easy use css-in-js make like pretend class: hover, active:

Size 2kb

Install

$ npm install --save vanilla-style

Use

import style from "vanilla-style";


const box = document.getElementById("box");

style({
  // base style
  color: "#333",
  background: "#f55",
  $active: {
    background: "#ff0"
  },
  // like css :hover
  $hover: {
    background: "#55f"
  },
  // like display:flex; flex-direction: row; justify-content:center; align-items:center;
  $flex: "row center start"
})(box);

Use sheet

Sheet is some style Functions:

const sheet = style.createSheet({
  header:{
    background:'#333'
  },
  title: {
    color:'#00f'
  }
})

const header = document.getElementById("header");
const title = document.getElementById("title");

sheet.header(header);
sheet.title(title);

Middleware

vanilla-style built-in middlewares:

| name | detail | | -------- | ---------------------------------- | | $hover | Like css:hover | | $active | Like css:active | | $flex | Quick set flex css | | $media | If window.innerWidth and set style | | $pc | If at Desktop and set style | | $mobile | if at Mobile and set style |

We can create self middleware, $bg:

style.use('$bg', (value, element) =>{
  element.style.background = value;
  return {
    background: value;
  }
});

Use middleware style params:

const box = document.getElementById("box");

style({
  $bg: "#f00"
})(box);