0.3.2 • Published 5 days ago
drop-inline-css v0.3.2
drop-inline-css
Parse HTML and drop unused CSS, inline it to HTML.
Installation
Deno
deno install -fr -A --name drop-inline-css \
https://raw.githubusercontent.com/marmooo/drop-inline-css/main/cli.js
Node
npm install drop-inline-css -g
Usage
import { dropInlineCss } from "drop-inline-css";
async function build() {
await dropInlineCss("test.html"); // -> stdout
const result = await dropInlineCss("test.html", {
output: "test.min.html",
});
}
build();
CLI
Usage: drop-inline-css [options] [input]
Parse HTML and drop unused CSS, inline it to HTML.
Arguments:
input Path of HTML file/direcotry
Options:
-V, --version output the version number
-c, --css [path] CSS path for inlining in HTML
-o, --output [path] Output path of HTML file/directory
-r, --recursive Recursively inline directories
-d, --show-dropped-css Show dropped CSS one line per head/template node
-h, --help display help for command
Examples
drop-inline-css input.html > inlined.html
drop-inline-css input.html > inlined.html
drop-inline-css -d input.html > dropped.css
drop-inline-css input.html --css dropped.css > inlined.html
drop-inline-css -r src -o docs
drop-inline-css -r src -o docs -c inline.css
input.html
<html>
<head>
<!-- optimization behavior changes depending on class name
"drop-inline-css": remove unused properties from CSS file and inline them
"inline-css": inline the contents of CSS file as is
-->
<link class="drop-inline-css" rel="stylesheet" href="inefficient.css"></link>
<link class="inline-css" rel="stylesheet" href="efficient.css"></link>
<link rel="stylesheet" href="keep.css"></link>
</head>
<body>
<p>styled</p>
</body>
</html>
inefficient.css
p { text-decoration: underline; } /* used -> inline */
span { font-size: 1rem; } /* unused -> drop */
efficient.css
pre { color: red; }
inlined1.html
<html>
<head>
<style>p { text-decoration: underline; }</style>
<style>pre { color: red; }</style>
<link rel="stylesheet" href="keep.css"></link>
</head>
<body>
<p>styled</p>
</body>
</html>
License
MIT
0.3.2
5 days ago
0.3.0
1 month ago
0.3.1
1 month ago
0.2.1
3 months ago
0.2.0
7 months ago
0.1.8
11 months ago
0.1.7
11 months ago
0.1.6
11 months ago
0.1.5
11 months ago
0.1.4
1 year ago
0.1.3
1 year ago
0.1.2
2 years ago
0.1.0
2 years ago
0.1.1
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.3
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.6
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago