---
title: "invalid-runtime-condition"
description: "Reports a runtime CSS condition that the compiler cannot compile in its position."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```tsx
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
> 
> Example:1:1

## Fixed

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

```ts title="stillwind.config.ts"
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](/docs/lints/runtime-condition-requires-css-if)
instead.

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | deny |
| `strict` | deny |
| `stylistic` | off |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/invalid-runtime-condition/index.mdx