mismatched-framework-import

This rule reports a file that imports style() from the entrypoint of another framework, such as stillwind/astro in a React component. Each entrypoint selects a class key and style representation. Entrypoints with the same output format are compatible.

Reported

import { style } from "stillwind/astro";mismatched-framework-import: `stillwind/astro` is incompatible with JSX/TSX input; use `stillwind/alpine`, `stillwind/lit`, `stillwind/preact`, `stillwind/qwik`, `stillwind/react`, `stillwind/solid`, `stillwind/vanilla`, `stillwind/vue`

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

Fixed

import { style } from "stillwind/react";

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

How to fix

Import from the entrypoint of the framework that renders the element. A React island inside an Astro page imports stillwind/react. See Framework integrations.

Rule settings