posthtml-minify-classnames
posthtml-minify-classnames copied to clipboard
posthtml
Remove Unfound doesn't remove classes from stylesheet
I expect removeUnfound to also remove classes from the styles. This allows reduction of utility stylesheets to their minimal.
Example:
<html>
<style>
#some-id {
text-transform: uppercase;
}
.header__intro {
color: blue;
}
.card--profile {
background: white;
}
.js-overlay {
display: none;
}
#js-button {
color: blue;
}
.unused_class {
color: red;
}
@media (min-width: 768px) {
.header__intro {
color: gray;
}
.unused_class {
color: red;
}
}
</style>
<body>
<svg style="display:none">
<symbol id="icon-location"><path d=""></path></symbol>
</svg>
<h1 id="some-id">Title</h1>
<p class="header__intro">OMG</p>
<div class="js-overlay"></div>
<div id="js-button"></div>
<div class="card--profile">
card content
</div>
<svg>
<use xlink:href="#icon-location"></use>
</svg>
<label for="username">Click me</label>
<input type="text" id="username">
</body>
</html>
Becomes:
<html>
<style>
#a {
text-transform: uppercase;
}
.a {
color: blue;
}
.b {
background: white;
}
.js-overlay {
display: none;
}
#js-button {
color: blue;
}
.c {
color: red;
}
@media (min-width: 768px) {
.a {
color: gray;
}
.c {
color: red;
}
}
</style>
<body>
<svg style="display:none">
<symbol id="b"><path d=""></path></symbol>
</svg>
<h1 id="a">Title</h1>
<p class="a">OMG</p>
<div class="js-overlay"></div>
<div id="js-button"></div>
<div class="b">
card content
</div>
<svg>
<use xlink:href="#b"></use>
</svg>
<label for="c">Click me</label>
<input type="text" id="c">
</body>
</html>
I think we can use the match helper in PostHTML to figure out whether a class or id exists in the source HTML, and remove it from the CSS if it doesn't.
