CSS Types

🔗Overview

The cssTypes module is auto-loaded in every compile, no import needed. Each function evaluates to a family-typed value (transform, filter, image, shape, easing, color, cssvar) whose display spelling is cached, so emission renders it directly. Wrong arity or argument kinds error in both lenient and strict modes.

Types below use Bowdy names: color length angle time resolution flex number string bool int float cssvar transform filter image shape easing.

🔗parseLength

Parses a string into a typed length (any known unit or %), else errors.

var w = parseLength("4px")
.a { width: $w; }

🔗parseAngle

Parses a string into a typed angle (deg rad grad turn).

var a = parseAngle("45deg")
.a { transform: rotate($a); }

🔗parseTime

Parses a string into a typed time (s ms).

var t = parseTime("0.3s")
.a { transition-duration: $t; }

🔗parseResolution

Parses a string into a typed resolution (dpi dpcm dppx).

var r = parseResolution("300dpi")

🔗parseFlex

Parses a string into a typed flex (fr).

var f = parseFlex("1fr")
.a { grid-template-columns: $f $f; }

Unit literals (4px, 45deg, 2s) construct typed values directly at runtime. Typed arithmetic:

var x = 4px + 3px   /* 7px */
var b = 45deg + 15deg
var t = 2s - 1s

+ / - on length angle time require identical units (2s - 500ms errors).

🔗var

References a CSS custom property. Returns a cssvar.

color: var(--brand)
color: var(--x, red)
color: var(--x, none)   /* keyword fallback verbatim */

• var(name: string) / var(name: string, fallback: any).
• Name must start with --. var($n) with var n = "--brand" is allowed.
• Fallback accepts any value and renders via display spelling.

🔗Transforms

Each returns a transform: translate3d(l,l,l), translate(l[, l]), translateX/Y/Z(l), scale(n[, n]), scaleX/Y/Z(n), scale3d(n,n,n), rotate(a), rotateX/Y/Z(a), rotate3d(n,n,n,a), skew(a[, a]), skewX/Y(a), matrix(6x n), matrix3d(16x n), perspective(l). Lengths and angles accept unitless zero.

.a { transform: translate(-50%, -50%) rotate(45deg); }

🔗Filters

Each returns a filter: blur([l]) (zero args renders blur()), brightness contrast grayscale invert opacity saturate sepia (number or length), hue-rotate(a), drop-shadow(2-4 lengths + optional color, space-joined).

.a { filter: drop-shadow(0 0 5px rgba(0,0,0,.5)); }

🔗Gradients

Each returns an image: linear-gradient repeating-linear-gradient radial-gradient repeating-radial-gradient conic-gradient repeating-conic-gradient, 1..24 args. Leading direction/shape keywords (to right, circle at center, from, at) + lengths/angles form the prelude (space-joined); color stops comma-separate; position hints (red 50%) space-join onto their stop.

.a { background: linear-gradient(to right, red, blue); }
.a { background: linear-gradient(45deg, red, blue); }
.a { background: radial-gradient(circle at center, red, blue); }

🔗Shapes

Each returns a shape: circle ellipse inset xywh (lengths/numbers + keywords, space-joined), polygon([nonzero|evenodd,] x y, ...) (pairs comma-separate), path("...") (quoted data kept quoted), ray(angle [at ...] [size|contain]?).

.a { clip-path: circle(50%); }
.a { clip-path: polygon(0 0, 100% 0, 100% 100%); }

🔗Easing

Each returns an easing: cubic-bezier, steps, linear(n/length stops) — lengths after numbers are stop positions (linear(0, 0.5 50%, 1)).

.a { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

🔗Color constructors

Each returns a color: rgb rgba hsl hsla hwb lab lch oklab oklch color light-dark color-mix, plus image("...") / image-set("a" 1x, ...) returning an image.

• 3–4 components + optional slash alpha.
• rgb(var(--t)) / rgba(var(--t), a) triplets render verbatim (Bootstrap --*-rgb pattern).
• color([from <color>] space c1 c2 c3 [/ a]).
• color-mix(in <space>, color [pct]?, color [pct]?).

.a { color: rgb(13 110 253); }
.a { background: color-mix(in oklab, red, blue); }

Fully static rgb()/hsl()-family calls keep source spelling; dynamic forms (any $var/var()/nested call) evaluate and render canonically.