Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature request] Add style option to insert at the beginning of document #1793

Open
stanio opened this issue Jul 23, 2024 · 7 comments
Open

[Feature request] Add style option to insert at the beginning of document #1793

stanio opened this issue Jul 23, 2024 · 7 comments
Labels
enhancement

Comments

@stanio
Copy link

stanio commented Jul 23, 2024 •
edited
Loading

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:

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.
@tophf
Copy link
Member

tophf commented Jul 23, 2024

Judging by the diagram you can probably use a fake animation where from and to have the same color.

@stanio
Copy link
Author

stanio commented Jul 23, 2024

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:

While I could specify a transition, the property declaration I would like to "transition" would not have an effect, even when !important.

@stanio
Copy link
Author

stanio commented Jul 24, 2024

If I'm reading the diagram and related docs correctly, the only rules with greater priority than !important layer 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.

@tophf
Copy link
Member

tophf commented Jul 24, 2024

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?

@stanio
Copy link
Author

stanio commented Jul 24, 2024

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.

@tophf
Copy link
Member

tophf commented Jul 24, 2024

Then maybe just the important layer declarations should be lifted?

@stanio
Copy link
Author

stanio commented Jul 24, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@stanio @tophf