rehype-minify-css-style

rehype plugin to minify `style` elements


Keywords
unified, rehype, rehype-plugin, plugin, html, minify, mangle, css, style, optimize
License
MIT
Install
npm install rehype-minify-css-style@2.0.2

Documentation

rehype-minify

Build Coverage Sponsors Backers Chat

rehype preset to minify HTML.

In
<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-language" content="en-US">
    <script src="index.js" type="text/javascript" language="javascript">
      alert(true);
    </script>
    <link rel="stylesheet" href="index.css" type="text/css">
    <title>Foo  &amp;  bar</title>
  </head>
  <body>
    <h1 class="foo foo">bar  bar</h1>
    <p id="alfred" id="alfred">  <strong>foo</strong> <em>bar</em> </p>
    <button type="BUTTON" onclick="javascript:return false">Alpha</button>
  </body>
</html>
Out
<!doctypehtml><html lang=en-US><meta charset=utf8><script src=index.js></script><link rel=stylesheet href=index.css><title>Foo &amp bar</title><h1 class=foo>bar bar</h1><p id=alfred><strong>foo</strong> <em>bar</em></p><button type=button onclick=return!1>Alpha</button>

Install

npm:

npm install rehype-preset-minify

Use

Plugins

The following plugins are included in the preset. They are mostly harmless (disclaimer: rehype-minify is quite young).

Other plugins

The following plugins are not included because they are potentially dangerous, can make sites slower in some cases, or need extra configuration. Read their readmes carefully before using!

Also: pass allowDangerousCharacters to rehype-stringify if you trust your content.

Benchmark

Here’s a benchmark comparing the results from html-minifier and rehype-minify. To summarize: differences are negligible, in fact, minifying HTML doesn’t matter much. What does matter is using good compressions, such as gzip. Note: html-minifier crashes on stackoverflow.

name raw gzip
original rehype-minify html-minifier original rehype-minify html-minifier
amazon 416.87KB 8.85% 23.05% 105.39KB 6.85% 21.62%
bbc 281.23KB 14.44% 16.39% 41.97KB 11.57% 13.07%
bootstrap 35.18KB 21.66% 22.08% 8.4KB 4.90% 5.08%
compat table 7.28MB 16.52% 16.80% 234.05KB 3.67% 5.37%
ecmascript 6.25MB 8.87% 9.18% 752.17KB 4.86% 4.87%
eloquent 80.09KB 6.44% 6.45% 19.13KB 1.29% 1.26%
github 128.92KB 13.36% 12.30% 33.72KB 4.51% 4.57%
google 12.13KB 7.97% 7.91% 5.29KB 4.96% 4.49%
guardian 940.44KB 3.90% 4.51% 130.18KB 1.97% 2.06%
html 11.11MB 3.35% 3.38% 1.66MB 5.42% 5.49%
linkedin 93.07KB 35.98% 36.10% 10.74KB 12.87% 13.09%
microsoft 184.04KB 9.55% 21.29% 38.28KB 4.82% 7.49%
nbc 1.59MB 4.85% 4.94% 191.42KB 1.21% 1.01%
npm 30.05KB 10.53% 10.09% 8.93KB 4.63% 4.12%
nytimes 1.55MB 7.41% 7.24% 145.64KB 4.19% 3.91%
rocketchat 50.58KB 31.44% 31.91% 11.39KB 12.46% 12.45%
slack 117.08KB 6.05% 5.24% 27.78KB 2.63% 2.08%
stackoverflow 112.67KB 31.50% 💥 19.96KB 10.12% 💥
twitter 261.7KB 9.31% 19.80% 47.36KB 3.75% 6.50%
vice 297.75KB 9.08% 8.87% 48.54KB 4.11% 3.93%
wikipedia 588.07KB 6.16% 6.81% 112.16KB 1.94% 1.87%
total 31.32MB 28.95MB 28.85MB 3.6MB 3.44MB 3.42MB

Huge differences in results are suspicious and may point to bugs.

💥 — Crash.

Security

Use of rehype-preset-minify is safe by default, if the tree is already safe. Other plugins can open you up to a cross-site scripting (XSS) attack. Use rehype-sanitize to make the tree safe.

To further optimize the result disregarding security, use the extra plugins above and pass allowDangerousCharacters to rehype-stringify.

Related

Contribute

See contributing.md in rehypejs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer