Skip to content

@stillwind-property

Register a custom property that the stylesheet declares with @property only when generated CSS needs it.

View as Markdown 
@stillwind-property --name {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@stillwind-property registers a custom property. The compiler emits a standard @property rule, and an initial value for each element, only when the generated CSS needs the property. Write it at the top level of the stylesheet.

Example

Stylesheet

@stillwind-property --spin-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@utility spin-* {
  --spin-angle: --value([angle]);
  rotate: var(--spin-angle);
}

Source

import { style } from "stillwind/react";

export const icon = style("spin-[45deg]");

Compiled code

export const icon = {className:"sw_7ic77"};

Generated stylesheet without preflight

/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties, theme, base, components, utilities;

@layer utilities {
  .sw_7ic77 {
    --spin-angle: 45deg;
    rotate: var(--spin-angle);
  }
}

@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --spin-angle: 0deg;
    }
  }
}

@property --spin-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

The properties slot places the @property rule. The property-initials slot places the initial values, for browsers that ignore @property. See @stillwind-slot.

Descriptors

The standard @property descriptors, syntax, inherits, and initial-value, go into the emitted rule as written. The compiler reads the other descriptors and removes them from the output:

Descriptor Value
activation When to emit: referenced (default), declared, either, or dependency
depends-on Space-separated custom properties that are emitted with this one
group Space-separated group names. The registrations of a group are emitted together.
activate-on Space-separated ordinary properties. A declaration of one of them emits this registration.
value-for Comma-separated ordinary properties whose value rules check the values of this property

referenced emits the registration when a rule reads the property through var(). declared emits it when a rule sets the property. either emits it in both cases. dependency emits it only through depends-on or group.

A utility can also require a registration with @stillwind-require-properties.

Value checks

value-for makes lint rules check the value of the custom property as a value of the listed properties:

@stillwind-property --box-size {
  syntax: "*";
  inherits: false;
  value-for: width, height;
}

@utility box-* {
  --box-size: --value([length]);
}

no-arbitrary-spacing, no-arbitrary-colors, and no-restricted-length-units check box-[13px] as a width and a height value. Each listed property uses its own rule settings.

Registrations with the same name

The last registration of a name decides. A registration in your stylesheet replaces the registration of a package. An ordinary @property rule in your stylesheet stays as written, and the compiler does not emit a registration with the same name.