CleanCSS

CleanCSS - is a tool that removes unused CSS stylesheets

Usage

1. Add a dependency:

cleancss/cleancss {:mvn/version "RELEASE"}

2. Create the cleancss.edn configuration file in the root directory of the project:

{;; project sources
 :watch-dirs ["src"]
 
 :application
 {;; :all - Includes all functions `cleancss.state/functions`. Or a custom set #{":lang" ...}
  :functions :all

  ;; :all - Includes all pseudos `cleancss.state/pseudos`. Or a custom set #{":hover" ...}
  :pseudos :all

  ;; :all - Includes all types `cleancss.state/types`. Or a custom set #{"*", "div" ...}
  :types :all

  ;; If you do not specify a value, the data will be taken from the application
  ;; :identifiers #{"id"}
  ;; :classes     #{"name"}
  ;; :attributes  #{["hidden"] ["hreflang" "en"]}
  }

 :build
 {;; Path to the source css file
  :import {:input-files ["resources/public/css/tailwind.min.css"]}

  ;; The path to the file where the final result will be stored
  :export {:output-file "resources/public/css/cleancss.css"}}}

3. Add a call to cleancss.hooks/reset before building the project and cleancss.hooks/build after building.For example, in figwheel-main, this is configured as follows:

  :clean-outputs    true
  :pre-build-hooks  [cleancss.hooks/reset]
  :post-build-hooks [cleancss.hooks/build]

4. Wrap all the styles you use in a macro

(ns app.core
  (:require
   [cleancss.state :refer [c i a]))

(defn component
  []
  ;; classes
  [:nav {:class (c "shadow-md" "rounded-lg")}

   ;; identifiers
   [:button {:id (i "id")}
    "Login"]

   ;; attributes, classes, identifiers
   [:button (a {:id "send" :class ["save"] :type "button"})
    "Info"]])

Demo