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

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

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

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

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

Fixed

import { style } from "stillwind/react";

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

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

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

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.