{"id":16660048,"url":"https://github.com/dvingo/cljs-emotion","last_synced_at":"2025-12-12T01:24:15.255Z","repository":{"id":44985294,"uuid":"267755663","full_name":"dvingo/cljs-emotion","owner":"dvingo","description":"ClojureScript wrapper of the emotion css-in-js library","archived":false,"fork":false,"pushed_at":"2023-11-24T22:39:40.000Z","size":6959,"stargazers_count":25,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T03:13:19.152Z","etag":null,"topics":["clojurescript","emotion"],"latest_commit_sha":null,"homepage":"https://dvingo.github.io/cljs-emotion","language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dvingo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-29T03:24:20.000Z","updated_at":"2023-06-05T16:44:58.000Z","dependencies_parsed_at":"2023-01-31T04:02:01.001Z","dependency_job_id":"757bc350-ee13-468d-9f77-91e5c072c673","html_url":"https://github.com/dvingo/cljs-emotion","commit_stats":null,"previous_names":["dvingo/dv.cljs-emotion"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvingo%2Fcljs-emotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvingo%2Fcljs-emotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvingo%2Fcljs-emotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvingo%2Fcljs-emotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dvingo","download_url":"https://codeload.github.com/dvingo/cljs-emotion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244829602,"owners_count":20517339,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clojurescript","emotion"],"created_at":"2024-10-12T10:27:38.386Z","updated_at":"2025-12-12T01:24:15.193Z","avatar_url":"https://github.com/dvingo.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ClojureScript wrapper for emotion\n\n[![Clojars Project](https://img.shields.io/clojars/v/dv/cljs-emotion.svg)](https://clojars.org/dv/cljs-emotion)\n\n[![cljdoc badge](https://cljdoc.org/badge/dv/cljs-emotion)](https://cljdoc.org/d/dv/cljs-emotion)\n\n\nDocumentation and example usage are hosted in devcards here:\n\nhttps://dvingo.github.io/cljs-emotion/#!/dv.cljs_emotion.devcards\n\nhttps://dvingo.github.io/cljs-emotion\n\nFor info about emotion itself, see:\n\nhttps://emotion.sh/docs/introduction\n\n# To use this library\n\nInclude it in your clojure project dependency list (see most recent version on Clojars).\n\nAnd install emotion:\n\n```bash\nnpm install @emotion/react @emotion/styled\n```\nThe main namespaces are:\n\n`dv.cljs-emotion` - Plain React components/elements\n\nWith API: `defstyled`, `jsx`, `css`, `global-style`, `theme-provider`, `keyframes`\n\n`dv.cljs-emotion-reagent` - Reagent components\n\nWith API: `defstyled`, `jsx`, `css`, `global-style`, `theme-provider`, `keyframes`\n\n`dv.emotion-helix-dom`\n\nDOM elements for use with helix that support the `:css` prop, with the same API as the components in the `helix.dom` namespace.\n\n## Use with plain react components\n\n```clojure \n(require [dv.cljs-emotion :refer [jsx css defstyled keyframes global-style theme-provider]])\n\n(defstyled sample1 :div\n  {:background-color \"RebeccaPurple\"})\n\n(react/createElement sample1 nil \"hello\")\n```\n\nSee the devcards for lots more details\n\nhttps://dvingo.github.io/cljs-emotion/#!/dv.cljs_emotion.devcards\n\n## Use with helix\n\nhttps://github.com/lilactown/helix\n\nThe namespace `dv.emotion-helix-dom` is a drop in replacement for `helix.dom`, and supports all the props that helix\nsupports in addition to supporting the `:css` property of emotion. Here is an example:\n\n```clojure\n(:require\n  [dv.emotion-helix-dom :as d]\n  [helix.core :refer [$ defnc]]\n  [dv.cljs-emotion :as em :refer [css defstyled keyframes global-style theme-provider]]\n\n  (def some-css\n    {:self  (em/css #js {:backgroundColor \"#aefefe\"\n                         :border          \"2px solid #eee\"\n                         :borderRadius    \"0.5rem\"\n                         :padding         \"1rem\"})\n     :title (em/css {:font-size \"1.25rem\"\n                     :color     \"red\"}\n              #js{:border     \"1px dashed\"\n                  \"\u003e div \u003e p\" {:color \"blue\"}})\n     :more  (em/css {:border \"2px solid\"})})\n\n  (def merged-css\n    (em/css\n      {:background-color \"black\"}\n      (:title some-css)\n      (:more some-css)))\n\n  (defn object-styles []\n    (d/div {:css (:self some-css)}\n      (d/h2 {:css (:title some-css)} \"here we have a title\")\n      (d/h2 {:css merged-css} \"here we have a title\")\n      (d/p {:css (em/css merged-css {:color \"white\"})}\n        \"And overwrite inline\")))\n```\n\nYou can of course use the `defstyled` API as well if you wish as that outputs React components.\n\nMore examples in the devcards:\n\nhttps://dvingo.github.io/cljs-emotion/#!/dv.cljs_emotion.helix_cards\n\n## Use with reagent\n\nThere is a separate namespace for reagent support:\n\n```clojure\n(:require\n  [dv.cljs-emotion-reagent :refer [jsx css defstyled keyframes global-style theme-provider]])\n\n(defstyled a-child :div {:color \"deepSKYBlue\"})\n\n(defstyled a-parent2 :div\n  (fn [{:keys [color]}]\n    {:color  \"red\"\n     a-child {:color (or color \"darkorchid\")}\n     \"@media (min-width: 1024px)\"\n     {a-child {:color \"black\"}}}))\n\n(def black-bg {:background-color \"black\"})\n\n;; in your component's render function:\n\n[:div\n [a-parent2 \"parent should be red\"]\n (jsx {:css (em/css black-bg {:color \"white\"})})\n [a-parent2 {:color \"steelblue\"}\n  [a-child \"nested child should be darkorchid\"]]]\n```\n\nThe component output by `defstyled` supports passing reagent vectors as children and will convert them to React Elements\nfor you.\n\nIf you want to use the `:css` property you have to use the `jsx` helper or create a component with `defstyled`\n\n```clojure\n(em/defstyled div :div {})\n\n;; in your render function:\n[div {:css [{:background \"blue\"} {:color \"#eff\"}]} \"Some text\"]\n```\n\nA cool future development would be to plug into the Reagent compiler and add support for `:css` on all elements.\n\nPull requests welcome if that interests you!\n\nMore examples in the devcards:\n\nhttps://dvingo.github.io/cljs-emotion/#!/dv.cljs_emotion.reagent_cards\n\n# Development\n\n```bash\nmake dev\n```\n\nThis starts the shadow-cljs server and watch process for the devcards build.\n\nOpen the shadow-cljs devtools webpage and then click on the webserver that hosts the devcards.\n\n## Deploy\n\nNotes for deploy:\n\n- update pom.xml version\n- commit\n\nBuild a deployable jar of this library:\n\n    clojure -X:jar\n\nInstall it locally:\n\n    clojure -M:install\n\nDeploy it to Clojars -- needs `CLOJARS_USERNAME` and `CLOJARS_PASSWORD` environment variables:\n\n    clojure -M:deploy\n\n## Publish github pages\n\nSee `Makefile`\n\n```bash\ngit checkout gh-pages\ngit merge master\nmake gh-pages\ngit add -A\ngit commit -m\ngit push github HEAD -f\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvingo%2Fcljs-emotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdvingo%2Fcljs-emotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvingo%2Fcljs-emotion/lists"}