Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Experiment: add special syntax for CSS variables #8

Merged
merged 8 commits into from
Mar 20, 2021
Merged

Conversation

dhleong
Copy link
Owner

@dhleong dhleong commented Nov 23, 2020

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 by spade.runtime/->css-var, which results in garden transforming it to eg var(--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:

  • Handle keywords not in map-value position (for example, within vectors)

Original description:

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*.

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
@dhleong dhleong merged commit 22c673e into master Mar 20, 2021
@dhleong dhleong deleted the dhleong/css-vars branch March 20, 2021 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant