### Integrating Fulcro CSS with Extra Props Middleware

Source: https://github.com/fulcrologic/fulcro-garden-css/blob/develop/README.adoc

Shows how to configure the Fulcro application to use Fulcro's `wrap-update-extra-props` middleware. This setup automatically merges CSS class names obtained via `css/get-classnames` into the component's 4th (extra-props) argument, providing syntactic convenience.

```clojure
(ns fulcro-todomvc.main
  (:require
    [com.fulcrologic.fulcro.components :as comp]
    [com.fulcrologic.fulcro-css.css :as css]))

(def app (app/fulcro-app {:props-middleware (comp/wrap-update-extra-props
                                               (fn [cls extra-props]
                                                 (merge extra-props (css/get-classnames cls))))
                          ...}))
```

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

### Performance Optimization: Manual CSS Class Destructuring

Source: https://github.com/fulcrologic/fulcro-garden-css/blob/develop/README.adoc

Provides an example of a performance optimization technique: manually destructuring CSS class names using `css/get-classnames` within a `let` binding and applying them via the `:classes` argument in the normal Fulcro DOM. This approach can be used to avoid the overhead associated with the extra props middleware.

```clojure
(let [{:keys [red]} (css/get-classnames UIElement)]
  (dom/div {:classes [red] ...}))
```

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

### Localized DOM API for CSS Classnames

Source: https://github.com/fulcrologic/fulcro-garden-css/blob/develop/README.adoc

Explains the usage of the `localized-dom` (ldom) API for specifying localized CSS classnames using keyword shortcuts (e.g., `:.red`). It also demonstrates how to access global classnames by prefixing with `$` (e.g., `:.red$big`) and how to mix `ldom` with Fulcro's normal `dom` by requiring them under different namespaces.

```clojure
(ldom/div :.red ...)
(ldom/div :.red$big ...)

;; Use Fulcro's normal dom to get <div class="big">
(dom/div :.big ...)

;; Use this library's dom to get <div class="some_namespace_Component__red">
(ldom/div :.red ...)
```

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

### Including CSS from Untracked Components

Source: https://github.com/fulcrologic/fulcro-garden-css/blob/develop/README.adoc

Illustrates how to include CSS from components that are not part of the parent's query by using the `:css-include` option in the component definition, ensuring their styles are injected into the DOM.

```clojure
(defsc UtilityComponent [this props comp-props]
 {:css [[:.red {:color "red"}]]}
 (dom/div :.red))

(def ui-utility-component ...)


(defsc Root [this props]
  {...normal options ...
   ;; Include untracked component
   :css-include [UtilityComponent]}
  (dom/div {}
    (ui-utility-component ...)
    (inj/style-element {:component Root})
    ...))
```

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

### Basic Fulcro Component CSS Usage

Source: https://github.com/fulcrologic/fulcro-garden-css/blob/develop/README.adoc

Demonstrates how to integrate co-located CSS into Fulcro components. It shows three options for accessing generated class names: 4th argument destructuring, explicit destructuring with `css/get-classnames`, and using `localized-dom` keyword classes. It also illustrates how to inject styles into the DOM using `inj/style-element`.

```clojure
(ns some-app
  (:require
    [com.fulcrologic.fulcro-css.localized-dom :as dom]
    [com.fulcrologic.fulcro-css.css-injection :as inj]
    [com.fulcrologic.fulcro-css.css :as css]))

...

;; OPTION 1: 4th arg destructing (requires adding props middleware)
(defsc UIElement [this props computed {:keys [red]}]
  {:query ...
   :css   [[:.red {:color "red"}]]}

  ;; OPTION 2: Destructure them explicitly
  (let [{:keys [red]} (css/get-classnames UIElement)]
    ;; OPTION 3: Use `localized-dom` keyword classes instead of `dom` for elements
    (dom/div :.red
      (dom/li {:classes [red]})))
  ...)

(defsc Root [this props]
  {...normal options ...}
  (dom/div {}
    ;; Auto-scan the query to find components with CSS and inject it
    (inj/style-element {:component Root})
    ...))
```

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

### Initialize Global CSRF Token Variable in JavaScript

Source: https://github.com/fulcrologic/fulcro-garden-css/blob/develop/resources/public/index.html

This JavaScript snippet declares and initializes a global variable named `fulcro_network_csrf_token` to an empty string. This variable is commonly used in web applications to store a Cross-Site Request Forgery (CSRF) token, which is then included in network requests to protect against CSRF attacks.

```JavaScript
var fulcro_network_csrf_token = '';
```

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

### Declare CSRF Token Variable in JavaScript

Source: https://github.com/fulcrologic/fulcro-garden-css/blob/develop/index.html

This snippet declares a global JavaScript variable `fulcro_network_csrf_token` and initializes it as an empty string. This variable is commonly used in web applications to store a Cross-Site Request Forgery (CSRF) token, which is essential for securing form submissions and API requests against CSRF attacks.

```JavaScript
var fulcro_network_csrf_token = '';
```

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