[Bug] No longer possible to @import stylesheets in custom CSS

[nickforddev]

Abstract

As of this commit, it is no longer possible to @import a stylesheet in custom css, as imports must be at the top of the stylesheet. Per this commit, @media all {} is now the first line of CSS, preventing any @imports https://github.com/piroor/treestyletab/commit/ea2e9dc58da3f076d05833fec7bffbbfec640ac6#diff-d7688142e105b12fdc7b3e91aa215fbde59c182395fc272bb026eef14bed3a05R391

I understand that this "feature" may not be something that was intended, so I'll explain my use-case. I use pywal to generate color schemes that are automatically applied to most of the software I use. I run a local server that hosts a css file with variables containing the current theme colors, so when I change the color scheme, all i have to do is toggle TST off and on again, and the colors are updated.

This can also be taken a step farther, and I can just @import a stylesheet from my dotfiles repo, so I don't have to open TST preferences or use the Codemirror text editor, I can just edit TST styles in my editor of choice, which is great.

I have confirmed that if you use developer tools to edit the CSS, removing the @media all {} query, the issue is no longer present.

I understand that that query was added to allow users to write simpler queries, which is quite nice. Perhaps an additional field in preferences to import stylesheets, or make the "write simpler queries" feature optional?

Steps to reproduce

1. Start Firefox with clean profile.
2. Install TST.
3. Save a CSS file somewhere locally called style.css, containing the following:

   * {
   color: red !important;
   }

4. Host the css file on a local webserver
   • For example: npx http-server <path to folder containing css file> -p <some port> -c-1 -d false
5. Add @import url('http://localhost:<webserver port>/style.css') to the beginning of custom css in TST preferences

Expected result

CSS @import should work, in this specific example all the text in the sidebar should be red.

Actual result

CSS @import silently fails / is ignored. It looks like the network request is made, but the styles are not applied.

Environment

• Platform (OS): MacOS
• Version of Firefox: 102.0.1 (64-bit)
• Version (or revision) of Tree Style Tab: 3.8.26 (2022.7.15):

[piroor]

With recent commits now TST don't use @media hack anymore. Now TST automatically increase specificity of CSS selectors in the user styles with the hack: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#increasing_specificity_by_duplicating_selector

[nickforddev]

Excellent! Thank you for the update, closing.