typewritingclass 0.2.0

package/README.md

@@ -0,0 +1,107 @@
+# Typewriting Class
+
+Core library for the Typewriting Class CSS-in-TS framework. Provides utility functions, modifiers, theme tokens, and the composition API.
+
+## Installation
+
+```bash
+bun add typewritingclass
+```
+
+## Usage
+
+```ts
+import { cx, p, bg, textColor, rounded, flex, gap, when } from 'typewritingclass'
+import { hover, md, dark } from 'typewritingclass'
+import { blue, white, slate } from 'typewritingclass/theme/colors'
+
+const card = cx(
+  p(6), bg(white), rounded('lg'),
+  flex(), gap(4),
+  when(hover)(bg(blue[50])),
+  when(md)(p(8)),
+  when(dark)(bg(slate[800])),
+)
+```
+
+## API
+
+### Composition
+
+- **`cx(...rules)`** — compose utilities into a single class name
+- **`when(...modifiers)(...rules)`** — apply styles conditionally
+
+### Utilities
+
+| Category | Functions |
+|---|---|
+| Spacing | `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl`, `m`, `mx`, `my`, `mt`, `mr`, `mb`, `ml`, `gap`, `gapX`, `gapY` |
+| Colors | `bg`, `textColor`, `borderColor` |
+| Typography | `text`, `font`, `tracking`, `leading`, `textAlign` |
+| Layout | `flex`, `flexCol`, `flexRow`, `grid`, `gridCols`, `gridRows`, `display`, `items`, `justify`, `self` |
+| Sizing | `w`, `h`, `size`, `minW`, `minH`, `maxW`, `maxH` |
+| Position | `relative`, `absolute`, `fixed`, `sticky`, `top`, `right`, `bottom`, `left`, `inset`, `z` |
+| Borders | `rounded`, `roundedT`, `roundedB`, `roundedL`, `roundedR`, `border`, `borderT`, `borderR`, `borderB`, `borderL`, `ring` |
+| Effects | `shadow`, `opacity`, `backdrop` |
+| Interactivity | `cursor`, `select`, `pointerEvents` |
+| Overflow | `overflow`, `overflowX`, `overflowY` |
+
+### Modifiers
+
+| Type | Modifiers |
+|---|---|
+| Pseudo-classes | `hover`, `focus`, `active`, `disabled`, `focusVisible`, `focusWithin`, `firstChild`, `lastChild` |
+| Responsive | `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `_2xl` (1536px) |
+| Color scheme | `dark` |
+
+### Theme tokens
+
+```ts
+import { blue, slate } from 'typewritingclass/theme/colors'
+import { bold, lg } from 'typewritingclass/theme/typography'
+import { md } from 'typewritingclass/theme/shadows'
+import { lg as lgRadius } from 'typewritingclass/theme/borders'
+```
+
+### Custom themes
+
+```ts
+import { createTheme } from 'typewritingclass/theme/createTheme'
+
+const theme = createTheme({
+  colors: { brand: { 500: '#6366f1' } },
+})
+```
+
+### Dynamic values
+
+```ts
+import { dynamic } from 'typewritingclass/runtime'
+
+// Returns { className, style } for runtime CSS custom properties
+const result = dynamic(bg(userColor))
+```
+
+### Raw CSS escape hatch
+
+```ts
+import { css } from 'typewritingclass'
+
+cx(p(4), css({ transition: 'all 200ms ease' }))
+```
+
+## Exports
+
+| Path | Contents |
+|---|---|
+| `typewritingclass` | Core API (`cx`, `when`, all utilities and modifiers) |
+| `typewritingclass/theme` | All theme token exports |
+| `typewritingclass/theme/colors` | Color scales |
+| `typewritingclass/theme/typography` | Font sizes, weights, line heights |
+| `typewritingclass/theme/shadows` | Shadow presets |
+| `typewritingclass/theme/borders` | Border radius tokens |
+| `typewritingclass/theme/spacing` | Spacing scale |
+| `typewritingclass/theme/sizes` | Named sizes |
+| `typewritingclass/theme/createTheme` | `createTheme()` |
+| `typewritingclass/inject` | `injectTheme()`, `setTheme()` |
+| `typewritingclass/runtime` | `dynamic()`, `isDynamic()` |

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "typewritingclass",
+  "version": "0.2.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./theme/colors": {
+      "types": "./src/theme/colors.ts",
+      "default": "./src/theme/colors.ts"
+    },
+    "./theme/typography": {
+      "types": "./src/theme/typography.ts",
+      "default": "./src/theme/typography.ts"
+    },
+    "./theme/sizes": {
+      "types": "./src/theme/sizes.ts",
+      "default": "./src/theme/sizes.ts"
+    },
+    "./theme/shadows": {
+      "types": "./src/theme/shadows.ts",
+      "default": "./src/theme/shadows.ts"
+    },
+    "./theme/borders": {
+      "types": "./src/theme/borders.ts",
+      "default": "./src/theme/borders.ts"
+    },
+    "./theme/createTheme": {
+      "types": "./src/theme/createTheme.ts",
+      "default": "./src/theme/createTheme.ts"
+    },
+    "./theme/animations": {
+      "types": "./src/theme/animations.ts",
+      "default": "./src/theme/animations.ts"
+    },
+    "./theme/filters": {
+      "types": "./src/theme/filters.ts",
+      "default": "./src/theme/filters.ts"
+    },
+    "./theme": {
+      "types": "./src/theme/index.ts",
+      "default": "./src/theme/index.ts"
+    },
+    "./inject": {
+      "types": "./src/inject.ts",
+      "default": "./src/inject.ts"
+    },
+    "./runtime": {
+      "types": "./src/runtime.ts",
+      "default": "./src/runtime.ts"
+    },
+    "./rule": {
+      "types": "./src/rule.ts",
+      "default": "./src/rule.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "devDependencies": {
+    "vitest": "^3.0.4",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "bench": "tsx benchmarks/bench.ts"
+  }
+}

package/src/css.ts

@@ -0,0 +1,140 @@
+import type { StyleRule } from './types.ts'
+import { createRule, createDynamicRule } from './rule.ts'
+import { isDynamic } from './dynamic.ts'
+import type { DynamicValue } from './dynamic.ts'
+
+/**
+ * Creates a {@link StyleRule} from a plain object of CSS declarations.
+ *
+ * Use this overload when you want to write raw CSS property-value pairs
+ * without reaching for a specific utility function.
+ *
+ * @param declarations - A record mapping CSS property names to their values.
+ * @returns A {@link StyleRule} containing the given declarations.
+ *
+ * @example Object of declarations
+ * ```ts
+ * import { cx, css } from 'typewritingclass'
+ *
+ * cx(css({ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '1rem' }))
+ * // CSS: display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
+ * ```
+ */
+export function css(declarations: Record<string, string>): StyleRule
+/**
+ * Creates a {@link StyleRule} from a tagged template literal of CSS declarations.
+ *
+ * Interpolated values can be plain strings, numbers, or {@link DynamicValue}
+ * instances. Dynamic values are replaced with `var(--twc-dN)` references in
+ * the generated CSS and must be applied to the element via inline styles
+ * (see {@link dcx}).
+ *
+ * @param strings - The static portions of the template literal (provided automatically).
+ * @param values - Interpolated expressions -- strings, numbers, or {@link DynamicValue}s.
+ * @returns A {@link StyleRule} with parsed declarations (and `dynamicBindings`
+ *          if any interpolated value was created with {@link dynamic}).
+ *
+ * @example Tagged template with static values
+ * ```ts
+ * import { cx, css } from 'typewritingclass'
+ *
+ * cx(css`
+ *   display: flex;
+ *   align-items: center;
+ *   gap: 0.5rem;
+ * `)
+ * // CSS: display: flex; align-items: center; gap: 0.5rem;
+ * ```
+ *
+ * @example Tagged template with interpolated values
+ * ```ts
+ * import { cx, css } from 'typewritingclass'
+ * import { blue } from 'typewritingclass/theme/colors'
+ *
+ * const size = '2rem'
+ * cx(css`
+ *   width: ${size};
+ *   height: ${size};
+ *   background-color: ${blue[500]};
+ * `)
+ * // CSS: width: 2rem; height: 2rem; background-color: #3b82f6;
+ * ```
+ *
+ * @example Tagged template with dynamic values
+ * ```ts
+ * import { dcx, css, dynamic } from 'typewritingclass'
+ *
+ * const color = dynamic('#e11d48')
+ * const { className, style } = dcx(css`
+ *   background-color: ${color};
+ *   padding: 1rem;
+ * `)
+ * // className => "_a1b2c"
+ * // style     => { '--twc-d0': '#e11d48' }
+ * // CSS: ._a1b2c { background-color: var(--twc-d0); padding: 1rem; }
+ * ```
+ */
+export function css(strings: TemplateStringsArray, ...values: (string | number | DynamicValue)[]): StyleRule
+/**
+ * Creates a {@link StyleRule} from either a declarations object or a tagged
+ * template literal.
+ *
+ * This is the implementation signature that dispatches to the appropriate
+ * overload. See the individual overload signatures for detailed docs and
+ * examples.
+ *
+ * @param first - Either a `Record<string, string>` (object overload) or a
+ *                `TemplateStringsArray` (tagged template overload).
+ * @param values - Interpolated template values (only used in the tagged
+ *                 template overload).
+ * @returns A {@link StyleRule} with the parsed CSS declarations.
+ */
+export function css(
+  first: Record<string, string> | TemplateStringsArray,
+  ...values: (string | number | DynamicValue)[]
+): StyleRule {
+  // Object overload
+  if (!Array.isArray(first) && !('raw' in first)) {
+    return createRule(first as Record<string, string>)
+  }
+
+  // Tagged template literal overload
+  const strings = first as TemplateStringsArray
+  const declarations: Record<string, string> = {}
+  let dynamicBindings: Record<string, string> | undefined
+
+  // Reconstruct the template, collecting dynamic values
+  let raw = ''
+  for (let i = 0; i < strings.length; i++) {
+    raw += strings[i]
+    if (i < values.length) {
+      const val = values[i]
+      if (isDynamic(val)) {
+        if (!dynamicBindings) dynamicBindings = {}
+        dynamicBindings[val.__id] = String(val.__value)
+        raw += `var(${val.__id})`
+      } else {
+        raw += String(val)
+      }
+    }
+  }
+
+  // Parse "prop: value;" pairs from the raw string
+  const lines = raw.split(';')
+  for (const line of lines) {
+    const trimmed = line.trim()
+    if (!trimmed) continue
+    const colonIdx = trimmed.indexOf(':')
+    if (colonIdx === -1) continue
+    const prop = trimmed.slice(0, colonIdx).trim()
+    const value = trimmed.slice(colonIdx + 1).trim()
+    if (prop && value) {
+      declarations[prop] = value
+    }
+  }
+
+  if (dynamicBindings) {
+    return createDynamicRule(declarations, dynamicBindings)
+  }
+  return createRule(declarations)
+}

package/src/cx.ts

@@ -0,0 +1,105 @@
+import type { StyleRule } from './types.ts'
+import { generateHash } from './hash.ts'
+import { register } from './registry.ts'
+import { nextLayer, _resetLayer } from './layer.ts'
+
+/**
+ * Composes style rules and string class names into a single CSS class string.
+ *
+ * Each {@link StyleRule} is registered in the global stylesheet and assigned a
+ * unique, deterministic class name. Later arguments override earlier ones when
+ * CSS properties conflict -- order is your specificity.
+ *
+ * Plain strings are passed through unchanged, so you can mix generated rules
+ * with external or hand-written class names.
+ *
+ * @param args - Style rules from utility functions, or plain class name strings.
+ * @returns A space-separated class string ready for `className` or `class`.
+ *
+ * @example Basic composition
+ * ```ts
+ * import { cx, p, bg, rounded } from 'typewritingclass'
+ * import { blue } from 'typewritingclass/theme/colors'
+ * import { lg } from 'typewritingclass/theme/borders'
+ *
+ * const className = cx(p(4), bg(blue[500]), rounded(lg))
+ * // => "_a1b2c _d3e4f _g5h6i"
+ * // CSS: padding: 1rem; background-color: #3b82f6; border-radius: 0.5rem;
+ * ```
+ *
+ * @example Override earlier rules
+ * ```ts
+ * import { cx, p } from 'typewritingclass'
+ *
+ * cx(p(4), p(2))
+ * // Only p(2) applies -- later rules are placed on a higher layer
+ * // CSS: padding: 0.5rem;
+ * ```
+ *
+ * @example Mix string classes with rules
+ * ```ts
+ * import { cx, p, bg } from 'typewritingclass'
+ * import { white } from 'typewritingclass/theme/colors'
+ *
+ * cx('my-component', p(4), bg(white))
+ * // => "my-component _a1b2c _d3e4f"
+ * ```
+ *
+ * @example With modifiers
+ * ```ts
+ * import { cx, p, bg, when, hover, md } from 'typewritingclass'
+ * import { blue } from 'typewritingclass/theme/colors'
+ *
+ * cx(
+ *   p(4),
+ *   when(hover)(bg(blue[600])),
+ *   when(md)(p(8)),
+ * )
+ * // CSS:
+ * //   .cls1 { padding: 1rem; }
+ * //   .cls2:hover { background-color: #2563eb; }
+ * //   @media (min-width: 768px) { .cls3 { padding: 2rem; } }
+ * ```
+ */
+export function cx(...args: (StyleRule | string)[]): string {
+  if (process.env.NODE_ENV !== 'production') {
+    warnConflicts(args)
+  }
+  return args
+    .map((arg) => {
+      if (typeof arg === 'string') return arg
+      const layerNum = (arg as any)._layer ?? nextLayer()
+      const className = generateHash(arg, layerNum)
+      register(className, arg, layerNum)
+      return className
+    })
+    .join(' ')
+}
+
+/**
+ * In development mode, warns when multiple StyleRules in a single cx() call
+ * declare the same CSS property without being an obvious intentional override.
+ *
+ * This helps catch accidental conflicts like `cx(p(4), p(8))` where the user
+ * may have meant to use only one.
+ *
+ * @internal
+ */
+function warnConflicts(args: (StyleRule | string)[]): void {
+  const seen = new Map<string, number>()
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]
+    if (typeof arg === 'string') continue
+    for (const prop of Object.keys(arg.declarations)) {
+      if (seen.has(prop)) {
+        console.warn(
+          `[typewritingclass] cx() conflict: "${prop}" is set by arguments at index ${seen.get(prop)} and ${i}. ` +
+          `The later value will override. If intentional, this warning can be ignored.`,
+        )
+      }
+      seen.set(prop, i)
+    }
+  }
+}
+
+export { _resetLayer }

package/src/dcx.ts

@@ -0,0 +1,79 @@
+import type { StyleRule, DynamicResult } from './types.ts'
+import { generateHash } from './hash.ts'
+import { register } from './registry.ts'
+import { nextLayer } from './layer.ts'
+
+/**
+ * Composes style rules into a class string **and** an inline style object,
+ * supporting runtime-dynamic CSS values.
+ *
+ * Works exactly like {@link cx} for static rules, but also collects
+ * `dynamicBindings` from any rule that references a {@link DynamicValue}.
+ * The returned `style` object maps CSS custom properties to their current
+ * values and must be spread onto the element's `style` attribute so the
+ * generated `var()` references resolve correctly.
+ *
+ * Use `dcx` instead of `cx` whenever at least one of your style rules was
+ * built with {@link dynamic}.
+ *
+ * @param args - Style rules from utility functions, or plain class name strings.
+ * @returns A {@link DynamicResult} with `className` (space-separated class string)
+ *          and `style` (CSS custom property assignments for inline styles).
+ *
+ * @example Dynamic background color
+ * ```ts
+ * import { dcx, bg, p, dynamic } from 'typewritingclass'
+ *
+ * const userColor = dynamic('#e11d48')
+ * const { className, style } = dcx(p(4), bg(userColor))
+ * // className => "_a1b2c _d3e4f"
+ * // style     => { '--twc-d0': '#e11d48' }
+ *
+ * // In React JSX:
+ * // <div className={className} style={style} />
+ * // CSS: ._d3e4f { background-color: var(--twc-d0); }
+ * // Inline: style="--twc-d0: #e11d48;"
+ * ```
+ *
+ * @example Mixing static and dynamic rules
+ * ```ts
+ * import { dcx, p, bg, rounded, dynamic } from 'typewritingclass'
+ * import { blue } from 'typewritingclass/theme/colors'
+ *
+ * const radius = dynamic('12px')
+ * const { className, style } = dcx(p(4), bg(blue[500]), rounded(radius))
+ * // className => "_a1b2c _d3e4f _g5h6i"
+ * // style     => { '--twc-d0': '12px' }
+ * // CSS: ._g5h6i { border-radius: var(--twc-d0); }
+ * ```
+ *
+ * @example No dynamic values -- style is an empty object
+ * ```ts
+ * import { dcx, p } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(p(4))
+ * // className => "_a1b2c"
+ * // style     => {}
+ * ```
+ */
+export function dcx(...args: (StyleRule | string)[]): DynamicResult {
+  const classNames: string[] = []
+  const style: Record<string, string> = {}
+
+  for (const arg of args) {
+    if (typeof arg === 'string') {
+      classNames.push(arg)
+      continue
+    }
+    const layerNum = (arg as any)._layer ?? nextLayer()
+    const className = generateHash(arg, layerNum)
+    register(className, arg, layerNum)
+    classNames.push(className)
+
+    if (arg.dynamicBindings) {
+      Object.assign(style, arg.dynamicBindings)
+    }
+  }
+
+  return { className: classNames.join(' '), style }
+}

package/src/dynamic.ts

@@ -0,0 +1,117 @@
+/**
+ * A wrapper around a runtime-changeable CSS value.
+ *
+ * Instead of baking the value directly into the generated CSS, a
+ * `DynamicValue` is replaced with a CSS custom property reference
+ * (`var(--twc-dN)`). The actual value is applied at runtime through an
+ * inline `style` attribute, allowing it to change without regenerating
+ * the stylesheet.
+ *
+ * Create instances with the {@link dynamic} factory -- do not construct
+ * this interface manually.
+ *
+ * @typeParam T - The underlying value type, constrained to `string | number`.
+ *
+ * @example
+ * ```ts
+ * import { dynamic, bg, dcx } from 'typewritingclass'
+ *
+ * const color = dynamic('#e11d48')
+ * // color._tag    => 'DynamicValue'
+ * // color.__value => '#e11d48'
+ * // color.__id    => '--twc-d0'
+ *
+ * const { className, style } = dcx(bg(color))
+ * // Generated CSS uses var(--twc-d0) instead of the literal color.
+ * // style maps '--twc-d0' to '#e11d48' for the inline style attribute.
+ * ```
+ */
+export interface DynamicValue<T extends string | number = string | number> {
+  /** Discriminant tag for runtime type checking. Always `'DynamicValue'`. */
+  _tag: 'DynamicValue'
+  /** The current runtime value (e.g. `'#e11d48'` or `16`). */
+  __value: T
+  /** The generated CSS custom property name (e.g. `'--twc-d0'`). */
+  __id: string
+}
+
+let counter = 0
+
+/**
+ * Wraps a value so it becomes a runtime-dynamic CSS custom property.
+ *
+ * The returned {@link DynamicValue} can be passed to any utility that
+ * accepts `DynamicValue` (e.g. `bg`, `p`, `textColor`, `rounded`). When
+ * composed via {@link dcx}, the value is not inlined into the CSS rule;
+ * instead a `var(--twc-dN)` reference is emitted, and the concrete value
+ * is placed in the `style` object so it can be changed at runtime without
+ * touching the stylesheet.
+ *
+ * Each call to `dynamic` allocates a new, globally unique custom property
+ * name (`--twc-d0`, `--twc-d1`, ...).
+ *
+ * @typeParam T - Inferred from the provided value; constrained to `string | number`.
+ * @param value - The initial CSS value (e.g. a color hex string, a pixel value, etc.).
+ * @returns A {@link DynamicValue} wrapping the given value with a unique CSS
+ *          custom property identifier.
+ *
+ * @example Dynamic background color in React
+ * ```ts
+ * import { dcx, bg, p, dynamic } from 'typewritingclass'
+ *
+ * function Banner({ color }: { color: string }) {
+ *   const { className, style } = dcx(p(4), bg(dynamic(color)))
+ *   return <div className={className} style={style} />
+ * }
+ * // CSS: ._xyz { background-color: var(--twc-d0); padding: 1rem; }
+ * // Inline style: --twc-d0: <whatever `color` is at render time>
+ * ```
+ *
+ * @example Dynamic spacing
+ * ```ts
+ * import { dcx, p, dynamic } from 'typewritingclass'
+ *
+ * const spacing = dynamic('2.5rem')
+ * const { className, style } = dcx(p(spacing))
+ * // className => "_a1b2c"
+ * // style     => { '--twc-d0': '2.5rem' }
+ * // CSS: ._a1b2c { padding: var(--twc-d0); }
+ * ```
+ */
+export function dynamic<T extends string | number>(value: T): DynamicValue<T> {
+  return { _tag: 'DynamicValue', __value: value, __id: `--twc-d${counter++}` }
+}
+
+/**
+ * Type-guard that checks whether an unknown value is a {@link DynamicValue}.
+ *
+ * Useful inside utilities and the `css` tagged-template implementation to
+ * decide whether to emit a `var()` reference or inline the value directly.
+ *
+ * @param v - Any value to test.
+ * @returns `true` if `v` is a `DynamicValue`, narrowing its type accordingly.
+ *
+ * @example
+ * ```ts
+ * import { dynamic, isDynamic } from 'typewritingclass'
+ *
+ * const val = dynamic('#ff0000')
+ * isDynamic(val)       // => true
+ * isDynamic('#ff0000') // => false
+ * isDynamic(42)        // => false
+ * isDynamic(null)      // => false
+ * ```
+ */
+export function isDynamic(v: unknown): v is DynamicValue {
+  return (
+    typeof v === 'object' &&
+    v !== null &&
+    '_tag' in v &&
+    (v as DynamicValue)._tag === 'DynamicValue'
+  )
+}
+
+/** @internal — exposed for testing only */
+export function _resetDynamicCounter(): void {
+  counter = 0
+}

package/src/hash.ts

@@ -0,0 +1,54 @@
+import type { StyleRule } from './types.ts'
+
+/**
+ * Computes a DJB2 hash of the given string.
+ *
+ * DJB2 is a fast, non-cryptographic hash function created by Daniel J. Bernstein.
+ * It produces a 32-bit unsigned integer from an arbitrary string input.
+ *
+ * @internal
+ * @param str - The string to hash.
+ * @returns A 32-bit unsigned integer hash value.
+ *
+ * @see {@link https://en.wikipedia.org/wiki/Daniel_J._Bernstein | DJB2 hash algorithm}
+ */
+function djb2(str: string): number {
+  let hash = 5381
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash + str.charCodeAt(i)) | 0
+  }
+  return hash >>> 0
+}
+
+/**
+ * Generates a unique, deterministic class name for a style rule at a given layer.
+ *
+ * The hash is computed from the serialised declarations, selectors, media queries,
+ * and layer number. Identical inputs always produce the same class name, enabling
+ * deduplication in the {@link register | registry}.
+ *
+ * The returned string is prefixed with `_` so it is a valid CSS class name
+ * (class names must not start with a digit), followed by the base-36 encoded
+ * DJB2 hash.
+ *
+ * @internal
+ * @param rule - The {@link StyleRule} to hash.
+ * @param layer - The layer ordering number assigned to this rule.
+ * @returns A deterministic class name string (e.g., `'_1a2b3c'`).
+ *
+ * @example
+ * ```ts
+ * const rule = createRule({ padding: '1rem' })
+ * generateHash(rule, 0) // '_h7k2m' (deterministic for the same input)
+ * generateHash(rule, 0) // '_h7k2m' (same input = same hash)
+ * ```
+ */
+export function generateHash(rule: StyleRule, layer: number): string {
+  const input =
+    JSON.stringify(rule.declarations) +
+    JSON.stringify(rule.selectors) +
+    JSON.stringify(rule.mediaQueries) +
+    String(layer) +
+    (rule.selectorTemplate ?? '')
+  return '_' + djb2(input).toString(36)
+}