---
title: "invalid-rule-group-input"
description: "Reports a class field, custom property, or ref inside an object with variant keys."
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-rule-group-input

This rule reports a `class` field, a custom property, a ref, or a stored `style()`
result inside an object with variant keys, such as `{ "hover:": ... }`. A variant
can only condition utilities, so the input is left out.

## Reported

```css
.external {
  color: red;
}
```

```tsx
style({ "hover:": { class: "external" } });
```

> invalid-rule-group-input: style() rule groups cannot contain external class value
> 
> Example:1:28

## Fixed

```css
.external:hover {
  color: red;
}
```

```tsx
style({ class: "external" });
```

## How to fix

- If you own the other stylesheet, put the state in its selector and attach the
  class without a variant, as in the example. The element still turns red only
  while it is hovered.
- If the stylesheet cannot change and the application already tracks the state
  in JavaScript, pass the `class` field under that JavaScript condition.
- If the class only applies styles that Stillwind has as utilities, write those
  utilities under the variant instead, such as `{ "hover:": "opacity-50" }`.

## 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-rule-group-input/index.mdx