### Start Node.js REPL for ClojureScript

Source: https://github.com/noprompt/garden/blob/master/README.md

Leiningen command to launch a Node.js Read-Eval-Print Loop (REPL) for interactive development and testing of ClojureScript code. This allows for immediate feedback during development.

```bash
lein node-repl
```

--------------------------------

### Defining Child Selectors in Garden

Source: https://github.com/noprompt/garden/blob/master/README.md

Shows how to use nested vectors to create child selectors (e.g., `h1 a`), demonstrating how Garden translates this structure into descendant selectors in the compiled CSS. Includes an example with multiple parent selectors.

```Clojure
user=> (css [:h1 [:a {:text-decoration "none"}]])
"h1 a{text-decoration:none}"
user=> (css [:h1 :h2 [:a {:text-decoration "none"}]])
"h1 a, h2 a{text-decoration:none}"
```

--------------------------------

### Complex Nested Selectors with Multiple Rules

Source: https://github.com/noprompt/garden/blob/master/README.md

Provides a more advanced example of nested vectors combining multiple selectors and rules, demonstrating how Garden expands these into a comprehensive set of CSS rules.

```Clojure
user=> (css [:h1 :h2 {:font-weight "normal"}
             [:strong :b {:font-weight "bold"}]])
"h1,h2{font-weight:normal}h1 strong,h1 b,h2 strong,h2 b{font-weight:bold}"
```

--------------------------------

### Customizing Vendor Prefixes in Garden CSS

Source: https://github.com/noprompt/garden/blob/master/ChangeLog.md

This example demonstrates how to override default vendor prefixes at the declaration level in Garden. It shows how to specify a global vendor list and then override it for a specific property using metadata, resulting in a custom prefixed CSS output.

```Clojure
(css {:vendors [:foo]}
  [:a
   ^{:prefix true :vendors [:bar]}
   {:x 1}])
```

```CSS
a {
  x: 1;
  -bar-x: 1;
}
```

--------------------------------

### Define and Include CSS Keyframes Animations with `defkeyframes` in Clojure

Source: https://github.com/noprompt/garden/blob/master/ChangeLog.md

This example illustrates the use of `defkeyframes` to define reusable CSS `@keyframes` animation blocks in Clojure. It shows how to include the defined animation directly in a stylesheet and apply it to an HTML element using the `animation` property, demonstrating the generated CSS output.

```clojure
(defkeyframes my-animation
  [:from
   {:background "red"}]

  [:to
   {:background "yellow"}])

(css
  my-animation ;; Include the animation in the stylesheet.
  [:div
   {:animation [[my-animation "5s"]]}])
```

```css
@keyframes my-animation {

  from {
    background: red;
  }

  to {
    background: yellow;
  }

}

div {
  animation: my-animation 5s;
}
```

--------------------------------

### Define and Use Custom CSS Functions with `cssfn` and `defcssfn` in Clojure

Source: https://github.com/noprompt/garden/blob/master/ChangeLog.md

This snippet demonstrates how to define custom CSS functions using `defcssfn` and `cssfn` in Garden. These functions automatically return new instances of `CSSFunction`, allowing them to be used within Garden's CSS generation. Examples show how different arities of the defined function are rendered into CSS.

```clojure
(require '[garden.def :refer [cssfn defcss]])

(defcssfn example
  "Create a CSS example function."
  ([arg] arg)
  ([arg1 arg2] [arg1 arg2])
  ([arg1 arg2 arg3] [arg1 [arg2 arg3]])

(css [:sel {:prop (example 1)}])
;; => sel{prop:example(1)}

(css [:sel {:prop (example 1 2)}])
;; => sel{prop:example(1,2)}

(css [:sel {:prop (example 1 2 3)}])
;; => sel{prop:example(1,2 3)}

(let [example (cssfn "example")]
  (css [:sel {:prop (example [1 [2 3]])}]))
;; => sel{prop:example(1,2 3)}
```

--------------------------------

### Basic CSS Generation with Garden's `css` Function

Source: https://github.com/noprompt/garden/blob/master/README.md

Demonstrates how to require the `garden.core` namespace and use the `css` function to convert a Clojure data structure into a CSS string, showing a simple body style.

```Clojure
user=> (require '[garden.core :refer [css]])
nil
user=> (css [:body {:font-size "16px"}])
"body{font-size:16px}"
```

--------------------------------

### Demonstrating CSS Selector Generation with garden.selectors

Source: https://github.com/noprompt/garden/blob/master/ChangeLog.md

This snippet illustrates how to use the `garden.selectors` namespace in Clojure to construct CSS selectors. It shows basic selector creation, pseudoclass application, and integration with `garden.core/css` to generate a complete CSS rule, demonstrating how `CSSSelector` instances can be treated as values and functions.

```Clojure
user> (ns foo
        (:use [garden.selectors :as s
               :exclude [+ - > empty first map meta not time var]])
        (:require
         [garden.repl]
         [garden.core :refer [css]]))

foo> a
a
foo> (a)
a
foo> (a hover)
a:hover
foo> (css [(a hover) {:font-weight :bold}])
"a:hover {\n  font-weight: bold;\n}"
```

--------------------------------

### Using defstyles and defstylesheet Macros for CSS Definition

Source: https://github.com/noprompt/garden/blob/master/ChangeLog.md

This snippet illustrates the usage of `defstyles` and `defstylesheet` macros from `garden.def`. It shows how these macros simplify the definition of CSS styles and stylesheets, providing a more concise syntax compared to their manual `def` and `css` equivalents.

```Clojure
(require '[garden.def :refer [defstyles defstylesheet]])

;; This:
(defstyles h1-styles
  [:h1 {:font-weight "normal"}])

;; is equivalent to:
(def h1-styles
  (list
    [:h1 {:font-weight "normal"}]))

;; This:
(defstylesheet screen
  {:output-to (io/resource "public/css/screen.css")}
  h1-styles)

;; is equivalent to:
(def screen
  (css {:output-to (io/resource "public/css/screen.css")}
    h1-styles))
```

--------------------------------

### Render Basic CSS from Clojure Map

Source: https://github.com/noprompt/garden/blob/master/README.md

Demonstrates how to convert a Clojure map representing CSS rules into a CSS string using the `css` function. Shows basic property rendering for a `body` element.

```clojure
user=> (css [:body {:font "16px sans-serif"}])
"body{font:16px sans-serif}"
```

--------------------------------

### Defining Custom CSS Functions with `defcssfn`

Source: https://github.com/noprompt/garden/blob/master/README.md

Explains how to use the `defcssfn` macro to define custom CSS functions not natively supported by Garden, enabling their use in CSS generation, as demonstrated with the `url` function.

```Clojure
(defcssfn url)
;; => #'user/url
```

```Clojure
(css (url "http://fonts.googleapis.com/css?family=Lato"))
;; => url(http://fonts.googleapis.com/css?family=Lato)
```

--------------------------------

### Run Both Clojure and ClojureScript Tests

Source: https://github.com/noprompt/garden/blob/master/README.md

Leiningen command to execute all unit tests for both Clojure and ClojureScript sources in the project. This provides comprehensive test coverage for the entire codebase.

```bash
lein test-cljc
```

--------------------------------

### Build ClojureScript Project

Source: https://github.com/noprompt/garden/blob/master/README.md

Leiningen command to compile ClojureScript source files, preparing the project for deployment or testing. This is a common step in the ClojureScript development workflow.

```bash
lein build-cljs
```

--------------------------------

### Run ClojureScript Tests on Node.js

Source: https://github.com/noprompt/garden/blob/master/README.md

Leiningen command to execute all ClojureScript unit tests within the project, specifically targeting the Node.js runtime environment. This ensures client-side code functions as expected.

```bash
lein test-cljs
```

--------------------------------

### Run Clojure Tests

Source: https://github.com/noprompt/garden/blob/master/README.md

Leiningen command to execute all Clojure unit tests defined in the project. This command uses the built-in Leiningen test runner to verify Clojure code correctness.

```bash
lein test-clj
```

--------------------------------

### Composing Complex CSS Selectors with `garden.selectors`

Source: https://github.com/noprompt/garden/blob/master/README.md

Illustrates the use of `defselector`, `defpseudoclass`, and `defpseudoelement` macros from `garden.selectors` to define and compose custom CSS selectors, showing how they translate into a complex CSS selector string.

```Clojure
(defselector *)
(defpseudoclass host [x] x)
(defpseudoelement content)
(> (host (attr :flipped)) content (* last-child))
;; => :host([flipped]) > ::content > *:last-child
```

--------------------------------

### Calculating CSS Selector Specificity with Garden

Source: https://github.com/noprompt/garden/blob/master/README.md

Demonstrates the `specificity` function from `garden.selectors`, which calculates the CSS specificity value for a given selector string or Garden selector structure.

```Clojure
(specificity "#s12:not(FOO)")
;; => 101
(specificity (a hover))
;; => 10
```

--------------------------------

### Generating CSS with Multiple Selectors

Source: https://github.com/noprompt/garden/blob/master/README.md

Illustrates how to define multiple CSS selectors (e.g., h1, h2) within a single Garden vector to apply common styles, resulting in a comma-separated selector list in the output CSS.

```Clojure
user=> (css [:h1 :h2 {:font-weight "none"}])
"h1,h2{font-weight:none}"
```

--------------------------------

### Apply Vendor Prefixes Automatically with `:vendors` Flag in Garden CSS Generation

Source: https://github.com/noprompt/garden/blob/master/ChangeLog.md

This snippet demonstrates how to use the `:vendors` compiler flag to automatically apply browser-specific prefixes (e.g., `-moz-`, `-webkit-`) to CSS properties and `@keyframes` rules. It shows how to configure the flag and the resulting CSS output, ensuring broader compatibility across different browsers.

```clojure
(require '[garden.stylesheet :refer [at-keyframes]])

(css {:vendors ["moz" "webkit"]
      :pretty-print? true}
  [:* :*:after :*:before
   ^:prefix {:box-sizing "border-box"}]

  (at-keyframes "foo"
    [:from
     {:foo "bar"}]
    [:to
     {:foo "baz"}]))
```

```css
*, *:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@keyframes foo {

  from {
    foo: bar;
  }

  to {
    foo: baz;
  }

}

@-moz-keyframes foo {

  from {
    foo: bar;
  }

  to {
    foo: baz;
  }

}

@-webkit-keyframes foo {

  from {
    foo: bar;
  }

  to {
    foo: baz;
  }

}
```

--------------------------------

### CSS Declaration Map Key Types in Garden

Source: https://github.com/noprompt/garden/blob/master/README.md

Shows the various valid types for keys in Garden's CSS declaration maps (strings, keywords, symbols), and highlights that Garden does not validate key types, allowing unusual keys to pass through.

```Clojure
user=> (css [:h1 {"font-weight" "normal"}])
"h1{font-weight:normal}"
user=> (css [:h1 {:font-weight "normal"}])
"h1{font-weight:normal}"
user=> (css [:h1 {'font-weight "normal"}])
"h1{font-weight:normal}"
```

```Clojure
user=> (css [:h1 {30000 "nom-nom"}])
"h1{30000:nom-nom}"
```

--------------------------------

### Using Parent Selector Reference (`&`) in Garden

Source: https://github.com/noprompt/garden/blob/master/README.md

Explains how Garden supports the `&` character, similar to Less/Sass, to reference the parent selector within nested rules, useful for pseudo-classes like `:hover`.

```Clojure
user=> (css [:a
             {:font-weight 'normal
              :text-decoration 'none}
             [:&:hover
              {:font-weight 'bold
               :text-decoration 'underline}]])
"a{text-decoration:none;font-weight:normal}a:hover{text-decoration:underline;font-weight:bold}"
```

--------------------------------

### Escape Literal String Values in Clojure CSS

Source: https://github.com/noprompt/garden/blob/master/README.md

Illustrates the necessity of manually escaping literal string values within CSS properties when using the `css` function. Shows how to include quoted font names for `font-family`.

```clojure
user=> (css [:pre {:font-family "\"Liberation Mono\", Consolas, monospace"}])
"pre{font-family:\"Liberation Mono\", Consolas, monospace}"
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.