Unexpected behavior for CSS imports

[alixsep]

Your Environment

• Prettier version: 3.3.3
• node version: 20.11.1
• package manager: pnpm@9.9.0
• IDE: VScode

Describe the bug

The order of imports after formatting with prettier doesn't follow the one defined in prettier configuration file when a CSS file is being imported.

To Reproduce

I have this file (unformatted):

import { useRef, useState, type FC } from "react"
import { Card, downloadCard } from "@/lib/index"
import DevLogo from "@/components/dev-logo"
import "@/styles/app.css"
import NpmLogo from "@/components/npm-logo"

and this is my config file for prettier (.prettierrc.cjs):

/* eslint-env node */
/** @type {import('prettier').Config} */
module.exports = {
  endOfLine: "lf",
  semi: false,
  singleQuote: false,
  jsxSingleQuote: false,
  tabWidth: 2,
  printWidth: 80,
  trailingComma: "all",
  bracketSpacing: true,
  plugins: ["@ianvs/prettier-plugin-sort-imports"],
  importOrder: [
    "<BUILTIN_MODULES>",
    "^vitest",
    "^(react/(.*)$)|^(react$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@/types/(.*)$",
    "",
    "^@/lib/(.*)$",
    "",
    "^@/hooks/(.*)$",
    "^@/components/(.*)$",
    "^@/config/(.*)$",
    "^@/data/(.*)$",
    "",
    "^(?!.*[.]css$)[./].*$",
    ".css$",
  ],
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  importOrderTypeScriptVersion: "4.5.2",
}

and this is the result that i get after formatting:

import { useRef, useState, type FC } from "react"

import { Card, downloadCard } from "@/lib/index"

import DevLogo from "@/components/dev-logo"

import "@/styles/app.css"

import NpmLogo from "@/components/npm-logo"

which is wrong; as I expect my formatted file to look like this:

import { useRef, useState, type FC } from "react"

import { Card, downloadCard } from "@/lib/index"

import DevLogo from "@/components/dev-logo"
import NpmLogo from "@/components/npm-logo"

import "@/styles/app.css"

Error log

No errors, and this is the log of prettier in my output:

["INFO" - 12:22:27 PM] Using config file at c:\Data\Programming\Draft\perfectci\.prettierrc.cjs
["INFO" - 12:22:43 PM] Using config file at c:\Data\Programming\Draft\perfectci\.prettierrc.cjs
["INFO" - 12:22:44 PM] Formatting file:///c%3A/Data/Programming/Draft/perfectci/src/app.tsx
["INFO" - 12:22:44 PM] Using config file at c:\Data\Programming\Draft\perfectci\.prettierrc.cjs
["INFO" - 12:22:44 PM] PrettierInstance:
{
  "modulePath": "c:\\Data\\Programming\\Draft\\perfectci\\node_modules\\prettier\\index.cjs",
  "messageResolvers": {},
  "version": "3.3.3"
}
["INFO" - 12:22:44 PM] Using ignore file (if present) at c:\Data\Programming\Draft\perfectci\.prettierignore
["INFO" - 12:22:44 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 12:22:44 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 12:22:44 PM] Prettier Options:
{
  "filepath": "c:\\Data\\Programming\\Draft\\perfectci\\src\\app.tsx",
  "parser": "typescript",
  "endOfLine": "lf",
  "semi": false,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all",
  "bracketSpacing": true,
  "plugins": [
    "C:\\Data\\Programming\\Draft\\perfectci\\node_modules\\.pnpm\\@ianvs+prettier-plugin-sort-imports@4.3.1_prettier@3.3.3\\node_modules\\@ianvs\\prettier-plugin-sort-imports\\lib\\src\\index.js"
  ],
  "importOrder": [
    "<BUILTIN_MODULES>",
    "^vitest",
    "^(react/(.*)$)|^(react$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@/types/(.*)$",
    "",
    "^@/lib/(.*)$",
    "",
    "^@/hooks/(.*)$",
    "^@/components/(.*)$",
    "^@/config/(.*)$",
    "^@/data/(.*)$",
    "",
    "^(?!.*[.]css$)[./].*$",
    ".css$"
  ],
  "importOrderParserPlugins": [
    "typescript",
    "jsx",
    "decorators-legacy"
  ],
  "importOrderTypeScriptVersion": "4.5.2"
}
["INFO" - 12:22:44 PM] Formatting completed in 63ms.

Contribute to @ianvs/prettier-plugin-sort-imports

• I'm willing to fix this bug 🥇

[fbartho]

Hey @alixsep! We’ve had this come up a few times. This is actually expected behavior, and here’s why:

CSS has a hierarchy, and later-declarations have higher precedence than earlier ones. This means if we re-organized the CSS imports, we would change the styling of your page.

This means we choose not to sort CSS imports like your example — because it’s generally unsafe.

---

This isn’t an “special case” that we’ve put in for CSS, it actually happens to also apply to JS (because things in the global scope can be manipulated by JS, and later imports can depend on side-effects of earlier imports). The compromise there is that if you pluck values out of a JS import, then we assume you’re probably not expecting side-effects, but if you have an expression that introduces no names import “side-effect-only”, then we know that import is only for the side-effects.

If you used a CSS-in-JS technique and imported the CSS into a named import, then we’d be able to sort it.

Hope this helps, and sorry this is probably not the news you were looking for!