Skip to content

@stillwind-undef-arbitrary-property

Reject arbitrary-property utilities such as [color:red] for the properties that match a pattern.

@stillwind-undef-arbitrary-property property;
@stillwind-undef-arbitrary-property prefix-*;
@stillwind-undef-arbitrary-property *;

An arbitrary property is a utility that writes a declaration directly, such as [color:red]. @stillwind-undef-arbitrary-property rejects arbitrary properties for the matching CSS properties. A rejected candidate produces no CSS. Write the statement at the top level of the stylesheet or in a @stillwind-registry block.

Example

Stylesheet

@stillwind-undef-arbitrary-property *;
@stillwind-arbitrary-property --*;

Source

import { style } from "stillwind/react";

export const rejected = style("[color:red]");
export const accepted = style("[--gutter:1rem]");

Compiled code

export const rejected = {};
export const accepted = {className:"sw_obysi"};

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_obysi {
    --gutter: 1rem;
  }
}

The first statement rejects every property. The second statement accepts custom properties again, so components can still set variables.

Rules

  • The last matching statement decides for each property. A property that no statement matches is accepted.
  • @stillwind-arbitrary-property pattern; accepts the matching properties again. The registry directives describe its other role.
  • Patterns use the same forms as @stillwind-undef-utility, with property names instead of utility names.

To report arbitrary values without rejecting them, use lint rules such as no-arbitrary-colors or no-restricted-declarations instead.