chore: fix CSS import order ESLint rule (#7852)

* enhance: added ESLint ruler for CSS import

* chore: added ruler for default import of css, and fixed all exsting files

* chore: reverted changes on css header rulers

.eslintrc.js

@@ -249,6 +249,14 @@ module.exports = {
           'type',
         ],
         pathGroups: [
+          // always put css import to the last, ref:
+          // https://github.com/import-js/eslint-plugin-import/issues/1239
+          {
+            pattern: '*.+(css|sass|less|scss|pcss|styl)',
+            group: 'unknown',
+            patternOptions: {matchBase: true},
+            position: 'after',
+          },
           {pattern: '@jest/globals', group: 'builtin', position: 'before'},
           {pattern: 'react', group: 'builtin', position: 'before'},
           {pattern: 'fs-extra', group: 'builtin'},
@@ -265,6 +273,10 @@ module.exports = {
           {pattern: '@theme-original/**', group: 'internal'},
         ],
         pathGroupsExcludedImportTypes: [],
+        // example: let `import './nprogress.css';` after importing others
+        // in `packages/docusaurus-theme-classic/src/nprogress.ts`
+        // see more: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md#warnonunassignedimports-truefalse
+        warnOnUnassignedImports: true,
       },
     ],
     'import/prefer-default-export': OFF,

packages/docusaurus-theme-classic/src/nprogress.ts

@@ -6,9 +6,10 @@
  */
 
 import nprogress from 'nprogress';
-import './nprogress.css';
 import type {ClientModule} from '@docusaurus/types';
 
+import './nprogress.css';
+
 nprogress.configure({showSpinner: false});
 
 const delay = 200;

packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx

@@ -14,14 +14,15 @@ import {
 } from '@docusaurus/theme-common/internal';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {translate} from '@docusaurus/Translate';
-import type {Props} from '@theme/DocCard';
 
-import styles from './styles.module.css';
+import type {Props} from '@theme/DocCard';
 import type {
   PropSidebarItemCategory,
   PropSidebarItemLink,
 } from '@docusaurus/plugin-content-docs';
 
+import styles from './styles.module.css';
+
 function CardContainer({
   href,
   children,

packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx

@@ -13,10 +13,11 @@ import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import {usePrismTheme} from '@docusaurus/theme-common';
+
 import type {Props} from '@theme/Playground';
+import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
 
 import styles from './styles.module.css';
-import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
 
 function Header({children}: {children: React.ReactNode}) {
   return <div className={clsx(styles.playgroundHeader)}>{children}</div>;

packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx

@@ -31,9 +31,10 @@ import {useAllDocsData} from '@docusaurus/plugin-content-docs/client';
 import Translate, {translate} from '@docusaurus/Translate';
 import Layout from '@theme/Layout';
 
-import styles from './styles.module.css';
 import type {ThemeConfig} from '@docusaurus/theme-search-algolia';
 
+import styles from './styles.module.css';
+
 // Very simple pluralization: probably good enough for now
 function useDocumentsFoundPlural() {
   const {selectMessage} = usePluralForm();

project-words.txt

@@ -212,6 +212,7 @@ paraiso
 pathinfo
 pathnames
 pbcopy
+pcss
 peaceiris
 philpl
 photoshop
@@ -307,6 +308,7 @@ subsubsubfolder
 sucipto
 supabase
 svgr
+styl
 swizzlable
 teik
 templating

website/src/pages/index.tsx

@@ -8,7 +8,6 @@
 import React from 'react';
 import clsx from 'clsx';
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import Link from '@docusaurus/Link';
 import Translate, {translate} from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -23,6 +22,7 @@ import Quotes from '@site/src/data/quotes';
 import Features, {type FeatureItem} from '@site/src/data/features';
 
 import styles from './styles.module.css';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 function HeroBanner() {
   return (