Use CSS variables instead of writing to the CSS template

[gadenbuie]

(Even using {sass} would be better.)

I do something a little unusual in countdown and write the CSS file on the fly for the first timer included in the document. That's why you get a message about a file in the temp dir when using cache: true in Quarto (or cache = TRUE in knitr), since the temp directory changes between sessions and the CSS resources for countdown aren't found where they're supposed to be.

That's a design decision from my very early days learning htmltools; these days I would use CSS variables to avoid this problem.

Originally posted by @gadenbuie in #27 (comment)

I think what I'd want to do, to maintain the countdown() function arguments, would be to replace the whisker template variables with CSS variables and then include the CSS variables in the head of the htmlDependency(). Pretty sure that would cache correctly and still work with the first-definition-wins approach.

Actually, the variables (for non-missing arguments) could be set within each timer so that you could still use the color and style arguments to overwrite individual timers. 🤔