Not only this, but if you had a sharp eye you must have caught that the animation: pules 2s ... is missing from this garden.
Now I have spent some time debugging and I can understand why all of this happening underneath. Need to try and figure out a clean solution to solve this, but it most definitely involves manually adding keyframes as a part of the global registry instead of tying it to specific components.
Debugging notes
For a minute here, let's keep aside ornament and girouette and let's start with garden.
Garden's css compiler expects a hiccup like structure to cascade css.
@keyframes myanim {
div 100% {
height: 10px;
}
}
div p {
animation: myanim 2s;
}
I have also tested this with girouette's processor @green-coder and the processor is also not handling this case correctly 🤔
Am I missing something here? 🤔 If not, then we somehow need to raise this rule into a global space and render the keyframe CSSAtRule at the top level. Now I am not sure if this should be done in garden or ornament
An alternative is to not support tailwind animations, and instead use the set-tokens to define custom animations using garden's defkeyframes.
Currently the
.animate-*
classes from tailwind don't render correctly.Then running
(print (gc/compile-css {:pretty-print? true} (o/as-garden test-line)))
Notice the addition of classnames in front of the offset percentages
.com_thehumbleai_chrome-ext_util_macros__test_line 0%
which is invalid css syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframesNot only this, but if you had a sharp eye you must have caught that the
animation: pules 2s ...
is missing from this garden.Now I have spent some time debugging and I can understand why all of this happening underneath. Need to try and figure out a clean solution to solve this, but it most definitely involves manually adding keyframes as a part of the global registry instead of tying it to specific components.
Debugging notes
For a minute here, let's keep aside ornament and girouette and let's start with garden.
Garden's css compiler expects a hiccup like structure to cascade css.
For top level css, it expects var args, so something like:
Now if we try
We get back a
CSSAtRule
which garden understands to convert to css as follows:BUT, garden does not understand an animation rule as a part of a tag:
I have also tested this with girouette's processor @green-coder and the processor is also not handling this case correctly 🤔
Am I missing something here? 🤔 If not, then we somehow need to raise this rule into a global space and render the keyframe
CSSAtRule
at the top level. Now I am not sure if this should be done ingarden
orornament
An alternative is to not support tailwind animations, and instead use the
set-tokens
to define custom animations using garden'sdefkeyframes
.Any thoughts / ideas?