Order of Stylesheet from a Plugin

[kookma]

I use TW 5.2.1 when I install a plugin contains some stylesheets, they appear at the top before $:/themes/tiddlywiki/vanilla/base
Has anybody else experienced such issue?

To reproduce:
1- open https://talk.tiddlywiki.org/t/advanced-search-in-fields-plugin-update-0-2-0/2019
2. download and drag and drop the two JSON into a empty-5.2.1.html
3. open $:/ControlPanel > Info > Advanced > Stylesheet
4. See the plugin stylesheet before $:/themes/tiddlywiki/vanilla/base

[pmario]

You can use ControlPanel : Info : Advanced : Stylesheet tab and use the tag dropdown to sort it

[kookma]

Thank you Mario!
Don't you think this is a bug? An ordinary user install plugins and encounter such error?
Is this somehow related to issue with tag sorting I have seen recently reported here: #6383 and here #6382

[Jermolene]

Hi @kookma

Just to clarify, has this behaviour changed in v5.2.1?

The stylesheet ordering is determined by this filter expression in $:/core/ui/PageStylesheet:

[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]

The shadows+tiddlers part means that shadow tiddlers will be listed before ordinary tiddlers. That is intended to make it easier for end users to override styles set up in shadow tiddlers.

Generally, it's recommended to write stylesheets in such a way that the ordering doesn't matter. This can be done by writing a selector with greater specificity than the existing one (for instance, I often prefix selectors that occur in the core stylesheets with html body.tc-body ... to ensure higher specificity).

[kookma]

Hi @Jermolene,

Just to clarify, has this behaviour changed in v5.2.1?
I tested in 5.1.23 and the problem exists, i.e my plugin stylesheet appears before $:/themes/tiddlywiki/vanilla/base and $:/themes/tiddlywiki/snowwhite/base.

Generally, it's recommended to write stylesheets in such a way that the ordering doesn't matter.

Yes, I think this is the fastest way to resolve the issue I encounter!

[Jermolene]

Thanks @kookma

[pmario]

Generally, it's recommended to write stylesheets in such a way that the ordering doesn't matter. This can be done by writing a selector with greater specificity than the existing one (for instance, I often prefix selectors that occur in the core stylesheets with html body.tc-body ... to ensure higher specificity).

Many of the core CSS rules already have a very high specificity, which makes it hard to overwrite them. ...

IMO the first problem is, that most users even don't know what "specificity" in CSS is and how to use it. Some time ago I did find a short 11min video that explains the base concept well. https://www.youtube.com/watch?v=CHyPGSpIhSs

The second problem is, that the $:/themes/tiddlywiki/vanilla/base CSS has grown for many many years now. ... While it has a relatively clean structure it got a bit messy over time. ...

So "ordering" the stylesheet tiddlers is the easiest way in most cases to fix those problems.

Proposal

We may add the $:/tags/Stylesheet tiddler as a shadow tiddler to the core and give it a list-field with some basic elements in the list.

This gives plugin-authors the possibility to use list-before and list-after with their plugins. I think for most problems a list-after: $:/themes/tiddlywiki/snowwhite/base will do the trick.

The suggested list is: $:/themes/tiddlywiki/vanilla/base $:/themes/tiddlywiki/snowwhite/base ... for the beginning

[Jermolene]

This gives plugin-authors the possibility to use list-before and list-after with their plugins. I think for most problems a list-after: $:/themes/tiddlywiki/snowwhite/base will do the trick.

Thanks @pmario – I don't think we need to have $:/tags/Stylesheet as a shadow tiddler with a list field in order for uses to be able to use list-before or list-after.