Option to ignore CSS when organizing imports

[remojansen]

Hi, I'm trying to migrate a very large project (@ematipico knows this project) to Biome, and I'm having an issue preventing the dev team from adopting Biome.

The issue is the order of CSS imports. Biome is sorting the imports, but this breaks the web app. We are aware of the possibility of adding line breaks to prevent this issue. However, the dev team feels this opens the door for human errors.

We would like an option to organise imports (just the way it is now) but avoid changing the order of CSS files. Something like:

"organizeImports": {
    "enabled": true,
    "organizeCSS": false
}

We don't mind if all CSS files are placed at the top, but the order within the files should not be altered. By doing this, we will not have to worry about one of our developers forgetting to add a line break between CSS files.

Please let us know your thoughts. Thanks!

Update (21 Nov 2023)

Confirmed by the Biome team there is no need for new config. The issues should be addressed by a bug fix.

[Conaclos]

Hi! Thanks for reporting this issue!

Could you provide a concrete example with an example on the Biome's playground? This could help to picture the issue.

[remojansen]

Sure!

Here it is:

Playground demo

Input:

import '@projectx/theme/src/normalize.css';
import './index.css';
import '@projectx/theme/src/button.css';
import '@projectx/theme/src/col-3-section.css';
import '@projectx/theme/src/col-50x50-section.css';
import '@projectx/theme/src/col-full-section.css';
import '@projectx/theme/src/onetrust.css';
import '@projectx/theme/src/rich-text-accordion.css';
import '@projectx/theme/src/rich-text-table.css';
import '@projectx/theme/src/side.css';
import '@projectx/theme/src/summary.css';
import '@projectx/theme/src/utils.css';
import '@projectx/theme/src/component-ui-form.css';
import '@projectx/theme/src/main-app.css';
import { LayoutInternal } from './LayoutInternal';
import { LoginStatus } from '@projectx/constants-common';
import { ErrorHandling } from '@projectx/container-error-handler';
import { CustomError } from './CustomError';
import React from 'react';

Output (Import sorting):

import { LoginStatus } from '@projectx/constants-common';
import { ErrorHandling } from '@projectx/container-error-handler';
import '@projectx/theme/src/button.css';
import '@projectx/theme/src/col-3-section.css';
import '@projectx/theme/src/col-50x50-section.css';
import '@projectx/theme/src/col-full-section.css';
import '@projectx/theme/src/component-ui-form.css';
import '@projectx/theme/src/main-app.css';
import '@projectx/theme/src/normalize.css';
import '@projectx/theme/src/onetrust.css';
import '@projectx/theme/src/rich-text-accordion.css';
import '@projectx/theme/src/rich-text-table.css';
import '@projectx/theme/src/side.css';
import '@projectx/theme/src/summary.css';
import '@projectx/theme/src/utils.css';
import React from 'react';
import { CustomError } from './CustomError';
import { LayoutInternal } from './LayoutInternal';
import './index.css';

What we would like (organizeCSS false):

import '@projectx/theme/src/normalize.css';
import './index.css';
import '@projectx/theme/src/button.css';
import '@projectx/theme/src/col-3-section.css';
import '@projectx/theme/src/col-50x50-section.css';
import '@projectx/theme/src/col-full-section.css';
import '@projectx/theme/src/onetrust.css';
import '@projectx/theme/src/rich-text-accordion.css';
import '@projectx/theme/src/rich-text-table.css';
import '@projectx/theme/src/side.css';
import '@projectx/theme/src/summary.css';
import '@projectx/theme/src/utils.css';
import '@projectx/theme/src/component-ui-form.css';
import '@projectx/theme/src/main-app.css';
import { LoginStatus } from '@projectx/constants-common';
import { ErrorHandling } from '@projectx/container-error-handler';
import React from 'react';
import { CustomError } from './CustomError';
import { LayoutInternal } from './LayoutInternal';

Thanks

[Conaclos]

Biome should indeed not reorder these imports. It should consider them as side-effect imports.

[remojansen]

So, is the current behaviour not expected? Should a bug be raised, or will a new option/feature be required?

[ematipico]

Yeah it's definitely a bug!

[remojansen]

I am happy to try to work on a bug fix over the Christmas break. It will be my first time working with Rust and contributing to Biome. I will probably need some help, but I'm feeling brave. I wanted to give Rust a go, so this could be my perfect excuse.

[ematipico]

Feel free to open an issue, so we can assign that to you. You can use that issue to ask any questions you need 👌

[remojansen]

The bug is #817 I will now close this discussion