search

Stranger6667 / css-inline

High-performance library for inlining CSS into HTML 'style' attributes
https://css-inline.org/
MIT License
232 stars 29 forks source link

Support for `@layer`? #340

Open malectro opened 5 months ago

malectro commented 5 months ago

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

Very excited to try this library! I realize this is a pretty new CSS feature, but it looks like css-inline ignores layers. Is this something you think would be easy to add? I'd be happy to try to help.

My company is hoping to add them to our CSS as a way to avoid new stuff clashing with extremely specific legacy selectors, but everything we write has to be able to safely inline for email.

example:

<style>
@layer legacy {
  div > span {
    font-weight: bold;
    color: red;
  }
}
span {
  color: blue;
}
</style>
<div><span/></div>

result:

<html><head>
</head><body><div><span style="color: blue;"></span></div>
</body></html>

expected

<html><head>
</head><body><div><span style="font-weight: bold; color: blue;"></span></div>
</body></html>
Stranger6667 commented 5 months ago

Hi @malectro!

This library uses selectors & cssparser from Mozilla's Servo, so I think syntactically it is supported. However, it explicitly ignores all at-rules.

I am open to adding support for this, but I'd like to dive deeper into the spec for this matter. Also, if you'd like to work on it yourself, I'd be happy to assist you with reviewing PRs or giving more details about implementation.

malectro commented 5 months ago

Hi @Stranger6667 thanks for the quick response!

Good to know about the Mozilla Servo stuff. It seems like it might not be that hard to support in that case. (Hopefully the spec isn't more complicated than it seems.) I'll take a crack at it when I have the time.