https://github.com/dielduarte/style-extractor
Extract all inline CSS from your HTML generating a css file for it.
https://github.com/dielduarte/style-extractor
Last synced: 10 months ago
JSON representation
Extract all inline CSS from your HTML generating a css file for it.
- Host: GitHub
- URL: https://github.com/dielduarte/style-extractor
- Owner: dielduarte
- Created: 2022-11-07T12:44:04.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-26T19:28:03.000Z (about 3 years ago)
- Last Synced: 2024-04-08T00:10:12.177Z (almost 2 years ago)
- Language: TypeScript
- Homepage:
- Size: 75.2 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Style Extractor
Extract all inline CSS from your HTML generating a css file for it.
## How to use
- First install the lib
```bash
npm install --save style-extractor
```
- Import the lib and use it
```js
import { extractStyle } from 'style-extractor';
const { html, css } = extractStyle(`html input here`)
console.log(html, css)
```
### Options
| Option | Values | Default |
|---|---|---|
| strategy: Strategy | Strategy.atomic \| Strategy.scoped | Strategy.atomic |
| classPrefix: string | string value | es- |
To configure the options you can pass an object as a second parameter, example:
```js
import { extractStyle } from 'style-extractor';
import type { Strategy } from 'style-extractor';
const { html, css } = extractStyle(
`html input here`,
{
strategy: Strategy.scoped,
classPrefix: 'my-prefix-'
}
)
console.log(html, css)
```
## Strategies
### Scoped
For each inline style attribute found, the lib will generate a unique class with the whole value.
e.g
Given the input:
```html
h1 { line-height: 20px; }
title
```
The HTML output would be:
```html
title
```
and the CSS output would be:
```css
.es-chrTOf { width: 100%;border: red; }
h1 { line-height: 20px; }
.es-dfoHTq { color: white; font-size: 14px; }
```
### Atomic
For each css declaration found, the lib will create a unique class and reuse the class on all elements that also have the same css declaration value.
e.g
Given the input:
```html
h1 { line-height: 20px; }
title
```
The HTML output would be:
```html
title
```
and the CSS output would be:
```css
.es-cwtpWi { width:100%}
.es-gSvEpd { border:red}
h1 { line-height: 20px; }
.es-jTfyaK { color:white}
.es-dhZwgM { font-size:14px}
```
@TODOS
- [ ] Option to create file in disk