Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unexpected behavior for CSS imports #181

Closed
1 task
alixsep opened this issue Aug 31, 2024 · 1 comment
Closed
1 task

Unexpected behavior for CSS imports #181

alixsep opened this issue Aug 31, 2024 · 1 comment
Assignees
Labels
invalid This doesn't seem right wontfix This will not be worked on

Comments

@alixsep
Copy link

alixsep commented Aug 31, 2024

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
Copy link
Collaborator

fbartho commented Aug 31, 2024

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!

@fbartho fbartho closed this as not planned Won't fix, can't repro, duplicate, stale Aug 31, 2024
@fbartho fbartho added invalid This doesn't seem right wontfix This will not be worked on labels Aug 31, 2024
@github-staff github-staff deleted a comment from alixsep Sep 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
invalid This doesn't seem right wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

5 participants
@fbartho @IanVS @alixsep and others