html-styles-inliner-cli
v1.2.5
Published
Command line tool, that inlines styles from the provided html file. This tool inlines styles from both <styles /> and <link /> tags
Downloads
3
Maintainers
vorbertReadme
html-styles-inliner-cli
CLI tool, that makes it possible to inline styles inside of the html file.
html-styles-inliner-cli inlines the styles with the usage of both <link> and <style/> tags.
Table of contents
Instalation
using npm:
npm install html-css-inliner-cliUsage
inline --input <path to html file> --output <path, where the file will be generated>Example
inline --input ./index.html --output ./build/another-directory/inlinedIndex.htmlNote
You can eiter use command using either the inline and html-styles-inliner-cli as the name of the command.
eg.:
inline --input ./index.html --output ./inlined.htmlhtml-styles-inliner-cli --input ./index.html --output ./inlined.htmlThe execution of those 2 commands will have the exact same results.
Options
-i, --input <path> (required)
path to the html file, which styles you need to inline.
-o, --output <path> (optional)
path, where the html file, with inlined styles, will be generated.
Note
If no path is specified, then the file will be generated in the same directory as the original file. Generated file will have the same name as the original file, but with the prefix of "inlined-".
For example, if the input file path is ./public/index.html then the file will be generated as ./public/inlined-index.html
So the following command:
inline --input ./public/index.htmlhas the same results as
inline --input ./public/index.html --output ./public/inlined-index.htmlExamples
file structure:
- partials
> index.html
> styles
> main.cssindex.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example usage of html-styles-inliner-cli</title>
<link rel="stylesheet" href="./styles/main.css" />
</head>
<body>
<div class="container">
<p class="container--text">Example</p>
</div>
</body>
</html>main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #192841;
color: #fff;
}
.container {
position: absolute;
top: 50%;
left: 50%;
padding: 0.75rem 1rem;
transform: translate(-50%, -50%);
background-color: #2a3f64;
border-radius: 0.5rem;
}
.container--text {
font-size: 1.15rem;
}Command:
inline --input partials/index.html --output public/inlined-index.htmlWill result in:
file structure:
- partials
> index.html
> styles
> main.css
- public
> inlined-index.htmlGenerated inlined-index.html:
<!DOCTYPE html>
<html lang="en" style="box-sizing: border-box; margin: 0; padding: 0;">
<head style="box-sizing: border-box; margin: 0; padding: 0;">
<meta
charset="UTF-8"
style="box-sizing: border-box; margin: 0; padding: 0;"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
style="box-sizing: border-box; margin: 0; padding: 0;"
/>
<title style="box-sizing: border-box; margin: 0; padding: 0;">
Example usage of html-styles-inliner-cli
</title>
</head>
<body
style="background-color: #192841; box-sizing: border-box; color: #fff; margin: 0; min-height: 100vh; padding: 0;"
>
<div
class="container"
style="background-color: #2a3f64; border-radius: 0.5rem; box-sizing: border-box; left: 50%; margin: 0; padding: 0.75rem 1rem; position: absolute; top: 50%; transform: translate(-50%, -50%);"
>
<p
class="container--text"
style="box-sizing: border-box; font-size: 1.15rem; margin: 0; padding: 0;"
>
Example
</p>
</div>
</body>
</html>Current support
Currently html-css-inliner-cli does not support inlining styles, that are being imported with the url, not the local path.
For example, if the file contains link tag like that: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">, then it won't work.
But if the link tag looks like that: <link rel="stylesheet" href="styles/bootstrap/4.3.1/css/bootstrap.min.css">, then it should work.
Future changes
- Allowing inlining of the styles with the URL import,
- Better error detection,
- ~~Optimization of the args reading~~ ✔️,
- ~~Shorter substitute for the CLI options. Eg.:
--inputwould be also allowed as-i~~ ✔️, - Tests for the development purposes.
License
html-css-inliner-cli is released under the MIT License.