chore: fix CSS import order ESLint rule

.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();

packages/stylelint-copyright/src/index.ts

@@ -12,7 +12,16 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
   rejected: 'Missing copyright in the header comment',
 });
 
-type SecondaryOption = {header?: string};
+type SecondaryOption =
+  | {header?: string}
+  // FIX: the SecondOption is potential to be undefined in the following files:
+  // - examples/facebook/src/pages/styles.module.css
+  // - examples/facebook/src/css/custom.css
+  // - packages/create-docusaurus/templates/facebook/src/css/custom.css
+  // - packages/create-docusaurus/templates/facebook/src/pages/styles.module.css
+  //
+  // And the file info can be derived from `result.opts.from`
+  | undefined;
 
 const plugin = stylelint.createPlugin(
   ruleName,
@@ -38,12 +47,12 @@ const plugin = stylelint.createPlugin(
         root.first.source?.start?.column === 1
       ) {
         const {text} = root.first;
-        if (text === secondaryOption.header) {
+        if (text === secondaryOption?.header) {
           return;
         }
       }
       if (context.fix) {
-        root.first?.before(`/*${secondaryOption.header!}\n */`);
+        root.first?.before(`/*${secondaryOption?.header}\n */`);
         return;
       }
 

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 (