invalid-runtime-condition

This rule reports a runtime CSS condition, such as --if(), that the compiler cannot express with the supported CSS. Comparisons of custom-property values, for example, need the native CSS if() function and useCssIf: true. The message explains why the condition failed. The declaration produces no CSS.

Reported

const fade = style.keyframes({ to: "[color:--if(--mode:compact,red,blue)]" });
style(fade("duration-300"));invalid-runtime-condition: `color` is left out because its `--if()` cannot be lowered: custom-property value comparisons require useCssIf: true

Fixed

const fade = style.keyframes({ to: "text-(color:--frame-color)" });
style("[--frame-color:--if(--mode:compact,red,blue)]", fade("duration-300"));

import { defineConfig } from "stillwind/config";

export default defineConfig({
  projects: [
    {
      css: "./src/stillwind.css",
      files: ["src/**/*.{ts,tsx}"],
      useCssIf: true,
    },
  ],
});

How to fix

• Move the condition onto the element, and let the keyframes read the result through a custom property, as in the example. This keeps --mode as the source of the condition and keeps the same red and blue values.
• Enable useCssIf: true for comparisons of custom-property values, as in the configuration above. The browsers that you support must implement CSS if().
• If the message names another unsupported condition, rewrite that condition or set the resulting custom property in JavaScript.

A condition that only needs useCssIf is reported by runtime-condition-requires-css-if instead.

Rule settings