stylus
stylus copied to clipboard
openstyles
[Feature request] Add style option to insert at the beginning of document
Feature
Description
Add a style option to insert its <style> element at the beginning of the document (possibly at the beginning of <head>) vs. currently (the default) at the end of the document. This would allow to override !important anonymous @layer author styles occurring earlier in the document. See the priority diagram at:
-
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#description
The first declared layer gets the lowest priority and the last declared layer gets the highest priority. However, the priority is reversed when the
!importantflag is used.
CSS Code
https://codepen.io/Stanimir-Stamenkov/details/rNELrxj
<style>
/* Author style */
@layer {
body {
color: red !important
}
}
</style>
<p>Foo bar</p>
<style>
/* "User" Stylus style */
@layer {
body:not(:empty) {
color: green !important
}
}
</style>
System Information
- OS: Windows
- Browser: Firefox 129
- Stylus Version: 1.5.48
Additional Context
The latest version of Dark Reader places its styles in anonymous layer declarations. There are a few annoying rules including darkreader/darkreader#8906:
html {
background-color: #212121 !important
}
I've previously overridden these by having a style with a more specific selector:
html:not(:empty) {
background-color: unset !important
}
but it doesn't work with styles placed in anonymous layers.
Judging by the diagram you can probably use a fake animation where from and to have the same color.
If I'm reading the diagram and related docs correctly, the only rules with greater priority than !important layer rules, are !important rules in user and user-agent style sheets, and transitions:
-
https://developer.mozilla.org/en-US/docs/Web/CSS/important#sect1
Note: All important declarations take precedence over all animations.
!importantis not valid within @keyframes animation declarations. ... Does anything have precedence over important declarations? Yes, transitions.
While I could specify a transition, the property declaration I would like to "transition" would not have an effect, even when !important.
If I'm reading the diagram and related docs correctly, the only rules with greater priority than
!importantlayer rules...
Named layers are fine in my specific use case as I could apply my previous approach (more specific selector) targeting specific layer names. Anonymous layers appear trickier as every declaration generates a unique layer that cannot be further amended (I wonder if that's a deliberate spec behavior), and only the order of the anonymous @layer declarations matters.
I wonder if the extension's default behavior should be to extract all @layer conditions with !important inside and put them at the beginning of DOM, i.e. no option?
Yes, it could be evaluated like that without introducing an option. An explicit setting might still turn out necessary if unexpected results appear because of possible combinations of !important and regular declarations in a single rule.
I can't currently assess if it could be deemed "too custom" behavior with its own set of side effects, hence I've suggested the addition of an option. Then yes, it could be a solution if it doesn't break another major behavior – I can't think of one at the moment.