Documentation and example usage are hosted in devcards here:
https://dvingo.github.io/cljs-emotion/#!/dv.cljs_emotion.devcards
https://dvingo.github.io/cljs-emotion
For info about emotion itself, see:
https://emotion.sh/docs/introduction
Include it in your clojure project dependency list (see most recent version on Clojars).
And install emotion:
npm install @emotion/react @emotion/styledThe main namespaces are:
dv.cljs-emotion - Plain React components/elements
With API: defstyled, jsx, css, global-style, theme-provider, keyframes
dv.cljs-emotion-reagent - Reagent components
With API: defstyled, jsx, css, global-style, theme-provider, keyframes
dv.emotion-helix-dom
DOM elements for use with helix that support the :css prop, with the same API as the components in the helix.dom namespace.
(require [dv.cljs-emotion :refer [jsx css defstyled keyframes global-style theme-provider]])
(defstyled sample1 :div
{:background-color "RebeccaPurple"})
(react/createElement sample1 nil "hello")See the devcards for lots more details
https://dvingo.github.io/cljs-emotion/#!/dv.cljs_emotion.devcards
https://github.com/lilactown/helix
The namespace dv.emotion-helix-dom is a drop in replacement for helix.dom, and supports all the props that helix
supports in addition to supporting the :css property of emotion. Here is an example:
(:require
[dv.emotion-helix-dom :as d]
[helix.core :refer [$ defnc]]
[dv.cljs-emotion :as em :refer [css defstyled keyframes global-style theme-provider]]
(def some-css
{:self (em/css #js {:backgroundColor "#aefefe"
:border "2px solid #eee"
:borderRadius "0.5rem"
:padding "1rem"})
:title (em/css {:font-size "1.25rem"
:color "red"}
#js{:border "1px dashed"
"> div > p" {:color "blue"}})
:more (em/css {:border "2px solid"})})
(def merged-css
(em/css
{:background-color "black"}
(:title some-css)
(:more some-css)))
(defn object-styles []
(d/div {:css (:self some-css)}
(d/h2 {:css (:title some-css)} "here we have a title")
(d/h2 {:css merged-css} "here we have a title")
(d/p {:css (em/css merged-css {:color "white"})}
"And overwrite inline")))You can of course use the defstyled API as well if you wish as that outputs React components.
More examples in the devcards:
https://dvingo.github.io/cljs-emotion/#!/dv.cljs_emotion.helix_cards
There is a separate namespace for reagent support:
(:require
[dv.cljs-emotion-reagent :refer [jsx css defstyled keyframes global-style theme-provider]])
(defstyled a-child :div {:color "deepSKYBlue"})
(defstyled a-parent2 :div
(fn [{:keys [color]}]
{:color "red"
a-child {:color (or color "darkorchid")}
"@media (min-width: 1024px)"
{a-child {:color "black"}}}))
(def black-bg {:background-color "black"})
;; in your component's render function:
[:div
[a-parent2 "parent should be red"]
(jsx {:css (em/css black-bg {:color "white"})})
[a-parent2 {:color "steelblue"}
[a-child "nested child should be darkorchid"]]]The component output by defstyled supports passing reagent vectors as children and will convert them to React Elements
for you.
If you want to use the :css property you have to use the jsx helper or create a component with defstyled
(em/defstyled div :div {})
;; in your render function:
[div {:css [{:background "blue"} {:color "#eff"}]} "Some text"]A cool future development would be to plug into the Reagent compiler and add support for :css on all elements.
Pull requests welcome if that interests you!
More examples in the devcards:
https://dvingo.github.io/cljs-emotion/#!/dv.cljs_emotion.reagent_cards
make devThis starts the shadow-cljs server and watch process for the devcards build.
Open the shadow-cljs devtools webpage and then click on the webserver that hosts the devcards.
Notes for deploy:
- update pom.xml version
- commit
Build a deployable jar of this library:
clojure -X:jar
Install it locally:
clojure -M:install
Deploy it to Clojars -- needs CLOJARS_USERNAME and CLOJARS_PASSWORD environment variables:
clojure -M:deploy
See Makefile
git checkout gh-pages
git merge master
make gh-pages
git add -A
git commit -m
git push github HEAD -f