Open bramski opened 3 months ago
I expect removeUnfound to also remove classes from the styles. This allows reduction of utility stylesheets to their minimal.
removeUnfound
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.
match
I expect
removeUnfound
to also remove classes from the styles. This allows reduction of utility stylesheets to their minimal.Example:
Becomes: