jantimon / next-yak

🦀 Zero-runtime CSS-in-JS powered by Rust. Write styled-components syntax, get build-time CSS extraction and full RSC compatibility
https://yak.js.org
139 stars 4 forks source link

change css order to move at the end of the imports #203

Closed christinaheidt closed 3 weeks ago

jantimon commented 3 weeks ago

Previously, next-yak was injecting its CSS module imports right after the first next-yak import.

Unfortunately this caused that CSS modules weren't loaded in an order that didn't match the component inheritance chain, causing specificity conflicts

For example, with:

import { styled } from "next-yak";
import { Button } from "./button";

The CSS module import would be injected between these imports, potentially loading the base component's CSS after its extended components

This fix moves the injected CSS module import after the last exsiting import declaration in the javascript file

This matches webpack's CSS module ordering behavior (see https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1117)

fixes #202