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.
When using the Critter with a css selector attribute contains or attribute starts with, then the Critter removes this selector even if its used.
this results to
but the expectation is that
[class*=' test-'] {background-color: green}
should be still present.