[pull] main from nodejs:main

apps/site/components/Common/Partners/PartnersIconList/index.tsx

@@ -7,6 +7,7 @@ import { ICON_PARTNERS } from '#site/next.partners.constants';
 import type { PartnerCategory } from '#site/types';
 
 import PartnerIcon from '../PartnerIcon';
+
 import style from './index.module.css';
 
 type PartnersIconListProps = {

apps/site/components/Common/Partners/PartnersLogoList/index.tsx

@@ -7,6 +7,7 @@ import { LOGO_PARTNERS } from '#site/next.partners.constants';
 import type { PartnerCategory } from '#site/types';
 
 import PartnerLogo from '../PartnerLogo';
+
 import style from './index.module.css';
 
 type PartnersLogoListProps = {

apps/site/components/Common/Searchbox/ChatInteractions/index.tsx

@@ -7,6 +7,7 @@ import { useScrollableContainer } from '@orama/ui/hooks/useScrollableContainer';
 import { useTranslations } from 'next-intl';
 
 import { ChatMessage } from '../ChatMessage';
+
 import styles from './index.module.css';
 
 export const ChatInteractionsContainer = () => {

apps/site/components/Common/Searchbox/ChatMessage/index.tsx

@@ -4,6 +4,7 @@ import { ChatInteractions } from '@orama/ui/components';
 import type { FC } from 'react';
 
 import ChatSources from '../ChatSources';
+
 import styles from './index.module.css';
 
 type ChatMessageProps = {

apps/site/components/Common/Searchbox/ChatSources/index.tsx

@@ -2,10 +2,11 @@ import type { Interaction, AnyObject } from '@orama/core';
 import { ChatInteractions } from '@orama/ui/components';
 import type { FC } from 'react';
 
-import styles from './index.module.css';
 import type { Document } from '../DocumentLink';
 import { DocumentLink } from '../DocumentLink';
 
+import styles from './index.module.css';
+
 type ChatSourcesProps = {
   interaction: Interaction;
 };

apps/site/components/Common/Searchbox/SearchItem/index.tsx

@@ -6,9 +6,10 @@ import type { FC } from 'react';
 
 import { DocumentLink } from '../DocumentLink';
 import type { Document } from '../DocumentLink';
-import styles from './index.module.css';
 import { getFormattedPath } from './utils';
 
+import styles from './index.module.css';
+
 type SearchItemProps = {
   document: Document;
   mode?: 'search' | 'chat';

apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx

@@ -6,9 +6,10 @@ import { SlidingPanel } from '@orama/ui/components';
 import { useTranslations } from 'next-intl';
 import type { FC, PropsWithChildren } from 'react';
 
-import styles from './index.module.css';
 import { ChatInteractionsContainer } from '../ChatInteractions';
 
+import styles from './index.module.css';
+
 type SlidingChatPanelProps = PropsWithChildren<{
   open: boolean;
   onClose: () => void;

apps/site/components/Common/Searchbox/index.tsx

@@ -12,11 +12,12 @@ import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
 
 import type { Document } from './DocumentLink';
 import { Footer } from './Footer';
-import styles from './index.module.css';
 import { oramaClient } from './orama-client';
 import { SearchItem } from './SearchItem';
 import { SlidingChatPanel } from './SlidingChatPanel';
 
+import styles from './index.module.css';
+
 const Searchbox: FC = () => {
   const t = useTranslations();
   const [mode, setMode] = useState<'chat' | 'search'>('search');

apps/site/components/EOL/EOLReleaseTable/index.tsx

@@ -6,9 +6,10 @@ import provideReleaseData from '#site/next-data/providers/releaseData';
 import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
 import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs';
 
-import styles from './index.module.css';
 import EOLReleaseTableBody from './TableBody';
 
+import styles from './index.module.css';
+
 const EOLReleaseTable: FC = async () => {
   const releaseData = await provideReleaseData();
   const vulnerabilities = await provideVulnerabilities();

apps/site/components/Releases/ReleaseOverview/index.tsx

@@ -11,9 +11,10 @@ import type { FC } from 'react';
 import FormattedTime from '#site/components/Common/FormattedTime';
 import type { NodeRelease } from '#site/types';
 
-import styles from './index.module.css';
 import ReleaseOverviewItem from './ReleaseOverviewItem';
 
+import styles from './index.module.css';
+
 type ReleaseOverviewProps = {
   release: NodeRelease;
 };

docs/code-style.md

@@ -115,6 +115,7 @@ We use [PostCSS](https://postcss.org/) and [Tailwind CSS](https://tailwindcss.co
 - Prefix prop types with the component name
 - Always use default exports for React components
 - Avoid direct DOM/Web API access in components - use hooks or utilities instead
+- CSS imports should always be the last import in the file
 
 ### Example Component Structure
 

docs/creating-components.md

@@ -42,6 +42,7 @@ Generic UI components should be placed in `@node-core/ui-components`:
 ```tsx
 // @node-core/ui-components/src/Common/Button/index.tsx
 import type { FC, ButtonHTMLAttributes } from 'react';
+
 import styles from './index.module.css';
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -108,6 +109,7 @@ ComponentName/
 
 ```tsx
 import type { FC } from 'react';
+
 import styles from './index.module.css';
 
 type MyComponentProps = {
@@ -138,6 +140,7 @@ export default MyComponent;
 
 ```tsx
 import type { FC, PropsWithChildren } from 'react';
+
 import styles from './index.module.css';
 
 type CardProps = PropsWithChildren<{

eslint.config.js

@@ -1,7 +1,7 @@
 import js from '@eslint/js';
 import * as importX from 'eslint-plugin-import-x';
-import tseslint from 'typescript-eslint';
 import globals from 'globals';
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   js.configs.recommended,
@@ -54,6 +54,24 @@ export default tseslint.config(
             'index',
             'unknown',
           ],
+          pathGroups: [
+            {
+              pattern: '{.,..}/**/*.css',
+              group: 'sibling',
+              position: 'after',
+            },
+            {
+              pattern: './**/*.css',
+              group: 'sibling',
+              position: 'after',
+            },
+            {
+              pattern: '../**/*.css',
+              group: 'sibling',
+              position: 'after',
+            },
+          ],
+          pathGroupsExcludedImportTypes: ['type'],
           'newlines-between': 'always',
           alphabetize: {
             order: 'asc',

packages/ui-components/src/Common/BaseLinkTabs/index.tsx

@@ -2,9 +2,10 @@ import type { FC, PropsWithChildren } from 'react';
 
 import type { LinkLike } from '#ui/types';
 
-import styles from './index.module.css';
 import StatelessSelect from '../Select/StatelessSelect';
 
+import styles from './index.module.css';
+
 type LinkTab = { key: string; label: string; link: string };
 
 export type LinkTabsProps = PropsWithChildren<{

packages/ui-components/src/Common/Switch/index.module.css

@@ -7,10 +7,10 @@
 
   .label {
     @apply cursor-pointer
-      select-none
       text-sm
       font-medium
       text-neutral-800
+      select-none
       dark:text-neutral-200;
   }
 
@@ -19,10 +19,10 @@
   }
 
   .root {
-    @apply w-10.5
-      relative
+    @apply relative
       inline-flex
       h-6
+      w-10.5
       cursor-pointer
       items-center
       rounded-full

packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx

@@ -5,9 +5,10 @@ import type { FC } from 'react';
 import BaseActiveLink from '#ui/Common/BaseActiveLink';
 import type { FormattedMessage, LinkLike } from '#ui/types';
 
-import styles from './index.module.css';
 import ProgressionIcon from '../ProgressionIcon';
 
+import styles from './index.module.css';
+
 type SidebarItemProps = {
   label: FormattedMessage;
   link: string;