Stylesheets Contain CSS Variables

[kookma]

CSS variables are very powerful and Tiddlywiki allows to use such CSS.

In a CSS or set of stylesheet files, the one contains the CSS variable, specially root variables shall be appeared in the fisrt place (e.g. in sequence).

Questions
Tiddlywiki, appends new tiddler tagged with stylesheet at the bottom and when you edit them, the goes to the end of que! So, TW itself has not any tool to keep stylesheet with CSS variable in correct order, except you manually put them in right order!

• is it good idea to use css variables in TW?
• what do you recommend to use css variables in TW and keep them in the right order to work?
• do you think list-after and list-before can help here?

[nilslindemann]

A quick hack which comes into my mind is to replace

<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">

with

<$list filter="[[title-of-my-tiddler-with-css-variables-and-mime-type]]=[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">

in $:/core/ui/PageStylesheet. Then that CSS tiddler will be the first which gets transcluded. Check in the dev tools, it is in the first style tag in the head.

[kookma]

@nilslindemann - thank you! good hack!
Just a question filter="[[run1]] [[run2]]" is a filter sets with implicit or! why did you use = filter prefix symbol? Is there any special reason?

[nilslindemann]

@kookma

I wanted to avoid that it gets dominantly appended, should it accidently be in the second run. In that case it would not be in the first position any more. When using = instead, it will stay in the first position, but it will get transcluded twice, because of no de-duplication. That is why I called it a "quick hack".

For example, try

<<list-links "[[HelloThere]] [[Learning]] =[[HelloThere]]">>

---

<<list-links "[[HelloThere]] [[Learning]] [[HelloThere]]">>

In the second list the "HelloThere" Tiddler is not on position 1 anymore.

But in general, it is better to do it like Jermolene suggests below – adding an empty field called "list-before". This will avoid duplication.

[Jermolene]

Hi @kookma adding an empty field called "list-before" to a stylesheet should cause it to be rendered first in the sequence.

Tiddlywiki, appends new tiddler tagged with stylesheet at the bottom and when you edit them, the goes to the end of que!

Editing a stylesheet tiddler shouldn't change its ordering except in one situation: where a shadow stylesheet is edited to become a non-shadow tiddler.

[nilslindemann]

@Jermolene

adding an empty field called "list-before" to a stylesheet should cause it to be rendered first in the sequence

Thanks, good trick!

@kookma

I noticed both tiddlers, the one defines CSS variables and the one uses these variables using var(--myvar) shall have type:text/css!
Am I right?

Yes, all CSS Tiddlers should have the content type text/css (And the $:/tags/Stylesheet tag).

[Jermolene]

Yes, all CSS Tiddlers should have the content type text/css (And the $:/tags/Stylesheet tag).

CSS tiddlers that use wikitext should use text/vnd.tiddlywiki (or omit the type field entirely).

[nilslindemann]

@Jermolene Sure, but, if I may nitpick, that is not a CSS Tiddler, but a CSS generating WikiText Tiddler :-)

[kookma]

I assume suitable rules pragma are needed here to use a text/vnd.tiddlywiki as stylesheet and still use css variables!

[pmario]

I assume suitable rules pragma are needed here to use a text/vnd.tiddlywiki as stylesheet and still use css variables!

The core uses some \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline pragmas, so that it is guaranteed, that "wikification" doesn't accidentally produce invalid CSS syntax.

Especially CamelCase could mess up CSS syntax. Using the rules above won't do any wikification except for rules mentioned in the pragma