Clojure Style Sheets

CSS-in-JS for ClojureScript

Features
How it works
Installation
Usage
Production build
Issues
License

Features

Isolated styles by generating unique names
Supports CSS pseudo-classes and pseudo-elements
Injects styles into DOM within <style> tags in development
Outputs styles into a single file for production

How it works

defstyles macro accepts a hash map of style definitions and returns a hash map from style names to generated unique names.

Installation

Add to project.clj: [org.roman01la/cljss "0.1.0-SNAPSHOT"]

Usage

(defstyles name id styles)

name name of a var
id a fully-qualified keyword (used for injecting unique <style> tag during development)
styles a hash map of styles definitions

Using Sablono templating for React

(ns example
  (:require [cljss.core :refer-macros [defstyles]]
            [sablono.core :refer-macros [html]]))

(defstyles styles ::list
  {:list {:display "flex"
          :flex-direction "column"}
   :list-item {:height "48px"
               :background "#cccccc"
               :color "#242424"
               :font-size "18px"}
   :list-item:hover {:background "#dddddd"}
   :list-item:last-child::after {:content "last item"
                                 :display "block"
                                 :position "relative"}})

;; styles =>
;; {:list "list43696",
;;  :list-item "list-item43697"}

(html
  [:ul {:class (:list styles)}
   [:li {:class (:list-item styles)} "Item#1"]
   [:li {:class (:list-item styles)} "Item#2"]
   [:li {:class (:list-item styles)} "Item#3"]])

Output CSS (pretty):

.list43696 {
  display: flex;
  flex-direction: column;
}
.list-item43697 {
  height: 48px;
  background: #cccccc;
  color: #242424;
  font-size: 18px;
}
.list-item43697:hover {
  background: #dddddd;
}
.list-item43697:last-child::after {
  content: "last item";
  display: block;
  position: relative;
}

Production build

Compiler options

{:compiler
 {:css-output-to "resources/public/css/styles.css"}}

Issues

If you are using Figwheel with build config validation enabled, you'll see an error The key :css-output-to is unrecognized in REPL when starting a project. Set :validate-interactive :start in Figwheel config to prevent it from interrupting startup. Validation errors still will be displayed.

License

Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.

lambdahands/cljss