[css-cascade-5] imported layers syntax : quotes or not?

[raphaelgoetter]

According to specs, a Layer name in an @ import file should be written without quotes : @import url(bootstrap.css) layer(bootstrap); (example 27 and others)

However, browsers support seems different upon using quotes or not :

• @import url("...") layer(bootstrap); (without quotes) : not OK on Chrome, Firefox, Safari (only tested on Mac)
• @import url("...") layer("bootstrap"); (with quotes) : OK on Chrome, Firefox, Safari (only tested on Mac)

See a live example :

https://codepen.io/raphaelgoetter/pen/ExrJBgb?editors=1100

[romainmenke]

Hi @raphaelgoetter,

Are you sure that your test is accurate?

See how !important interacts with cascade layers : https://developer.mozilla.org/en-US/docs/Web/CSS/important

When it comes to important declarations, the cascade origin and layer orders are reversed.

---

I am very certain that browsers do not support quotes around layer names and correctly implemented the specification.

A quick demo : https://codepen.io/romainmenke/pen/bGzXpjK

@layer low-importance, high-importance;

@import url("data:text/css,strong%7Bcolor%3Agreen%7D") layer(high-importance);

@import url("data:text/css,strong%7Bcolor%3Ared%7D") layer(low-importance);

@import url("data:text/css,i%7Bcolor%3Agreen%7D") layer("high-importance");

@import url("data:text/css,i%7Bcolor%3Ared%7D") layer("low-importance");

<strong>this is green or red when browsers support unquoted layer</strong><br>
<i>this is green or red when browsers support quoted layers</i>

[raphaelgoetter]

Oh, you're absolutely right!

Considering my goal is to override all the Boostrap rules (!important or not) the plan has to be...

• separate !important rules from the others
• @import classic rules from BS in low-importance layer
• @import important rules from BS in high-importance layer

That seems so counter intuitive to me 🤯

[romainmenke]

I think the better way to solve this is if bootstrap provides a variant of its styles without !important and using cascade layers instead.

Maybe that is something that bootstrap maintainers are already working on?