extract-inline-css
Extract and replace inline CSS with classnames.
Installation
$ yarn add -D extract-inline-cssUsage
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'
});Input:
<!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>Output:
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;
}Options
| 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 |
License
MIT