search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.42k stars 650 forks source link

[cssom] Disabling imported styleSheet #9538

Open 0xdevwrite opened 10 months ago

0xdevwrite commented 10 months ago

Is it expected behavior for a styleSheet that has been imported with @import and subsequently disabled to act as though it is still enabled?

Given the following document and external CSS file, I would expect the imported style to be disabled and the body text to not be red, however that does not seem to be the case.

/* red.css */
body {
  color: red;
}
<!DOCTYPE html>
<html>
  <head>
      <style>@import 'red.css'</style>
      <script>
        const importedStyleSheet = document.styleSheets[0].cssRules[0].styleSheet;
        importedStyleSheet.disabled = true;
        console.log(importedStyleSheet.disabled) // logs true, but body remains red
      </script>
  </head>
  <body>Should not be red</body>
</html
0xdevwrite commented 7 months ago

Following up on this: I'm unsure if this is intended spec behavior or an implementation issue in browsers. I believe the relevant part of the spec is this: https://drafts.csswg.org/css-cascade-3/#at-ruledef-import

If an @import rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import rule [...].

This seems like it could be interpreted to mean that @import is effectively syntactic sugar for copy and pasting in the contents of a different stylesheet so that it 'becomes' one stylesheet. If this is the case then I can see why disabling the imported stylesheet would behave as it does as it is effectively not a separate stylesheet.

However, the following makes it seem like this is just in the context of how to apply the cascade

declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the @import.

Can someone clarify what is meant by the spec? Does treating it as one stylesheet only apply in the context of the cascade?