1.5.12

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 1.5.12
+- Require Sablono compiler extension to fix `:css` prop compilation
+- Fix CSS pseudos compilation for production
+- Fix CSS pseudos compilation with dynamic styles
+
 ## 1.5.11
 - Add `inject-global` macro
 

README.md

@@ -172,7 +172,7 @@ _NOTE: This feature is supported only for Rum/Sablono elements_
 
 ## Installation
 
-Add to project.clj: `[org.roman01la/cljss "1.5.11"]`
+Add to project.clj: `[org.roman01la/cljss "1.5.12"]`
 
 ## Usage
 

project.clj

@@ -1,26 +1,26 @@
-(defproject org.roman01la/cljss "1.5.11"
+(defproject org.roman01la/cljss "1.5.12"
   :description "Clojure Style Sheets"
 
   :url "https://github.com/roman01la/cljss"
 
   :license {:name "Eclipse Public License"
-            :url "http://www.eclipse.org/legal/epl-v10.html"}
+            :url  "http://www.eclipse.org/legal/epl-v10.html"}
 
-  :dependencies [[org.clojure/clojure "1.9.0-alpha16" :scope "provided"]
-                 [org.clojure/clojurescript "1.9.562" :scope "provided"]]
+  :dependencies [[org.clojure/clojure "1.9.0-beta3" :scope "provided"]
+                 [org.clojure/clojurescript "1.9.946" :scope "provided"]]
 
   :test-paths ["test/clj"]
 
   :profiles {:dev {:source-paths ["src" "test/clj"]
-
-                   :plugins [[lein-doo "0.1.8"]
-                             [lein-cljsbuild "1.1.7"]]}}
+                   :dependencies [[sablono "0.8.1"]]
+                   :plugins      [[lein-doo "0.1.8"]
+                                  [lein-cljsbuild "1.1.7"]]}}
 
   :aliases {"test-all" ["do" ["test"] ["doo" "phantom" "test" "once"]]}
 
   :cljsbuild
-  {:builds [{:id "test"
+  {:builds [{:id           "test"
              :source-paths ["src" "test/cljs"]
-             :compiler {:output-to "resources/public/js/testable.js"
-                        :main cljss.runner
-                        :optimizations :none}}]})
+             :compiler     {:output-to     "resources/public/js/testable.js"
+                            :main          cljss.runner
+                            :optimizations :none}}]})

test/clj/cljss/core_test.clj

@@ -1,6 +1,7 @@
 (ns cljss.core-test
   (:require [clojure.test :refer :all]
             [cljss.core :refer :all]
+            [cljss.builder :refer :all]
             [cljss.font-face :as ff]
             [cljss.inject-global :as ig]))
 
@@ -26,49 +27,52 @@
 ;;; unique ids for style classes are generated
 ;;; from the hashed set of non pseudo styles
 ;;; this function replicates initialization
-;;; of styles in cljss.core/build-styles
+;;; of styles in cljss.builder/build-styles
 ;;; and produces the same hashed value used in
 ;;; style ids
 (defn remove-pseudo [styles]
   (filterv
-    (comp not #'cljss.core/pseudo?)
+    (comp not #'cljss.builder/pseudo?)
     styles))
 
 (deftest test-build-styles
   (testing "building basic styles"
-    (let [[static vals] (build-styles "test" basic-styles)]
-      (is (= (str ".test{color:red;}") static))
+    (let [[[id static vals]] (build-styles "test" basic-styles)]
+      (is (= "test" id))
+      (is (= ".test{color:red;}" static))
       (is (empty? vals))))
 
   (testing "building dynamic styles"
-    (let [[static vals] (build-styles "test" dynamic-styles)]
-      (is (= (str ".test{background-color:var(--var-test-0);margin:var(--var-test-1);}") static))
+    (let [[[id static vals]] (build-styles "test" dynamic-styles)]
+      (is (= "test" id))
+      (is (= ".test{background-color:var(--var-test-0);margin:var(--var-test-1);}" static))
       (is (= [["--var-test-0" (:background-color dynamic-styles)] ["--var-test-1" (:margin dynamic-styles)]] vals))))
 
   (testing "building basic pseudo styles"
-    (let [[static vals] (build-styles "test" pseudo-styles)]
-      (is (= (str ".test{color:red;}.test:hover{color:blue;}") static))
-      (is (empty? vals))))
+    (let [result (build-styles "test" pseudo-styles)]
+      (is (= result
+             [["test" ".test{color:red;}" []]
+              [".test:hover" ".test:hover{color:blue;}" []]]))))
 
-  (testing "building dynamic psuedo styles"
-    (let [[static vals] (build-styles "test" pseudo-dynamic-styles)]
-      (is (= (-> ".test"
-                 (str "{color:red;}")
-                 (str ".test:hover{color:blue;}")
-                 (str ".test:active{color:var(--var-test:active-0);}")) static))
-      (is (= [["--var-test:active-0" (get-in pseudo-dynamic-styles [:&:active :color])]] vals))))
+  (testing "building dynamic pseudo styles"
+    (let [result (build-styles "test" pseudo-dynamic-styles)]
+      (is (= result
+             [["test"
+               ".test{color:red;}"
+               [["--var-test-1" (get-in pseudo-dynamic-styles [:&:active :color])]]]
+              [".test:hover" ".test:hover{color:blue;}" []]
+              [".test:active" ".test:active{color:var(--var-test-1);}" []]]))))
 
   (testing "building a complete set of styles"
-    (let [[static vals] (build-styles "test" complete-styles)]
-      (is (= (-> ".test"
-                 (str "{color:red;")
-                 (str "background-color:var(--var-test-0);")
-                 (str "margin:var(--var-test-1);}")
-                 (str ".test:hover{color:blue;}")
-                 (str ".test:active{color:var(--var-test:active-2);}")) static))
-      (is (= [["--var-test-0" (:background-color complete-styles)]
-              ["--var-test-1" (:margin complete-styles)]
-              ["--var-test:active-2" (get-in complete-styles [:&:active :color])]] vals)))))
+    (let [result (build-styles "test" complete-styles)]
+      (is (= result
+             [["test"
+               ".test{color:red;background-color:var(--var-test-0);margin:var(--var-test-1);}"
+               [["--var-test-0" (:background-color complete-styles)]
+                ["--var-test-1" (:margin complete-styles)]
+                ["--var-test-3" (get-in complete-styles [:&:active :color])]]]
+              [".test:hover" ".test:hover{color:blue;}" []]
+              [".test:active" ".test:active{color:var(--var-test-3);}" []]])))))
 
 (deftest test-font-face
   (testing "build @font-face"