Css-putter NPM

css-putter

css-putter apply CSS file on a web page at a time, whenever you hope yourself timing.

Install

npm install css-putter

yarn add css-putter

Usage

import { CssPutter } from 'css-putter'
// your css text
const cssText = `
h1,
h2 {
  margin: 0;
}

ol,
ul {
  list-style: none;
  padding: 0;
}
`
// init
const cssPutter = new CssPutter()
// parse to css rules for insert stylesheets object
const parsedCss = cssPutter.parse(css)
// attach css rules. At this time, the rules is push in stack to detach.
cssPutter.attachCssRules(parsedCss)

// you can detach injected css anytime
setTimeout(() => {
  cssPutter.detachPreviousRules()
}, 3000)

Custom Options

rulesPrefix

When you use rulesPrefix option, css-putter added custom prefix in your parsed css rules.

<html>
  <body>
    <div id="my-app">
      /* ... */
    </div>
    <div>
      <div>I hope any rules do not apply here</div>
    </div>
  </body>
</html>

import { CssPutter } from 'css-putter'
const cssPutter = new cssPutter({rulesPrefix: '#my-app'})
const parsedCssWithPrefix = cssPutter.parse(css)
cssPutter.attachCssRules(parsedCssWithPrefix)

ignoreStyleSheetIds

if you use async loaded css, this option may help you.

Notice

whitespaces

A rule have whitespaces in the head, fails in parse.
Below is an example.

  div { margin: 0 }

rules prefix

rulesPrefix do not apply @xxxx rules

Not Supported CSS Rules

@charset
@import
@namespace

License

MIT

css inject css insert css

@infinitebrahmanuniverse/nolb-css-p @everything-registry/sub-chunk-1420 @zalastax/nolb-css-p

0.0.2

2 years ago

0.0.1

2 years ago