Imports with only a path are not sorted (.css files, etc)

[Soecka]

Your Environment

• Prettier version: 3.3.3
• node version: 20
• package manager: pnpm@9
• IDE: VScode,

Describe the bug
import '../styles/main.css'; didn't sort into the bottom

import { AppProps } from 'next/app';
import Head from 'next/head';
import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material';
import { HTTPError } from 'koajax';
import '../styles/main.css';
import { configure } from 'mobx';
import { enableStaticRendering, observer } from 'mobx-react';

import { isServer } from '../models/Base';

import { Footer } from '../components/Layout/Footer';
import { MainNavigator } from '../components/Layout/MainNavigator';

To Reproduce
when I format with prettier, I got this below

import { AppProps } from 'next/app';
import Head from 'next/head';
import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material';
import { HTTPError } from 'koajax';

import '../styles/main.css';

import { configure } from 'mobx';
import { enableStaticRendering, observer } from 'mobx-react';

import { isServer } from '../models/Base';

import { Footer } from '../components/Layout/Footer';
import { MainNavigator } from '../components/Layout/MainNavigator';

Expected behavior

import { AppProps } from 'next/app';
import Head from 'next/head';
import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material';
import { HTTPError } from 'koajax';
import { configure } from 'mobx';
import { enableStaticRendering, observer } from 'mobx-react';

import { isServer } from '../models/Base';

import { Footer } from '../components/Layout/Footer';
import { MainNavigator } from '../components/Layout/MainNavigator';

import '../styles/main.css';

Screenshots, code sample, etc

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

.prettierrc

{
    "plugins": [
        "prettier-plugin-css-order",
        "@ianvs/prettier-plugin-sort-imports",
        "prettier-plugin-tailwindcss"
    ],
    "singleQuote": true,
    "trailingComma": "none",
    "arrowParens": "avoid",
    "tabWidth": 2,
    "printWidth": 100,
    "importOrder": [
        "^react$",
        "^next\/?",
        "^@mui",
        "<THIRD_PARTY_MODULES>",
        "",
        "models\/",
        "api\/",
        "",
        "components\/",
        "^[.]",
        "",
        "^(?!.*[.]css$)[./].*$",
        ".css$",
        ""
    ]
}

Error log

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

• I'm willing to fix this bug 🥇

[Soecka]

I've retrieved a couple of issues over at tailwind that conflict with the sort plugin, but they're all marked as fixed, and I'm not quite sure if the issue is related to regular expressions or the plugin itself

[fbartho]

Hey @Soecka this is a recurring confusion, (and I think we need something more than documentation to explain it @IanVS)

In short, reorganizing CSS file-imports runs the risk of changing the CSS cascade which could change the look of your code. (Unless you have very specific conventions in how you write CSS).

And as a more general issue, imports without imported-names are by-definition being imported to cause a side-effect (whether it’s hooking in polyfills into global scope or something else). So it’s unsafe for this plugin to move stuff around an import that doesn’t import any variables (all imports can have side-effects, but compromising was necessary to make any tool like this one work at all).

Other similar tickets:

• Special word for "side-effect only" imports #51
• Import without parameters  #150
• Imports after the .css import are being ignored #157
• Unexpected behavior for CSS imports #181
• enable imports without naming to be sorted #186
• Order expected #187

[Soecka]

Thanks for the reply, I assume it was a tailwind plugin conflict, should have searched for related issues in this repository first!
Recheck the definition of side effect import
Thanks again

[IanVS]

Thanks @fbartho. I've pinned this issue, hopefully that will help a little. We can also maybe update the issue template to mention this as well, because indeed it seems to trip up a lot of people.