Extract and replace inline CSS with classnames.
$ yarn add -D extract-inline-css
import extract from 'extract-inline-css'; extract('./index.html', { dist: './dist' });
This will generate extracted.css and result.html files inside dist/ directory.
If you want to get results in string format, set out: 'object' option:
import extract from 'extract-inline-css'; const { css, html } = extract('./index.html', { out: 'object' });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { background: #bada55; } </style> </head> <body> <h1 style="font-size: 22px; line-height: 1.2;">Hello world!</h1> </body> </html>
result.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1 class="h1_g4q7h2">Hello world!</h1> </body> </html>
extracted.css
body { background: #bada55; } .h1_g4q7h2 { font-size: 22px; line-height: 1.2; }
| Option | Type | Default | Description |
|---|---|---|---|
| cssFilename | string |
extracted.css |
Filename of the resulting CSS file |
| dist | string |
. |
Output directory path |
| extractGlobalStyles | boolean |
true |
Extract CSS from <style> tags |
| formatCss | boolean |
true |
Beautify CSS output |
| formatHtml | boolean |
false |
Beautify HTML output |
| htmlFilename | string |
output.html |
Filename of the resulting HTML file |
| keepStyleAttribute | boolean |
false |
Do not strip 'style' attributes from HTML tags |
| keepStyleTags | boolean |
false |
Do not strip <style> tags |
| out | 'file' | 'object' |
file |
Output format |
MIT