lambdaisland.ornament — com.lambdaisland/ornament 0.4.34

CSS-in-clj(s)

*strip-prefixes* clj/s

Prefixes to be stripped from class names in generated CSS

add-class clj/s

(add-class classes class)

Hiccup helper, add a CSS classname to an existing :class property

We allow components to define :class as a string, a vector, or to use a styled component directly as a class. (This last behavior is to support some legacy code, we recommend using a wrapping vector in that case).

This function handles these cases, and will always return a vector of class names.

class-name->garden clj

(class-name->garden n)

classname-for clj

(classname-for varsym)

Convert a fully qualified symbol into a CSS classname

Munges special characters, and honors :ornament/prefix metadata on the namespace.

cljs-restore-registry clj

(cljs-restore-registry compiler-env)

Restore the Ornament registry based on a ClojureScript compiler env

Due to caching some defstyled macros may not get recompiled, causing gaps in the CSS. To work around this we add Ornament data to the cljs analyzer var metadata, so it gets cached and restored with the rest of the analyzer state.

default-tokens clj

defined-garden clj

(defined-garden)

defined-styles clj

(defined-styles & [{:keys [preflight?] :or {preflight? false}}])

defstyled clj/s macro

(defstyled sym tagname & styles)

expand-hiccup-tag clj/s

(expand-hiccup-tag tag css-class args component)

Handle expanding/rendering the component to Hiccup

For plain defstyled components this simply adds the CSS class name. For components with a function tail this handles calling it, and handles setting attributes on the resulting element via metadata on the result.

fn-tail? clj

(fn-tail? o)

girouette-api clj

Atom containing the return value of [[girouette/make-api]], making it possible to swap this out for your own Girouette instance. See also set-tokens! for a convenient API for common use cases.

join-vector-by clj

(join-vector-by sep val)

munge-map clj

munge-str clj

(munge-str s)

process-property clj multimethod

Special handling of certain CSS properties. E.g. setting :grid-template-areas using a vector.

process-rule clj/s≠

clj

(process-rule rule)

Process a single "rule" into plain Garden

Components receive a list of rules. These can be Garden-style maps, Girouette-style keywords, or Garden-style vectors of selectors+rules. This function together with process-tag and process-property defines the recursive logic to turn this into something we can pass to the Garden compiler.

cljs

process-rules clj

(process-rules rules)

Process the complete set of rules for a component, see process-rule

If multiple consecutive rules result in Garden property maps, then they get merged, to prevent unnecessary bloat of the compiled CSS.

process-tag clj multimethod

Support some of our Garden extensions

Convert tagged vectors in the component rules into plain Garden, e.g. [:at-media] or [:rgb]. Default implementation handles using styled components as selectors, or otherwise simply preserves the tag.

qualify-sym clj

(qualify-sym env s)

registry clj

Registry of styles

Keys are fully qualified symbols (var names), values are maps with the individual :tag, :rules, :classname. We add an :index to be able to iterate over the components/styles in source order. This is now the preferred way to iterate over all styles (as in defined-styles), rather than the old approach of finding all vars with a given metadata attached to them.

Clojure-only because we only deal with CSS on the backend, the frontend only knows about classnames. :component points at a StyledComponent instance that can be used to get the [[css]] for that component.

set-default-tokens clj

set-tokens! clj

(set-tokens! {:keys [components colors fonts]})

Set "design tokens": colors, fonts, and components

This configures Girouette, so that these tokens become available inside Ornament style declarations.

• :colors : map from keyword to 6-digit hex color, without leading #
• :fonts: map from keyword to font stack (comman separated string)
• :components: sequence of Girouette components, each a map with :id (keyword), :rules (string, instaparse, can be omitted), and :garden (map, or function taking instaparse results and returning Garden map)

If :rules is omitted we assume this is a static token, and we'll generate a rule of the form token-id = <'token-id'>.

:garden can be a function, in which case it receives a map with a :compoent-data key containing the instaparse parse tree. Literal maps or vectors are wrapped in a function, in case the returned Garden is fixed. The resulting Garden styles are processed again as in defstyled, so you can use other Girouette or other tokens in there as well. Use [:&] for returning multiple tokens/maps/stylesUse [:&] for returning multiple tokens/maps/styles.

By default these are added to the Girouette defaults, use meta-merge annotations (e.g. {:colors ^:replace {...}}) to change that behaviour.

styled clj/s

(styled varsym css-class tag rules component)

StyledComponent clj/s protocol

as-garden clj/s

(as-garden _)

Return the styles for this component in Garden syntax (i.e. EDN data)

as-hiccup clj/s

(as-hiccup _ args)

Render to hiccup

classname clj/s

(classname _)

The CSS class name for this component, derived from the var and ns name.

component clj/s

(component _)

Function which is a Hiccup component, for styled components which have one or more function tails.

css clj/s

(css _)

Compile this component's styles to CSS

rules clj/s

(rules _)

Get the rules passed to this component, without any processing.

tag clj/s

(tag _)

HTML tag (keyword) for this component