How can stylesheets access variables?

[twMat]

[how about this?]

@CodaCoder

I don’t see how that’s going to work – at least, not in the way you’re hoping for. Where a given specificity is chosen, the browser will always choose the last one found (in source order).

If specificity is the reason you object: The premise for the OP is to outsmart that by using TW to create selectors that are very specific. For example, the data-tiddler-attribute already makes this possible, so to not e.g color all tiddlers backgrounds.

To show what I mean with “sending out contextual variables”, here’s a hypothetical examle, using the fictional $sendtostylesheet widget:

<$list filter="[tag[favourite]]">
<$sendtostylesheet
	$stylesheet=mystylesheet
	tid=<<currentTiddler>>
/>
</$let>
</$list>

title: mystylesheet
tags: $:/tags/Stylesheet
[data-tiddler-title="$tid$"] {background:"{{$tid$!!background}}"}

[saqimtiaz]

@twMat your ephemeral example is one that reminds me of the CSS custom properties approach that I mentioned earlier.

Example:

stylesheet:

.mystuff *{
    background: var(--bg-color);
}

wikitext:

<div class="mystuff">
    <$let mycolor="red">
        <span style=`--bg-color:$(mycolor)$;`>''Hello''</span>
    </$let>
</div>

Combined with fallback values and inheritance for custom CSS properties this can be very flexible. I use this approach a fair bit for UI components.

[CodaCoder]

@twMat

For example, the data-tiddler-attribute already makes this possible, so to not e.g color all tiddlers backgrounds.

Of course. If that were my problem, I wouldn’t put it in a style block (in a <$list>). I’d put it in a regular stylesheet tiddler.

[twMat]

@saqimtiaz

wikitext:

<div class="mystuff">
    <$let mycolor="red">
        <span style=`--bg-color:$(mycolor)$;`>''Hello''</span>
    </$let>
</div>

Nice! - but that is an embedded style. To give a still small “counter example”; Can you add a ::after pseudo element to it (showing, say, content:"x"). I think one needs a separate styleblock/sheet to do that.

[saqimtiaz]

@twMat

Nice! - but that is an embedded style. To give a still small “counter example”; Can you add a ::after pseudo element to it (showing, say, content:"x"). I think one needs a separate styleblock/sheet to do that.

I am afraid you have lost me there, I am not sure what it is you are asking for or what your objection is. I shared an example of using a variable from wikitext content in the stylesheet, as you requested. Note that the stylesheet and the wikitext work together and cannot be considered in isolation.

[twMat]

Ah, sorry, my point was just that there are some things that I don’t think can be solved using that method - but you of course already made that clear in previous posts, so, yeah, you’re right. CSS custom properties is a good idea when applicable, thanks

[saqimtiaz]

@twMat

Can you add a ::after pseudo element to it (showing, say, content:"x").

Example of adding a ::after pseudo element with the content hi

stylesheet:

.mystuff *{
    background: var(--bg-color);
}

.mystuff span ::after{
    content: var(--content);
}

wikitext:

<div class="mystuff">
    <$let mycolor="red">
        <span style=`--bg-color:$(mycolor)$;--content:"hi"`>''Hello''</span>
    </$let>
</div>

The only real annoyance with using CSS custom properties is that you cannot use the style.* widget attributes. I keep forgetting this as I have it patched in my own wikis and need to submit a PR for it as some point.

[CodaCoder]

@saqimtiaz

<span style=–bg-color:$(mycolor)$;–content:“hi”>

Joyous.   

[twMat]

Very cool stuff! I had no idea that was possible. Thanks for showing us!

[Springer]

While it’s not specifically aimed at variables, those interested in this conversation may also enjoy reviewing this thread: How to use the colour macro as an attribute value - #9 by jeremyruston

In particular, wikitext can be used within a color definition, and (I can confirm) can also be pasted into the color field. (The standard color chooser makes this awkward to do, but you can overwrite the color field by “adding” a field named color, with the wikitext as its value.)

How to use the colour macro as an attribute value

TiddlyWiki actually allows arbitrary wikitext in a palette colour definition. So something like this should work as things stand: page-background: <%if {{$:/Something}} %>red<%else%>green<%endif%> In practice, the core palettes only use embedded <<colour>> macros, and so I would be surprised if there were any palettes out there that do anything more elaborate. So, if we were to adopt the regex approach we would need to document the resulting restrictions. My instinct, though, is that there …

[TW_Tones]

@CodaCoder

ll CSS is global (to the page) howsoever it was produced.

• This may be true in general.
• Of note however, in tiddlywiki this is not 100% true, CSS can be present but not active by dint of not having the stylesheet tag, or being included in some way.
• To some degree TiddlyWiki has a meta layer on top of html and CSS which can determine what is realised in the page.

[twMat]

OK, the real usecase is the just released static plugin.

The embedded styles prominently reside in the plugins core tiddler. As seen, they rely heavily on access to a few variables.

I have no idea how to achieve the result without the styles accessing those variables - which, AFAICT, means they must be directly embedded, or trancluded, into there.

If anyone has a working method to avoid the embedding, I’d appreciate it.

[TW_Tones]

How did you go, did you solve this?

As I understand it some css stylesheets, containing variables, are wikified before use, thus can access the variables. For static representations you will need to do this before generating the static html, since the variables are not available outside tiddlywikis engin.

[twMat]

@TW_Tones

How did you go, did you solve this?

But I addressed exactly this in my last post above yours (!?)

[TW_Tones]

But there remains outstanding issues?, perhaps now a more minimal stylesheet to include?

[twMat]

Well, inside this tiddler there is a significantly big embedded styleblock that needs to access the surrounding variables. I don’t know how to otherwise achieve the effects of that styling.

[TW_Tones]

These were designed to allow exporting almost any possible tiddler as a static tiddler.

Perhaps you can start without all this and add back to build a minimal CSS, this was in part why I thought about adding a way to build and include static tiddler templates.

• For example in your export why even bother with the tiddler frame, just make it a webpage?
• Perhaps you could include (by reference not in the file) to an external stylesheet publicly available on the internet/CDN, and allow specific css/elements be overridden as needed.
  • To make it easy perhaps the in wiki tiddler could use this same external style sheet? a type of WYSIWYG

[CodaCoder]

@twMat Have a play with this, Mat…

\define rule-1( )
 .tc-story-river:has([data-radio=<<taguri>>]:checked) [data-id=<<id>>]
\end

<$let taguri=my-tu id=my-id>

<code>&darr;</code> <span>Inspect the style element below me <code>&darr;</code></span>

<style>
<<rule-1>> {
	display:block;
}
</style>

[twMat]

Thanks, I testing around but return to the same problem so, to ensure I understand you example, may I ask you to insert the closing </$let> tag please? That is very much what the issue is about. (Without that closing tag, the styleblock becomes embedded.)

[CodaCoder]

@twMat

may I ask you to insert the closing </$let> tag please?

Its not needed since the <$let> is a shim to get the code working. In your actual code, taguri et al are defined “outside”, correct? So my “lets” are just a means to get the demo up and running.