GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
https://npm.im/critters-webpack-plugin
Apache License 2.0
3.42k stars 108 forks source link

Used css attribute selector gets removed by critters #147

Open michael-hein opened 9 months ago

michael-hein commented 9 months ago

When using the Critter with a css selector attribute contains or attribute starts with, then the Critter removes this selector even if its used.

 const critters = new Critters({
    // optional configuration (see below)
  });

  const html = `
    <style>
      .red { color: red }
      .blue { color: blue }
      [class*=' test-'] {background-color: green}
    </style>
    <html>
    <body>
    <div class="blue test-green">I'm Blue</div>
    </body>
    </html>
  `;

  const inlined = await critters.process(html);

  console.log(inlined);

this results to

Inlined 17 B (15% of original 109 B) of inline CSS.
Time 10.45

    <style>.blue{color:blue}</style>
    <html data-critters-container>
    <body>
    <div class="blue test-green">I'm Blue</div>
    </body>
    </html>

but the expectation is that [class*=' test-'] {background-color: green} should be still present.