posthtml / posthtml-minify-classnames

📩 Rewrites classnames and ids in HTML and CSS to reduce file size.
MIT License
84 stars 14 forks source link

Remove Unfound doesn't remove classes from stylesheet #58

Open bramski opened 3 months ago

bramski commented 3 months ago

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>
cossssmin commented 2 months ago

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.