Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mondial7/splattercss
Support library for css scoping. Splatter your css into inline-styles. Available on NPM.
https://github.com/mondial7/splattercss
css css-inject dom inline-styles styling-and-shadow-dom
Last synced: 6 days ago
JSON representation
Support library for css scoping. Splatter your css into inline-styles. Available on NPM.
- Host: GitHub
- URL: https://github.com/mondial7/splattercss
- Owner: mondial7
- License: mit
- Created: 2018-01-28T21:01:25.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-05T22:27:16.000Z (10 months ago)
- Last Synced: 2024-04-14T09:05:01.251Z (10 months ago)
- Topics: css, css-inject, dom, inline-styles, styling-and-shadow-dom
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/splattercss
- Size: 159 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Splatter Css 🥗
JS library to split and splatter your CSS rules into the style attribute of each related DOM element.
The idea first came as a trial for an alternative to ShadyCss while waiting for fully ShadowDom v1 support.
## Install
---
```bash
npm install splattercss
```
```js
// browser
// ES import
import SplatterCss from 'splattercss/index'
// Node
// NOTE: you might need some DOM enabler
// like https://www.npmjs.com/package/global-jsdom
const SplatterCss = require('splattercss')
```
## Usage
---
```html
```
```js
import SplatterCss from 'splattercss'
// Get HTML and pass it as String
// together with the styles to apply
const node = document.getElementById('wrapper')
const _styledHtml = SplatterCss.mesh(`
.red { color: red; }
.green { color: green; }
`, node.innerHTML)
// Update with the new HTML
node.innerHTML = _styledHtml
```
Result
```html
```
## API
---
`.mesh()` splatters the CSS in the HTML provided and returns the updated HTML as String. It will parse the CSS and distributes the styles in the HTML by matching the CSS selectors. It's combination of the two APIs described below.
Example
```js
const newHTML = SplatterCss.mesh(`
.red { color: red; }
.green { color: green; }
`,`
`)
// newHTML = `
//
//
// `
```
---
`.parse()` will parse a CSS string and build an array of Objects
```js
// @return
[ { selector:String, rules:String }, ... ]
```
**Note** It's not a linter tool. Wrong syntax CSS will be parsed anyways with no rising Exceptions. Eventually, with the possibility of loosing some rules on the way.
Example
```js
const cssArr = SplatterCss.parse(`
.red { color: red; }
.green { color: green; }
`)
// cssArr = [
// {
// selector: '.red',
// rules: 'color: red;'
// },
// {
// selector: '.green',
// rules: 'color: green;'
// }
// ]
```
---
`.inject()` intermediary function that accepts the Array result of `.parse()` and the DOM as a String. It will injects the styles defined in the given DOM string and return the modified string.
Example
```js
const cssArr = [
{
selector: '.red',
rules: 'color: red;'
},
{
selector: '.green',
rules: 'color: green;'
}
]
const newHTML = SplatterCss.inject(cssArr, `
`)
// newHTML = `
//
//
// `
```
## License
---
MIT License (MIT)
## Contributing
---
Feel free to contribute and submit an issue or a pull request for any bug or enhancements.