{"id":13442346,"url":"https://github.com/DogLooksGood/mcss","last_synced_at":"2025-03-20T13:33:28.496Z","repository":{"id":52092426,"uuid":"203047745","full_name":"DogLooksGood/mcss","owner":"DogLooksGood","description":"Macro your CSS","archived":false,"fork":false,"pushed_at":"2023-01-26T12:20:56.000Z","size":75,"stargazers_count":9,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-12T22:34:22.410Z","etag":null,"topics":["clojurescript","css","macro","style"],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DogLooksGood.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-18T19:30:25.000Z","updated_at":"2021-01-26T01:07:50.000Z","dependencies_parsed_at":"2023-02-14T17:15:20.865Z","dependency_job_id":null,"html_url":"https://github.com/DogLooksGood/mcss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DogLooksGood%2Fmcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DogLooksGood%2Fmcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DogLooksGood%2Fmcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DogLooksGood%2Fmcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DogLooksGood","download_url":"https://codeload.github.com/DogLooksGood/mcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244619294,"owners_count":20482396,"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","css","macro","style"],"created_at":"2024-07-31T03:01:44.608Z","updated_at":"2025-03-20T13:33:28.221Z","avatar_url":"https://github.com/DogLooksGood.png","language":"Clojure","funding_links":[],"categories":["Clojure"],"sub_categories":[],"readme":"# MCSS\n\u003e Macro your CSS in ClojureScript.\n\n![Logo](mcss.png)\n\n# Status?\nWIP\n\n# Target\n- Design to use with hiccup style library, e.g. reagent.\n- Seamless dynamic style supported by CSS variables.\n- Generating CSS by macro, as less runtime as possible.\n- Shorten CSS names in production build.\n- Use dead code elimination to remove unused atomic styles.\n\n# Usage\n## Basic Setup\nAll usefull stuff can be found in namespace `mcss.core`.\n\nPut this in both init function and after-load function(in development).\n\n```clojure\n(load-styles!)\n```\n\n## defa - Define a simple atomic style\nUse keyword for property, string or number for simple value.\n\n```clojure\n(defa c-red\n  {:color \"red\"})\n```\n\nUse `[]` for comma-separated list values.\n\n``` clojure\n(defa ft-lg\n  {:font-size \"1.8rem\"\n   :font-family [\"Consolas\" \"Courier New\" \"Menlo\"]})\n```\n\nUse `[[]]`(vector of vector) for whitespace-separated list value.\n\n```clojure\n(defa bd\n  {:border [[\"thin\" \"solid\" \"#666\"]]})\n```\n\nUse `{}` for function call.\n\n```clojure\n(defa foo\n  {:color     {:rgb [255 0 0]}\n   :transform {:rotate \"10deg\"}})\n```\n\n## defstyled - Define a styled component\nSimplest version:\n\n```clojure\n(defstyled my-btn :button\n  {:background-color \"#99ff99\"})\n```\n\nUse it like this:\n\n```clojure\n[my-btn {:on-click #(js/alert \"!\")}]\n```\n\nCombine atomic styles in keyword tag:\n\n```clojure\n(defstyled my-btn :button\n  [c-red ft-lg bd]\n  {:background-color \"#99ff99\"})\n```\n\nDynamic style supported by use inline function as property.\n\n```clojure\n(defstyled my-btn :button\n  {:background-color #(get % :bg-clr)})\n```\n\nThis will be expanded to something like:\n\n```clojure\n(mcss.rt/inject-style!\n \"some-ns__my-btn{background-color:var(--bg-clr)}\")\n\n(defn my-btn [props \u0026 children]\n  (let [css (:css props)\n        bg-clr (#(get % :bg-color) css)]\n    (into [:button (merge (dissoc props :css) {:style {\"--bg-clr\" bg-clr}})]\n          children)))\n```\n\nUse like this:\n\n```clojure\n[my-btn {:on-click #(js/alert \"!\")\n         :css {:bg-color \"blue\"}}]\n```\n\nUse a keyword ends with `?` to define style valid in some case.\n\n```clojure\n(defstyled my-div :div\n  {:background-color \"white\"\n   :active? {:background-color \"black\"}})\n```\n\nUse keyword for property access. (Only inline function or keyword)\n\n```clojure\n(defstyled my-btn :button\n  {:background-color :bg-clr\n   :color            :clr})\n```\n\n## defcustom - Define a custom variable\n\nA custom variable is a variable locate in `:root` selector.\n\n```clojure\n(defcustom some-color \"#99ff99\")\n```\n\nUse it like this:\n\n```clojure\n(defstyled my-div :div\n  {:color (some-color)})\n```\n\n## defkeyframes - Define a keyframe\n\n```clojure\n(defkeyframes my-kf\n  [:from {:color \"blue\"}]\n  [:to {:color \"red\"}])\n```\n\nUse it like this:\n\n```clojure\n(defstyled my-div :div\n  {:animation [[my-kf \"2s\" \"infinite\" \"alternate\"]]})\n```\n\n## Combinators support.\n\nUse strings for sub selectors.\n\n```clojure\n(defstyled my-div :div\n  ^{:combinators {\"\u003e div\" {:color \"red\"}\n                  \"~ div\" {:color \"blue\"}}}\n  {})\n```\n\n## Pseudo support.\n\n```clojure\n(defstyled my-div :div\n  ^{:pseudo {:before {:content \"'Before Here!'\"\n                      :color   :clr}}}\n  ;;                           ^ dynamic style is possible here\n  {:background-color \"blue\"\n   :width            \"3rem\"\n   :height           \"3rem\"})\n```\n\nProvide your own `mcss/defaults.clj` to overwrite default vendors settings.\n\n## Media query support.\n\n```clojure\n(defstyled my-div :div\n  ^{:media {:width {:color \"blue\"}\n            :narrow {:color \"red\"}}}\n  ;;                ^ Note: dynamic style here is not supported!\n  {:color \"black\"})\n```\n\nProvide your own `mcss/defaults.clj` to overwrite default media query defines.\n\n# Roadmap\n- Exploring what is good.\n- Add macro validation via spec.\n- Add built-in atomic styles.\n\n# Good Libraries I learn from\n[cljss](https://github.com/clj-commons/cljss)\n[herb](https://github.com/roosta/herb)\n[tachyons](https://github.com/tachyons-css/tachyons)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDogLooksGood%2Fmcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDogLooksGood%2Fmcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDogLooksGood%2Fmcss/lists"}