runtime-condition-requires-css-if

This rule reports a runtime CSS condition, such as if(--state:active):, that the compiler can only express with the native CSS if() function. The project does not enable it, so the utility produces no CSS.

Reported

style("if(--state:active):block");runtime-condition-requires-css-if: `if(--state:active):block` cannot be lowered: custom-property value comparisons require useCssIf: true

Fixed

import { defineConfig } from "stillwind/config";

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

style("if(--state:active):block");

How to fix

• If the browsers that you support implement CSS if(), set useCssIf: true in the project, as in the example. Keep the condition on the custom property.
• Otherwise, represent the state with an attribute and use an attribute variant. That requires changing the code that sets the state as well.

See Configuration.

Rule settings