(defcss name)(defcss name path & {:keys [conditional] :as opts})Loads CSS file at compile time and injects into document head.
Use this for document-level styles in Replicant, Reagent, or vanilla CLJS apps.
Usage: (defcss app-styles "app.css") ; auto-injects on load (defcss app-styles "app.css" :path "custom/") ; custom resource path (defcss app-styles "app.css" :conditional true) ; returns fn, call to inject
Options: :path - Custom resource path prefix :conditional - If true, returns a function that injects when called
Examples: ;; Auto-inject (default) - styles injected when namespace loads (ns my-app.core (:require-macros [tyrell.css :refer [defcss]]))
(defcss app-styles "app.css") ;; Done! Styles are in document.head
;; Conditional - control when styles are injected (defcss theme-styles "dark.css" :conditional true)
(defn apply-dark-mode! [] (theme-styles)) ; injects when called
Loads CSS file at compile time and injects into document head.
Use this for document-level styles in Replicant, Reagent, or vanilla CLJS apps.
Usage:
(defcss app-styles "app.css") ; auto-injects on load
(defcss app-styles "app.css" :path "custom/") ; custom resource path
(defcss app-styles "app.css" :conditional true) ; returns fn, call to inject
Options:
:path - Custom resource path prefix
:conditional - If true, returns a function that injects when called
Examples:
;; Auto-inject (default) - styles injected when namespace loads
(ns my-app.core
(:require-macros [tyrell.css :refer [defcss]]))
(defcss app-styles "app.css")
;; Done! Styles are in document.head
;; Conditional - control when styles are injected
(defcss theme-styles "dark.css" :conditional true)
(defn apply-dark-mode! []
(theme-styles)) ; injects when called(defstyles name)(defstyles name path)Loads CSS file at compile time and returns a CSSStyleSheet object.
Use this for shadow DOM styles in web components. Pair with ensure-styles! to apply to shadow root.
Usage: (defstyles button-styles) ; looks for <namespace>.css (defstyles button-styles "custom.css") ; custom filename in same dir (defstyles button-styles "shared/base.css") ; path from resources root
Example: (ns my-app.components.button (:require [tyrell.css :refer [ensure-styles!]] [tyrell.shim :as shim]) (:require-macros [tyrell.css :refer [defstyles]]))
(defstyles button-styles "button.css")
(defn render! [el] (let [shadow (shim/ensure-shadow el)] (ensure-styles! shadow button-styles "my-button") ...))
Loads CSS file at compile time and returns a CSSStyleSheet object.
Use this for shadow DOM styles in web components.
Pair with ensure-styles! to apply to shadow root.
Usage:
(defstyles button-styles) ; looks for <namespace>.css
(defstyles button-styles "custom.css") ; custom filename in same dir
(defstyles button-styles "shared/base.css") ; path from resources root
Example:
(ns my-app.components.button
(:require [tyrell.css :refer [ensure-styles!]]
[tyrell.shim :as shim])
(:require-macros [tyrell.css :refer [defstyles]]))
(defstyles button-styles "button.css")
(defn render! [el]
(let [shadow (shim/ensure-shadow el)]
(ensure-styles! shadow button-styles "my-button")
...))(ensure-document-styles! styles style-id)Injects styles into document head. Handles duplicates and hot reload.
Arguments:
Behavior:
Example: (ensure-document-styles! my-styles "my-app-globals") (ensure-document-styles! ".foo { color: red; }" "inline-styles")
Injects styles into document head. Handles duplicates and hot reload.
Arguments:
- styles: CSSStyleSheet object (from defstyles) or CSS string
- style-id: Unique identifier for the style element
Behavior:
- If style-id doesn't exist: creates new <style> element
- If style-id exists with same content: does nothing
- If style-id exists with different content: updates (hot reload)
Example:
(ensure-document-styles! my-styles "my-app-globals")
(ensure-document-styles! ".foo { color: red; }" "inline-styles")(ensure-styles! shadow-root styles)(ensure-styles! shadow-root styles style-id)Applies styles to a shadow root. Handles duplicates and hot reload.
Arguments:
For CSSStyleSheet:
For string styles:
Applies styles to a shadow root. Handles duplicates and hot reload. Arguments: - shadow-root: The shadow DOM root element - styles: CSSStyleSheet object (from defstyles) or CSS string - style-id: Unique identifier (optional, auto-generated if not provided) For CSSStyleSheet: - Uses adoptedStyleSheets (efficient, shared across shadow roots) - Adds if not already present For string styles: - Creates/updates <style> element - Updates content if changed (hot reload support)
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |