---
title: "invalid-style-composition"
description: "Reports inline styles or custom properties in a base style, which do not carry over."
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-style-composition

This rule reports a base style that contains inline styles or custom properties.
When you pass a stored `style()` result to another call, only its classes carry
over. The custom property in the base is lost.

Base styles can come from any framework entrypoint. The receiving call returns its
own framework's class and style props.

## Reported

```tsx
declare const value: string;
const base = style("rounded-md", { "--x": value });
style(base, "p-4");
```

> invalid-style-composition: a style base contributes only its class; its inline style is ignored
> 
> Example:3:7

## Fixed

```tsx
declare const value: string;
const base = style("rounded-md");
style(base, "p-4", { "--x": value });
```

## How to fix

- Keep the utilities in the base, and set the custom property in the call that
  receives the base, as in the example.
- If several elements need the same value, set the custom property on a common
  ancestor. Custom properties are inherited.

See [Base styles](/docs/macros/style#base-styles).

## 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-style-composition/index.mdx