ornament
ornament copied to clipboard
lambdaisland
Clojure Styled Components
This PR updates griouette to v0.0.10 while still mainting backward compat i.e. ornament will still be using Tailwind v2 bindings in girouette instead of using the updated Tailwind v3 functions....
This should work for a single value. ``` (defstyled myelem :div ([html-attr-value] ^{:html-attr-key html-attr-value} ; attrs for outer html div [: [:h1 "Hello World"]])) (myelem "val") => Hello World ```...
Girouette v0.0.8 introduced support for TW v3. Along with it, they made some [breaking changes](https://github.com/green-coder/girouette/blob/master/CHANGELOG.md#breaking-changes) such that we can still continue supporting TW v2 if we would like. Tailwind v3...
it would be super dope to get clj-kondo to recognize `o/defstyled` :)
DON'T MERGE Trying out a different approach for how to handle attrs for components that have a render fn.
Is there a best practice to approximate a tailwind kind of flow, using keywords as style-tokens in hiccup. I want to avoid having to "name" every uniquely-styled chunk of html...
``` (o/defstyled table-body-el :div {:display :grid} [:b {:border-right "1px solid grey"}]) (render-to-string [table-body-el [:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a 1][:a...
`(o/defstyled Test :div {:color :red} [:p :span {:color :blue}])` expand to this css string => .ns__Test{color:red}.ns__Test p{color:blue} expected is => .ns__Test{color:red}.ns__Test p span{color:blue} Here's the Garden rule [doc](https://github.com/noprompt/garden/wiki/Syntax#rules)
Hello, I am having some huge problems in order to get the `:ring-1` styles applied. It seems to be broken. When the styles `:ring-1 :ring-secondary-body-border` are applied, I get: ```css...
Currently the `.animate-*` classes from tailwind don't render correctly. ```clojure (o/defstyled test-line :div :bg-blue-400 :animate-pulse ([] [:])) (o/as-garden test-line) [".com_thehumbleai_chrome-ext_util_macros__test_line" {:--gi-bg-opacity 1, :background-color "rgba(96,165,250,var(--gi-bg-opacity))"} [{:animation "pulse 2s cubic-bezier(0.4,0,0.6,1) infinite"} {:identifier...