├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── doc └── style-component.md ├── project.clj ├── src └── cljs_css_modules │ ├── core.clj │ ├── macro.cljc │ └── runtime.cljs └── test ├── clj └── cljs_css_modules │ └── core_test.clj └── cljs └── cljs_css_modules ├── macro_test.cljs └── runner.cljs /.gitignore: -------------------------------------------------------------------------------- 1 | /target 2 | /classes 3 | /checkouts 4 | pom.xml 5 | pom.xml.asc 6 | *.jar 7 | *.class 8 | /.lein-* 9 | /.nrepl-port 10 | .hgignore 11 | .hg/ 12 | /resources 13 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [0.2.1] 4 | ### Added 5 | - If you use the macro from clojure (and not clojurescript), it will define a map containing both the generated css and the map between original selectors and localised selectors. 6 | 7 | ## [0.2.0] 8 | ### Added 9 | - [BREAKING] ```defstyle``` doesn't take an array of style rules anymore, but multiple style rules one after the other. 10 | (to be more consistent with garden) 11 | - Support for media-query and keyframes 12 | - Support compiler options 13 | - Add style component (to document, see tests for now) 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC 2 | LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM 3 | CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT. 4 | 5 | 1. DEFINITIONS 6 | 7 | "Contribution" means: 8 | 9 | a) in the case of the initial Contributor, the initial code and 10 | documentation distributed under this Agreement, and 11 | 12 | b) in the case of each subsequent Contributor: 13 | 14 | i) changes to the Program, and 15 | 16 | ii) additions to the Program; 17 | 18 | where such changes and/or additions to the Program originate from and are 19 | distributed by that particular Contributor. A Contribution 'originates' from 20 | a Contributor if it was added to the Program by such Contributor itself or 21 | anyone acting on such Contributor's behalf. Contributions do not include 22 | additions to the Program which: (i) are separate modules of software 23 | distributed in conjunction with the Program under their own license 24 | agreement, and (ii) are not derivative works of the Program. 25 | 26 | "Contributor" means any person or entity that distributes the Program. 27 | 28 | "Licensed Patents" mean patent claims licensable by a Contributor which are 29 | necessarily infringed by the use or sale of its Contribution alone or when 30 | combined with the Program. 31 | 32 | "Program" means the Contributions distributed in accordance with this 33 | Agreement. 34 | 35 | "Recipient" means anyone who receives the Program under this Agreement, 36 | including all Contributors. 37 | 38 | 2. GRANT OF RIGHTS 39 | 40 | a) Subject to the terms of this Agreement, each Contributor hereby grants 41 | Recipient a non-exclusive, worldwide, royalty-free copyright license to 42 | reproduce, prepare derivative works of, publicly display, publicly perform, 43 | distribute and sublicense the Contribution of such Contributor, if any, and 44 | such derivative works, in source code and object code form. 45 | 46 | b) Subject to the terms of this Agreement, each Contributor hereby grants 47 | Recipient a non-exclusive, worldwide, royalty-free patent license under 48 | Licensed Patents to make, use, sell, offer to sell, import and otherwise 49 | transfer the Contribution of such Contributor, if any, in source code and 50 | object code form. This patent license shall apply to the combination of the 51 | Contribution and the Program if, at the time the Contribution is added by the 52 | Contributor, such addition of the Contribution causes such combination to be 53 | covered by the Licensed Patents. The patent license shall not apply to any 54 | other combinations which include the Contribution. No hardware per se is 55 | licensed hereunder. 56 | 57 | c) Recipient understands that although each Contributor grants the licenses 58 | to its Contributions set forth herein, no assurances are provided by any 59 | Contributor that the Program does not infringe the patent or other 60 | intellectual property rights of any other entity. Each Contributor disclaims 61 | any liability to Recipient for claims brought by any other entity based on 62 | infringement of intellectual property rights or otherwise. As a condition to 63 | exercising the rights and licenses granted hereunder, each Recipient hereby 64 | assumes sole responsibility to secure any other intellectual property rights 65 | needed, if any. For example, if a third party patent license is required to 66 | allow Recipient to distribute the Program, it is Recipient's responsibility 67 | to acquire that license before distributing the Program. 68 | 69 | d) Each Contributor represents that to its knowledge it has sufficient 70 | copyright rights in its Contribution, if any, to grant the copyright license 71 | set forth in this Agreement. 72 | 73 | 3. REQUIREMENTS 74 | 75 | A Contributor may choose to distribute the Program in object code form under 76 | its own license agreement, provided that: 77 | 78 | a) it complies with the terms and conditions of this Agreement; and 79 | 80 | b) its license agreement: 81 | 82 | i) effectively disclaims on behalf of all Contributors all warranties and 83 | conditions, express and implied, including warranties or conditions of title 84 | and non-infringement, and implied warranties or conditions of merchantability 85 | and fitness for a particular purpose; 86 | 87 | ii) effectively excludes on behalf of all Contributors all liability for 88 | damages, including direct, indirect, special, incidental and consequential 89 | damages, such as lost profits; 90 | 91 | iii) states that any provisions which differ from this Agreement are offered 92 | by that Contributor alone and not by any other party; and 93 | 94 | iv) states that source code for the Program is available from such 95 | Contributor, and informs licensees how to obtain it in a reasonable manner on 96 | or through a medium customarily used for software exchange. 97 | 98 | When the Program is made available in source code form: 99 | 100 | a) it must be made available under this Agreement; and 101 | 102 | b) a copy of this Agreement must be included with each copy of the Program. 103 | 104 | Contributors may not remove or alter any copyright notices contained within 105 | the Program. 106 | 107 | Each Contributor must identify itself as the originator of its Contribution, 108 | if any, in a manner that reasonably allows subsequent Recipients to identify 109 | the originator of the Contribution. 110 | 111 | 4. COMMERCIAL DISTRIBUTION 112 | 113 | Commercial distributors of software may accept certain responsibilities with 114 | respect to end users, business partners and the like. While this license is 115 | intended to facilitate the commercial use of the Program, the Contributor who 116 | includes the Program in a commercial product offering should do so in a 117 | manner which does not create potential liability for other Contributors. 118 | Therefore, if a Contributor includes the Program in a commercial product 119 | offering, such Contributor ("Commercial Contributor") hereby agrees to defend 120 | and indemnify every other Contributor ("Indemnified Contributor") against any 121 | losses, damages and costs (collectively "Losses") arising from claims, 122 | lawsuits and other legal actions brought by a third party against the 123 | Indemnified Contributor to the extent caused by the acts or omissions of such 124 | Commercial Contributor in connection with its distribution of the Program in 125 | a commercial product offering. The obligations in this section do not apply 126 | to any claims or Losses relating to any actual or alleged intellectual 127 | property infringement. In order to qualify, an Indemnified Contributor must: 128 | a) promptly notify the Commercial Contributor in writing of such claim, and 129 | b) allow the Commercial Contributor tocontrol, and cooperate with the 130 | Commercial Contributor in, the defense and any related settlement 131 | negotiations. The Indemnified Contributor may participate in any such claim 132 | at its own expense. 133 | 134 | For example, a Contributor might include the Program in a commercial product 135 | offering, Product X. That Contributor is then a Commercial Contributor. If 136 | that Commercial Contributor then makes performance claims, or offers 137 | warranties related to Product X, those performance claims and warranties are 138 | such Commercial Contributor's responsibility alone. Under this section, the 139 | Commercial Contributor would have to defend claims against the other 140 | Contributors related to those performance claims and warranties, and if a 141 | court requires any other Contributor to pay any damages as a result, the 142 | Commercial Contributor must pay those damages. 143 | 144 | 5. NO WARRANTY 145 | 146 | EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON 147 | AN "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER 148 | EXPRESS OR IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR 149 | CONDITIONS OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A 150 | PARTICULAR PURPOSE. Each Recipient is solely responsible for determining the 151 | appropriateness of using and distributing the Program and assumes all risks 152 | associated with its exercise of rights under this Agreement , including but 153 | not limited to the risks and costs of program errors, compliance with 154 | applicable laws, damage to or loss of data, programs or equipment, and 155 | unavailability or interruption of operations. 156 | 157 | 6. DISCLAIMER OF LIABILITY 158 | 159 | EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY 160 | CONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, 161 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION 162 | LOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 163 | CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 164 | ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE 165 | EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY 166 | OF SUCH DAMAGES. 167 | 168 | 7. GENERAL 169 | 170 | If any provision of this Agreement is invalid or unenforceable under 171 | applicable law, it shall not affect the validity or enforceability of the 172 | remainder of the terms of this Agreement, and without further action by the 173 | parties hereto, such provision shall be reformed to the minimum extent 174 | necessary to make such provision valid and enforceable. 175 | 176 | If Recipient institutes patent litigation against any entity (including a 177 | cross-claim or counterclaim in a lawsuit) alleging that the Program itself 178 | (excluding combinations of the Program with other software or hardware) 179 | infringes such Recipient's patent(s), then such Recipient's rights granted 180 | under Section 2(b) shall terminate as of the date such litigation is filed. 181 | 182 | All Recipient's rights under this Agreement shall terminate if it fails to 183 | comply with any of the material terms or conditions of this Agreement and 184 | does not cure such failure in a reasonable period of time after becoming 185 | aware of such noncompliance. If all Recipient's rights under this Agreement 186 | terminate, Recipient agrees to cease use and distribution of the Program as 187 | soon as reasonably practicable. However, Recipient's obligations under this 188 | Agreement and any licenses granted by Recipient relating to the Program shall 189 | continue and survive. 190 | 191 | Everyone is permitted to copy and distribute copies of this Agreement, but in 192 | order to avoid inconsistency the Agreement is copyrighted and may only be 193 | modified in the following manner. The Agreement Steward reserves the right to 194 | publish new versions (including revisions) of this Agreement from time to 195 | time. No one other than the Agreement Steward has the right to modify this 196 | Agreement. The Eclipse Foundation is the initial Agreement Steward. The 197 | Eclipse Foundation may assign the responsibility to serve as the Agreement 198 | Steward to a suitable separate entity. Each new version of the Agreement will 199 | be given a distinguishing version number. The Program (including 200 | Contributions) may always be distributed subject to the version of the 201 | Agreement under which it was received. In addition, after a new version of 202 | the Agreement is published, Contributor may elect to distribute the Program 203 | (including its Contributions) under the new version. Except as expressly 204 | stated in Sections 2(a) and 2(b) above, Recipient receives no rights or 205 | licenses to the intellectual property of any Contributor under this 206 | Agreement, whether expressly, by implication, estoppel or otherwise. All 207 | rights in the Program not expressly granted under this Agreement are 208 | reserved. 209 | 210 | This Agreement is governed by the laws of the State of New York and the 211 | intellectual property laws of the United States of America. No party to this 212 | Agreement will bring a legal action under this Agreement more than one year 213 | after the cause of action arose. Each party waives its rights to a jury trial 214 | in any resulting litigation. 215 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Css Modules in ClojureScript 2 | 3 | [![Clojars Project](https://img.shields.io/clojars/v/cljs-css-modules.svg)](https://clojars.org/cljs-css-modules) 4 | 5 | First if you don't know what's a css modules, you should definitely read the specification: 6 | https://github.com/css-modules/css-modules 7 | 8 | Using cljs-css-modules, you won't write pure CSS, but you'll use [garden](https://github.com/noprompt/garden) syntax to write your style in ClojureScript. 9 | ([Garden](https://github.com/noprompt/garden) basically allows you to use any feature of pure css, so no worries you're not losing any power here). 10 | 11 | The idea of cljs-css-modules is to localise every classes (and soon animations) you define through the ```defstyle``` macro. 12 | 13 | ## Example Project 14 | 15 | gmp26 put together a repository porting a css-modules project over to a cljs-css-modules/cljs one. 16 | 17 | You can check it out, to see how this library can be used in a real project: 18 | 19 | - Original JS Repo: 20 | https://github.com/css-modules/webpack-demo 21 | - CLJS Repo: 22 | https://github.com/gmp26/css-modules-tester 23 | 24 | ## Usage 25 | 26 | Add this to your ```project.clj```: 27 | 28 | 29 | 30 | You need to define your style using the ```defstyle``` macro. 31 | 32 | Your style will be written using [garden](https://github.com/noprompt/garden) syntax, so spend some time reading the [doc](https://github.com/noprompt/garden). 33 | 34 | Each time you'll define some style using ```defstyle```, this style will be localised (every classes and animations), translated to CSS, 35 | and automatically injected into the `````` tag. This works perfectly with figwheel, and you'll get live style reloading out of the box. 36 | 37 | (If you come from the javascript world and you've used webpack before, it replaces both *css-loader* and *style-loader*). 38 | 39 | *Example:* 40 | 41 | Define your style: 42 | 43 | ```Clojure 44 | (ns yourapp.namespace1 45 | (:require [cljs-css-modules.macro :refer-macros [defstyle]])) 46 | 47 | (defstyle style 48 | 49 | (at-media {:max-width "200px"} 50 | 51 | [".mobile-style-1" {:margin "5px"}] 52 | 53 | [".mobile-style-2" {:margin "10px"}]) 54 | 55 | [".container" {:background-color "blue" 56 | :font-size 55} 57 | ["a" {:color "green"}] 58 | ["&:hover" {:background-color "black"}]] 59 | 60 | [".text" {:font-size 14 61 | :color "brown"}] 62 | 63 | (at-keyframes "keyframe-1" [:from {:a 50}] 64 | [:to {:b 50}]) 65 | 66 | ["@keyframes keyframe-2" [:from {:a 50}] 67 | [:to {:b 50}]] 68 | 69 | [".title" {:background-color "blue" 70 | :font-size 60}] 71 | 72 | [".title2" {:font-size 40 73 | :color "red"}]) 74 | ``` 75 | 76 | The localised classes/keyframes will be available in the style object created. 77 | (Note: including classes in media queries). 78 | 79 | ```Clojure 80 | (:container style) ;; => returns the unique generated class for ".container" 81 | (:mobile-style-1 style) ;; => returns the unique generated class for ".mobile-style-1" 82 | ``` 83 | 84 | To use your style, you just need to inject them wherever you need: 85 | 86 | For instance with reagent: 87 | 88 | ```Clojure 89 | (defn simple-component [] 90 | [:div {:class-name (:container style)} 91 | [:h1 {:class-name (:title style)} "I am a big title"] 92 | [:h1 {:class-name (:title2 style)} "I am smaller title"] 93 | [:p {:class-name (:text style)} 94 | "Here goes some random text"]]) 95 | ``` 96 | ## Media queries 97 | 98 | To define a media query you need to use the ```(at-media)``` form, and nest your style in it. 99 | It's the same as garden's syntax, here is the documentation: 100 | https://github.com/noprompt/garden/wiki/Media-Queries 101 | 102 | Example: 103 | 104 | ```Clojure 105 | (defstyle style 106 | (at-media {:max-width "400px"} 107 | 108 | [".mobile-style" {:margin "5px"}]) 109 | 110 | (at-media {:min-width "400px" 111 | :max-width "800px"} 112 | 113 | [".tablet-style-1" {:margin "5px"}] 114 | 115 | [".tablet-style-2" {:margin "10px"}])) 116 | ``` 117 | 118 | This will localise all the classes in your media queries, here: .mobile-style, .tablet-style-1, .tablet-style-2. 119 | 120 | Note: 121 | Using cljs-css-modules, you don't need to import the at-media function from garden's library. The macro will recognise the at-media symbol. 122 | 123 | ## Keyframes 124 | 125 | To define an animation you need to use the ```(at-keyframes)``` form, or a string like "@keyframes animation-name": 126 | 127 | Example: 128 | 129 | ```Clojure 130 | (defstyle style 131 | 132 | (at-keyframes "animation-1" 133 | [:from {:top "0px"}] 134 | [:to {:top "200px"}]) 135 | 136 | (at-keyframes "animation-2" 137 | [:from {:top "0px"}] 138 | [:to {:top "250px"}]) 139 | 140 | ["@keyframes animation-3" [:from {:top "0px"}] 141 | [:to {:top "250px"}]]) 142 | ``` 143 | 144 | This will localise all the animations, here: animation-1, animation-2, animation-3. 145 | 146 | Note: 147 | Using cljs-css-modules, you don't need to import the at-keyframes function from garden's library. The macro will recognise the at-keyframes symbol. 148 | 149 | ## From Clojure 150 | 151 | If you use the macro from clojure (and not clojurescript), it will define a map containing both the generated css and the map between original selectors and localised selectors. 152 | 153 | ```Clojure 154 | (defstyle style 155 | 156 | {:pretty-print? false} 157 | 158 | (at-keyframes "animation-1" 159 | [:from {:top "0px"}] 160 | [:to {:top "200px"}]) 161 | 162 | (at-keyframes "animation-2" 163 | [:from {:top "0px"}] 164 | [:to {:top "250px"}]) 165 | 166 | ["@keyframes animation-3" [:from {:top "0px"}] 167 | [:to {:top "250px"}]]) 168 | ``` 169 | 170 | In this case style would be the following map: 171 | 172 | ```Clojure 173 | {:map {:animation-1 "animation-1--G__1524" 174 | :animation-2 "animation-2--G__1524" 175 | :animation-3 "animation-3--G__1524"} 176 | :css "@keyframes animation-1--G__1524{from{top:0}to{top:200px}}@keyframes animation-2--G__1524{from{top:0}to{top:250px}}@keyframes animation-3--G__1524{from{top:0}to{top:250px}}"} 177 | ``` 178 | 179 | You can then do whatever you want with these, and use it for you server side rendered apps! 180 | 181 | ## Note 182 | 183 | You might want to consider https://github.com/mhallin/forest which is not based on garden and provides the same kind of features using its own DSL. 184 | 185 | ## License 186 | 187 | Copyright © 2016 Matthieu Béteille 188 | 189 | Distributed under the Eclipse Public License version 1.0 190 | -------------------------------------------------------------------------------- /doc/style-component.md: -------------------------------------------------------------------------------- 1 | # Introduction to cljs-css-modules 2 | 3 | TODO: write [great documentation](http://jacobian.org/writing/what-to-write/) 4 | -------------------------------------------------------------------------------- /project.clj: -------------------------------------------------------------------------------- 1 | (defproject cljs-css-modules "0.2.1" 2 | :description "cljs-css-modules: css modules in clojurescript" 3 | 4 | :url "https://github.com/matthieu-beteille/cljs-css-modules" 5 | 6 | :license {:name "Eclipse Public License" 7 | :url "http://www.eclipse.org/legal/epl-v10.html"} 8 | 9 | :dependencies [[org.clojure/clojure "1.7.0"] 10 | [org.clojure/clojurescript "1.8.34"] 11 | [garden "1.3.2"]] 12 | 13 | :test-paths ["test/clj"] 14 | 15 | :plugins [[lein-auto "0.1.2"] 16 | [lein-doo "0.1.6"] 17 | [lein-cljsbuild "1.1.4"]] 18 | 19 | :cljsbuild 20 | {:builds 21 | [{:id "test" 22 | :source-paths ["src/" "test/cljs"] 23 | :compiler {:output-to "resources/public/test/app.test.js" 24 | :output-dir "resources/public/test/out" 25 | :main 'cljs-css-modules.runner 26 | :optimizations :none}}]} 27 | 28 | :auto {:default {:file-pattern #"\.(clj|cljs|cljc|edn)$"}}) 29 | -------------------------------------------------------------------------------- /src/cljs_css_modules/core.clj: -------------------------------------------------------------------------------- 1 | (ns cljs-css-modules.core) 2 | -------------------------------------------------------------------------------- /src/cljs_css_modules/macro.cljc: -------------------------------------------------------------------------------- 1 | (ns cljs-css-modules.macro 2 | #?(:clj 3 | (:require 4 | [garden.core :refer [css]] 5 | [garden.stylesheet :refer [at-media at-keyframes]])) 6 | #?(:cljs 7 | (:require 8 | [garden.core :refer [css]] 9 | [garden.stylesheet :refer [at-media at-keyframes]] 10 | [cljs-css-modules.runtime]))) 11 | 12 | (defn cljs-env? 13 | "Take the &env from a macro, and tell whether we are expanding into cljs." 14 | [env] 15 | (boolean (:ns env))) 16 | 17 | ; for now we localise only simple class and keyframes 18 | (def selectors-to-localise 19 | [{:id :class 20 | :regexp #"\.([^#.:\[\s]+)(.*)" 21 | :localise-fn #(str ".$1" "--" % "$2") 22 | :name-template "$1" 23 | :value-template "$1"} 24 | 25 | {:id :keyframe 26 | :regexp #"@keyframes (.+)" 27 | :localise-fn #(str "$1--" %) 28 | :name-template "$1" 29 | :value-template "$1"}]) 30 | 31 | (defn should-be-localised 32 | [selector] 33 | (some (fn [selector-object] 34 | (if (re-matches (:regexp selector-object) selector) 35 | selector-object 36 | false)) selectors-to-localise)) 37 | 38 | (defn localise-selector 39 | [id selector {:keys [regexp localise-fn]}] 40 | (clojure.string/replace selector regexp (localise-fn id))) 41 | 42 | (defn get-selector-key 43 | "Return the key to use to retrieve the actual selector value" 44 | [selector {:keys [regexp name-template]}] 45 | (keyword (clojure.string/replace selector 46 | regexp 47 | name-template))) 48 | 49 | (defn get-selector-value 50 | "Return the actual selector value" 51 | [selector {:keys [regexp value-template]}] 52 | (name (clojure.string/replace selector 53 | regexp 54 | value-template))) 55 | 56 | (defn is-media? 57 | [[first & rest :as style]] 58 | (and (list? style) 59 | (= first 'at-media))) 60 | 61 | (defn is-keyframe? 62 | [[first & rest :as style]] 63 | (and (list? style) 64 | (= first 'at-keyframes))) 65 | 66 | (defn process-style 67 | [id [fst & rest :as style]] 68 | (cond 69 | ; keyframe 70 | (is-keyframe? style) 71 | (let [[symbol name & style] style 72 | localised-name (str name "--" id)] 73 | {:type :at-keyframe 74 | :garden-style style 75 | :selector {:original name 76 | :localised localised-name 77 | :key (keyword name) 78 | :value localised-name}}) 79 | 80 | ;; media-query 81 | (is-media? style) 82 | (let [[symbol params & style] style] 83 | {:type :media 84 | :params params 85 | :nested-style style}) 86 | 87 | ;; other selectors 88 | :else 89 | (let [rules (into [] rest) 90 | s (name fst) 91 | should-be-localised (should-be-localised s)] 92 | (if should-be-localised 93 | (let [selector-object should-be-localised 94 | localised-selector (localise-selector id s selector-object)] 95 | {:type (:id selector-object) 96 | :selector {:original s 97 | :localised localised-selector 98 | :key (get-selector-key s selector-object) 99 | :value (get-selector-value localised-selector selector-object)} 100 | :garden-style style}) 101 | {:type :not-localised 102 | :garden-style style})))) 103 | 104 | (defn create-garden-style 105 | [id 106 | {:keys [map style] :as acc} 107 | item] 108 | (let [at-media (symbol "garden.stylesheet" "at-media") 109 | at-keyframes (symbol "garden.stylesheet" "at-keyframes") 110 | {:keys [selector 111 | garden-style 112 | nested-style 113 | type 114 | params 115 | style-object-value] :as item} (process-style id item)] 116 | (case type 117 | :class 118 | {:map (assoc map 119 | (:key selector) 120 | (:value selector)) 121 | :style 122 | (conj style 123 | (into [] (cons (:localised selector) 124 | (rest garden-style))))} 125 | 126 | ;unify at-keyframe and keyframe 127 | :at-keyframe 128 | (do 129 | {:map (assoc map (:key selector) (:value selector)) 130 | :style 131 | (conj style 132 | `~(concat [at-keyframes (:localised selector)] garden-style))}) 133 | 134 | :keyframe 135 | (do 136 | {:map (assoc map (:key selector) (:value selector)) 137 | :style 138 | (conj style 139 | `~(concat [at-keyframes (:localised selector)] (rest garden-style)))}) 140 | 141 | :media 142 | (let [{s :style m :map} (reduce (partial create-garden-style id) 143 | {:map {} 144 | :style []} 145 | nested-style)] 146 | {:map (merge map m) 147 | :style (conj style `(~at-media ~params ~s))}) 148 | 149 | :not-localised 150 | {:map map 151 | :style (conj style garden-style)} 152 | 153 | acc))) 154 | 155 | (defmacro defstyle 156 | [style-id & [fst :as style]] 157 | (let [compiler-opts? (or (symbol? fst) (map? fst)) 158 | compiler-opts (if compiler-opts? fst {}) 159 | test-flag (= true (last style)) 160 | style (cond 161 | (and compiler-opts? test-flag) (rest (drop-last style)) 162 | test-flag (drop-last style) 163 | compiler-opts? (rest style) 164 | :else style) 165 | css (symbol "garden.core" "css") 166 | inject-style-fn (symbol "cljs-css-modules.runtime" "inject-style!") 167 | id (if test-flag "test" (gensym)) 168 | {:keys [style map]} (reduce (partial create-garden-style id) 169 | {:map {} 170 | :style []} 171 | style)] 172 | (if (cljs-env? &env) 173 | `(do 174 | (def ~style-id ~map) 175 | (~inject-style-fn (apply ~css ~compiler-opts ~style) 176 | ~(str *ns*) 177 | ~(name style-id))) 178 | 179 | `(def ~style-id 180 | {:map ~map 181 | :css (apply ~css ~compiler-opts ~style)})))) 182 | -------------------------------------------------------------------------------- /src/cljs_css_modules/runtime.cljs: -------------------------------------------------------------------------------- 1 | (ns cljs-css-modules.runtime 2 | (:require [garden.core :refer [css]])) 3 | 4 | (def injected-styles (atom {})) 5 | 6 | (defn update-style! [element style] 7 | (set! (.-innerHTML element) style)) 8 | 9 | (defn create-style-element! [style id] 10 | (let [head (.-head js/document) 11 | element (.createElement js/document "style")] 12 | (assert (some? head) 13 | "An head element is required in the dom to inject the style.") 14 | (.appendChild head element) 15 | (update-style! element style) 16 | (swap! injected-styles assoc id element))) 17 | 18 | (defn inject-style! [style ns name] 19 | (let [id (symbol (str ns "-" name)) 20 | injected-style (id @injected-styles)] 21 | (if injected-style 22 | (update-style! injected-style style) 23 | (create-style-element! style id)))) 24 | -------------------------------------------------------------------------------- /test/clj/cljs_css_modules/core_test.clj: -------------------------------------------------------------------------------- 1 | (ns cljs-css-modules.core-test 2 | (:require [clojure.test :refer :all] 3 | [cljs-css-modules.macro :refer :all] 4 | [cljs-css-modules.core :refer :all])) 5 | 6 | ; style tests 7 | 8 | (def class-object (get selectors-to-localise 0)) 9 | (def keyframe-object (get selectors-to-localise 1)) 10 | 11 | (deftest should-be-localised-success 12 | (testing "should-be-localised function" 13 | (are [selector] (= class-object (should-be-localised selector)) 14 | ".class1", 15 | ".container", 16 | ".navbar" 17 | ".navbar:hover"))) 18 | 19 | (deftest should-be-localised-failure 20 | (testing "should-be-localised error" 21 | (are [selector] (= nil (should-be-localised selector)) 22 | "div", 23 | "a", 24 | "img"))) 25 | 26 | (deftest localise-class 27 | (testing "It should localise a class properly" 28 | (is (= ".class--id" (localise-selector "id" ".class" class-object))) 29 | (is (= ".class--id[foo=bla]" (localise-selector "id" ".class[foo=bla]" class-object))) 30 | (is (= ".class--id#id" (localise-selector "id" ".class#id" class-object))) 31 | (is (= ".class--id:pseudoclass" (localise-selector "id" ".class:pseudoclass" class-object))) 32 | (is (= ".class1--id.class2" (localise-selector "id" ".class1.class2" class-object))) 33 | (is (= ".class--id > selector" (localise-selector "id" ".class > selector" class-object))) 34 | (is (= ".class--id + selector" (localise-selector "id" ".class + selector" class-object))) 35 | (is (= ".class--id selector" (localise-selector "id" ".class selector" class-object))))) 36 | 37 | (deftest get-class-key 38 | (testing "It should create a symbol key with the name of the class" 39 | (are [key selector] (= key (get-selector-key selector class-object)) 40 | :class ".class" 41 | :class ".class[foo=bla]" 42 | :class ".class#id" 43 | :class ".class:pseudoclass" 44 | :class1 ".class1.class2" 45 | :class ".class > selector" 46 | :class ".class + selector" 47 | :class ".class selector" 48 | :class ".class"))) 49 | 50 | (deftest get-class-value 51 | (testing "It should create a value key with the name of the class (without the .)" 52 | (is (= "class" (get-selector-value ".class" class-object))) 53 | (is (= "class" (get-selector-value ".class[foo=bla]" class-object))) 54 | (is (= "class" (get-selector-value ".class#id" class-object))) 55 | (is (= "class" (get-selector-value ".class:pseudoclass" class-object))) 56 | (is (= "class1" (get-selector-value ".class1.class2" class-object))) 57 | (is (= "class" (get-selector-value ".class > selector" class-object))) 58 | (is (= "class" (get-selector-value ".class + selector" class-object))) 59 | (is (= "class" (get-selector-value ".class selector" class-object))) 60 | (is (= "class" (get-selector-value ".class" class-object))))) 61 | 62 | (deftest localise-keyframe 63 | (testing "It should localise a keyframe properly" 64 | (is (= "test--id" (localise-selector "id" "@keyframes test" keyframe-object))))) 65 | 66 | (deftest get-keyframe-key 67 | (testing "It should create a symbol key with the name of the keyframe" 68 | (is (= :test (get-selector-key "@keyframes test" keyframe-object))))) 69 | 70 | (def mobile 200) 71 | (def dix "10px") 72 | 73 | (deftest defstyle-macro 74 | (testing "defstyle macro should return a map containing an id for each class " 75 | (defstyle test 76 | {:pretty-print? false} 77 | (at-keyframes "keyframe-1" 78 | [:from {:top "50px"}] 79 | [:to {:top "150px"}]) 80 | (at-media {:min-width "500px" 81 | :max-width "500px"} 82 | [:.query-test {:margin "60px"} 83 | [:&:hover {:color "black"}]] 84 | [:h2 {:padding "10px"}]) 85 | (at-keyframes "animation-1" 86 | [:from {:top "0px"}] 87 | [:to {:top "200px"}]) 88 | [".container" {:margin "50px"} 89 | ["a" {:color "blue"}]] 90 | [".class-1" {:margin "50px"}] 91 | ["@keyframes keyframe-2" [:from {:margin "50px"}] 92 | [:to {:margin "100px"}]] 93 | ["#ida" {:margin dix}] 94 | [".class-2" ".lol" {:margin "50px"}] 95 | [".class-3" {:margin-top "60px" 96 | :padding "50px"}] true) 97 | (let [{:keys [map css] :as style} test] 98 | (is (= css 99 | (str 100 | "@keyframes keyframe-1--test{" 101 | "from{top:50px}" 102 | "to{top:150px}" 103 | "}" 104 | "@media(min-width:500px) and (max-width:500px){" 105 | ".query-test--test{margin:60px}" 106 | ".query-test--test:hover{color:black}" 107 | "h2{padding:10px}" 108 | "}" 109 | "@keyframes animation-1--test{" 110 | "from{top:0}" 111 | "to{top:200px}" 112 | "}" 113 | ".container--test{margin:50px}" 114 | ".container--test a{color:blue}" 115 | ".class-1--test{margin:50px}" 116 | "@keyframes keyframe-2--test{" 117 | "from{margin:50px}to{margin:100px}" 118 | "}" 119 | "#ida{margin:10px}" 120 | ".class-2--test,.lol{margin:50px}" 121 | ".class-3--test{margin-top:60px;padding:50px}"))) 122 | (is (= (:class-1 map) "class-1--test")) 123 | (is (= (:class-2 map) "class-2--test")) 124 | (is (= (:class-3 map) "class-3--test")) 125 | (is (= (:query-test map) "query-test--test")) 126 | (is (= (:keyframe-1 map) "keyframe-1--test")) 127 | (is (= (:keyframe-2 map) "keyframe-2--test")) 128 | (is (= (:container map) "container--test")) 129 | (is (= (:animation-1 map) "animation-1--test")) 130 | (is (= (count map) 8))))) 131 | -------------------------------------------------------------------------------- /test/cljs/cljs_css_modules/macro_test.cljs: -------------------------------------------------------------------------------- 1 | (ns cljs-css-modules.macro-test 2 | (:require [cljs.test :refer-macros [deftest testing is]] 3 | [cljs-css-modules.macro :refer-macros [defstyle]])) 4 | 5 | (deftest defstyle-macro 6 | (testing "defstyle macro should return a map containing an id for each class " 7 | (defstyle style 8 | {:pretty-print? false} 9 | (at-keyframes "keyframe-1" 10 | [:from {:top "50px"}] 11 | [:to {:top "150px"}]) 12 | (at-media {:min-width "200px" 13 | :max-width "500px"} 14 | [:.query-test {:margin "60px"} 15 | [:&:hover {:color "black"}]] 16 | [:h2 {:padding "10px"}]) 17 | (at-keyframes "animation-1" 18 | [:from {:top "0px"}] 19 | [:to {:top "200px"}]) 20 | [".container" {:margin "50px"} 21 | ["a" {:color "blue"}]] 22 | [".class-1" {:margin "50px"}] 23 | ["@keyframes keyframe-2" [:from {:margin "50px"}] 24 | [:to {:margin "100px"}]] 25 | ["#ida" {:margin "10px"}] 26 | [".class-2" ".lol" {:margin "50px"}] 27 | [".class-3" {:margin-top "60px" 28 | :padding "50px"}] true) 29 | (is (= (.-innerHTML (.querySelector js/document "head > style")) 30 | (str 31 | "@keyframes keyframe-1--test{" 32 | "from{top:50px}" 33 | "to{top:150px}" 34 | "}" 35 | "@media(min-width:200px) and(max-width:500px){" 36 | ".query-test--test{margin:60px}" 37 | ".query-test--test:hover{color:black}" 38 | "h2{padding:10px}" 39 | "}" 40 | "@keyframes animation-1--test{" 41 | "from{top:0px}" 42 | "to{top:200px}" 43 | "}" 44 | ".container--test{margin:50px}" 45 | ".container--test a{color:blue}" 46 | ".class-1--test{margin:50px}" 47 | "@keyframes keyframe-2--test{" 48 | "from{margin:50px}to{margin:100px}" 49 | "}" 50 | "#ida{margin:10px}" 51 | ".class-2--test,.lol{margin:50px}" 52 | ".class-3--test{margin-top:60px;padding:50px}"))) 53 | (is (= (:class-1 style) "class-1--test")) 54 | (is (= (:class-2 style) "class-2--test")) 55 | (is (= (:class-3 style) "class-3--test")) 56 | (is (= (:query-test style) "query-test--test")) 57 | (is (= (:keyframe-1 style) "keyframe-1--test")) 58 | (is (= (:keyframe-2 style) "keyframe-2--test")) 59 | (is (= (:container style) "container--test")) 60 | (is (= (:animation-1 style) "animation-1--test")) 61 | (is (= (count style) 8)))) 62 | -------------------------------------------------------------------------------- /test/cljs/cljs_css_modules/runner.cljs: -------------------------------------------------------------------------------- 1 | (ns cljs-css-modules.runner 2 | (:require [doo.runner :refer-macros [doo-tests]] 3 | [cljs-css-modules.macro-test])) 4 | 5 | (doo-tests 6 | 'cljs-css-modules.macro-test) 7 | --------------------------------------------------------------------------------