---
title: "SW11002: CSS module ordering cycle"
description: "Two modules each build styles on a base from the other module."
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.

# SW11002: CSS module ordering cycle

This error occurs when two modules each build a style on a base from the other
module. The CSS of each module must come after the CSS of the modules that it
builds on, so the two modules have no valid order, even when the individual
styles do not form a cycle.

## Reported

**entry.ts**

```ts
import { style } from "stillwind/react";
import { middle } from "./middle";

export const base = style("p-4");
export const derived = style(middle, "rounded-md");
```

**middle.ts**

```ts
import { style } from "stillwind/react";
import { base } from "./entry";

export const middle = style(base, "text-blue-600");
```

> SW11002: style composition requires cyclic CSS module ordering

## Fixed

```ts title="base.ts"
import { style } from "stillwind/react";

export const base = style("p-4");
```

```ts title="entry.ts"
import { style } from "stillwind/react";
import { middle } from "./middle";

export { base } from "./base";
export const derived = style(middle, "rounded-md");
```

```ts title="middle.ts"
import { style } from "stillwind/react";
import { base } from "./base";

export const middle = style(base, "text-blue-600");
```

## How to fix

- Move the shared bases into a module that both modules import, as in the
  example.
- Or put the styles that depend on each other in the same module.

Changing the order of the imports does not fix it.

Source: https://stillwind.dev/docs/errors/SW11002/index.mdx