Imports after the .css import are being ignored

[Kamahl19]

Your Environment

• Prettier version: 3.2.5
• node version: 20
• package manager: npm@10
• IDE: VScode

Describe the bug

Imports after the .css import are being ignored and not sorted. Everything above the .css including the .css imports are sorted properly.

To Reproduce

This

import { cn } from "@/utils";
import Link from "next/link";
import React from "react";
import foo from "./foo";
import "@mdxeditor/editor/style.css";
import "./style.css";
import path from "node:path";

should be ordered using the default config to

import path from "node:path";
import { cn } from "@/utils";
import Link from "next/link";
import React from "react";
import foo from "./foo";
import "@mdxeditor/editor/style.css";
import "./style.css";

However nothing happens. Anything I move under the .css or in-between those 2 .css imports is not moved up and ordered properly.

However, I have noticed when I move multiple imports below .css, those are ordered properly amongst themselves but they are still not being moved above the .css import and sorted with the rest of the imports. For example:

This

import path from "node:path";
import { cn } from "@/utils";
import Link from "next/link";
import "@mdxeditor/editor/style.css";
import "./style.css";
import foo from "./foo";
import React from "react";

sorts like this

import path from "node:path";
import { cn } from "@/utils";
import Link from "next/link";
import "@mdxeditor/editor/style.css";
import "./style.css";
import React from "react";
import foo from "./foo";

.prettierrc

{ plugins": ["@ianvs/prettier-plugin-sort-imports"] }

[IanVS]

This is intentional. If you don't import anything from a file, it's considered a "side-effect-only" import, which in general are not safe to re-arrange. So, we sort the imports on either side of such an import, but do not move any imports across that boundary. Think about two css imports, if we moved them around, your cascade would change and potentially break the styling in your app.

[Kamahl19]

Thanks for the quick reply! I have not realised this applies also to the .css imports. You are right about not re-arranging the css files.

When I use auto-import in VSC it appends to the end. If I dont move those auto-added imports above the .css import they stay below. So I am thinking can this be improved? I am thinking this could be done safely, please correct me if I am wrong - If side-effect import is a .css file, move any non-css files above and sort them with the rest.

[IanVS]

There was some discussion in https://github.com/IanVS/prettier-plugin-sort-imports/issues/51 trying to find a good way to do it, but we never arrived at a generally-safe solution, unfortunately.

[Kamahl19]

Thanks! I am closing this as duplicate.