Experiment: add special syntax for CSS variables #8
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
At compile time, keywords with the namespace "var" get transformed to refer to CSS variables. Map keys like `:var/font-size` become `:--font-size` and map values become `:var(font-size)`. This syntax seems nice since, at least in the "resolve" version, it *looks like* the equivalent CSS. However, this syntax means that all vars are global, unnamespaced, which is perhaps not ideal. So, this is sort of a proof of concept. Perhaps a better syntax would be eg `::*font-size*`. This is somewhat familiar due to clojure's use of earmuffs for dynamic vars, and also allows namespacing with native clojure namespaces. "Global" vars if desired could still be created as eg `:global/*font-size*`.
Don't remember why I removed these, but the tests do pass
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
At compile time, keywords whose names are surrounded in
*ear-muffs*get transformed to refer to CSS variables. When used as a map key,:*font-size*becomes:--font-size, and:my.namespace/*font-size*becomes:--my-namespace--font-size. Keywords used as map values get transformed the same, but are additionally wrapped byspade.runtime/->css-var, which results in garden transforming it to egvar(--my-namespace--font-size). The advantage of this approach compared to the original one (see below) is that any var usage creates just a single keyword object, instead of two, that can be reused throughout the compiled code.This is basically compile-time syntactic sugar for people wanting to use CSS variables in a way a somewhat idiomatic way.
TODO:
Original description:
At compile time, keywords with the namespace "var" get transformed
to refer to CSS variables. Map keys like
:var/font-sizebecome:--font-sizeand map values become:var(font-size). This syntaxseems nice since, at least in the "resolve" version, it looks like
the equivalent CSS.
However, this syntax means that all vars are global, unnamespaced, which
is perhaps not ideal. So, this is sort of a proof of concept. Perhaps a
better syntax would be eg
::*font-size*. This is somewhat familiar dueto clojure's use of earmuffs for dynamic vars, and also allows
namespacing with native clojure namespaces. "Global" vars if desired
could still be created as eg
:global/*font-size*.