https://github.com/ikmnjrd/css-putter
css-putter apply CSS file on a web page at a time, whenever you hope yourself timing.
https://github.com/ikmnjrd/css-putter
Last synced: about 2 months ago
JSON representation
css-putter apply CSS file on a web page at a time, whenever you hope yourself timing.
- Host: GitHub
- URL: https://github.com/ikmnjrd/css-putter
- Owner: ikmnjrd
- License: mit
- Created: 2022-10-01T10:53:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-15T05:59:53.000Z (over 1 year ago)
- Last Synced: 2024-04-22T15:25:05.969Z (about 1 year ago)
- Language: CSS
- Homepage:
- Size: 118 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# css-putter
css-putter apply CSS file on a web page at a time, whenever you hope yourself timing.
## Install
```bash
npm install css-putter
```
```bash
yarn add css-putter
```
## Usage
```javascript
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
/* ... */
I hope any rules do not apply here
```
```javascript
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.
```css
div { margin: 0 }
```
### rules prefix
`rulesPrefix` do not apply `@xxxx` rules
## Not Supported CSS Rules
- @charset
- @import
- @namespace
## License
MIT