refactor(theme): use namedExport of cssModules

.gitignore

@@ -55,3 +55,6 @@ playwright-report/
 # plugin-typedoc auto-generated files
 e2e/fixtures/plugin-typedoc/single/doc/api
 e2e/fixtures/plugin-typedoc/multi/doc/api
+
+# ignore typed css module
+*.scss.d.ts

package.json

@@ -2,8 +2,8 @@
   "name": "rspress-monorepo",
   "private": true,
   "scripts": {
-    "build": "cross-env NX_DAEMON=false NX_REJECT_UNKNOWN_LOCAL_CACHE=0 nx run-many -t build --exclude @rspress-fixture/* --exclude @rspress/docs",
-    "build:website": "cross-env NX_DAEMON=false NX_REJECT_UNKNOWN_LOCAL_CACHE=0 nx run @rspress/docs:build",
+    "build": "cross-env NX_DAEMON=false nx run-many -t build --exclude @rspress-fixture/* --exclude @rspress/docs",
+    "build:website": "cross-env NX_DAEMON=false nx run @rspress/docs:build",
     "change": "changeset",
     "changeset": "changeset",
     "check-dependency-version": "check-dependency-version-consistency . --dep-type devDependencies",

packages/theme-default/package.json

@@ -64,6 +64,7 @@
     "@rsbuild/plugin-react": "~1.1.1",
     "@rsbuild/plugin-sass": "~1.2.2",
     "@rsbuild/plugin-svgr": "^1.0.7",
+    "@rsbuild/plugin-typed-css-modules": "~1.0.2",
     "@rslib/core": "0.5.4",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/hast": "^2.3.10",

packages/theme-default/rslib.config.ts

@@ -1,6 +1,7 @@
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
 import { defineConfig } from '@rslib/core';
 
 const COMMON_EXTERNALS = [
@@ -25,7 +26,12 @@ export default defineConfig({
     {
       format: 'esm',
       dts: { bundle: true },
-      plugins: [pluginReact(), pluginSvgr(), pluginSass()],
+      plugins: [
+        pluginReact(),
+        pluginSvgr(),
+        pluginSass(),
+        pluginTypedCSSModules(),
+      ],
       source: {
         define: {
           __WEBPACK_PUBLIC_PATH__: '__webpack_public_path__',
@@ -49,6 +55,8 @@ export default defineConfig({
         externals: COMMON_EXTERNALS,
         cssModules: {
           localIdentName: '[local]_[hash:hex:5]',
+          namedExport: true,
+          exportLocalsConvention: 'camelCaseOnly',
         },
         copy: {
           patterns: [

packages/theme-default/src/components/Badge/index.tsx

@@ -1,4 +1,4 @@
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface BadgeProps {
   /**

packages/theme-default/src/components/Button/index.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@theme';
 import React from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface ButtonProps {
   type?: string;

packages/theme-default/src/components/DocFooter/index.tsx

@@ -5,7 +5,7 @@ import {
 import { EditLink, LastUpdated, PrevNextPage } from '@theme';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import { usePrevNextPage } from '../../logic/usePrevNextPage';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export function DocFooter() {
   const { prevPage, nextPage } = usePrevNextPage();

packages/theme-default/src/components/EditLink/index.tsx

@@ -1,5 +1,5 @@
 import { useEditLink } from '../../logic/useEditLink';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export function EditLink() {
   const editLinkObj = useEditLink();

packages/theme-default/src/components/HomeFeature/index.tsx

@@ -3,13 +3,24 @@ import { isExternalUrl, withBase } from '@rspress/shared';
 import type { Feature, FrontMatterMeta } from '@rspress/shared';
 
 import { renderHtmlOrText } from '../../logic/utils';
-import styles from './index.module.scss';
-
-const GRID_PREFIX = 'grid-';
+import * as styles from './index.module.scss';
 
 const getGridClass = (feature: Feature): string => {
   const { span } = feature;
-  return `${GRID_PREFIX}${span || 4}`;
+  switch (span) {
+    case 2:
+      return styles.grid2;
+    case 3:
+      return styles.grid3;
+    case 4:
+      return styles.grid4;
+    case 6:
+      return styles.grid6;
+    case undefined:
+      return styles.grid4;
+    default:
+      return '';
+  }
 };
 
 export function HomeFeature({
@@ -36,9 +47,9 @@ export function HomeFeature({
         return (
           <div
             key={title}
-            className={`${
-              styles[getGridClass(feature)]
-            } rounded hover:var(--rp-c-brand)`}
+            className={`${getGridClass(
+              feature,
+            )} rounded hover:var(--rp-c-brand)`}
           >
             <div className="h-full p-2">
               <article

packages/theme-default/src/components/HomeHero/index.tsx

@@ -4,7 +4,7 @@ import type { FrontMatterMeta } from '@rspress/shared';
 import { Button } from '@theme';
 
 import { renderHtmlOrText } from '../../logic/utils';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 const DEFAULT_HERO = {
   name: '',

packages/theme-default/src/components/Link/index.tsx

@@ -11,7 +11,7 @@ import nprogress from 'nprogress';
 import type React from 'react';
 import type { ComponentProps } from 'react';
 import { scrollToTarget } from '../../logic/sideEffects';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export interface LinkProps extends ComponentProps<'a'> {
   href?: string;

packages/theme-default/src/components/LinkCard/index.tsx

@@ -1,5 +1,5 @@
 import ArrowRight from '@theme-assets/arrow-right';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface LinkCardProps {
   /**

packages/theme-default/src/components/Nav/NavBarTitle.tsx

@@ -2,7 +2,7 @@ import { normalizeImagePath, usePageData } from '@rspress/runtime';
 import { Link } from '@theme';
 import { useMemo } from 'react';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export const NavBarTitle = () => {
   const { siteData } = usePageData();

packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx

@@ -5,7 +5,7 @@ import {
   withoutBase,
 } from '@rspress/shared';
 import { Link, Tag } from '@theme';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface Props {
   pathname: string;

packages/theme-default/src/components/Nav/NavTranslations.tsx

@@ -1,5 +1,5 @@
 import { NavMenuGroup } from './NavMenuGroup';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { useTranslationMenuData } from './menuDataHooks';
 
 export function NavTranslations() {

packages/theme-default/src/components/Nav/NavVersions.tsx

@@ -1,5 +1,5 @@
 import { NavMenuGroup } from './NavMenuGroup';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { useVersionMenuData } from './menuDataHooks';
 
 export function NavVersions() {

packages/theme-default/src/components/Nav/index.tsx

@@ -13,7 +13,7 @@ import { NavMenuGroup } from './NavMenuGroup';
 import { NavMenuSingleItem } from './NavMenuSingleItem';
 import { NavTranslations } from './NavTranslations';
 import { NavVersions } from './NavVersions';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export interface NavProps {
   beforeNav?: React.ReactNode;

packages/theme-default/src/components/NavHamburger/index.tsx

@@ -3,7 +3,7 @@ import SmallMenu from '@theme-assets/small-menu';
 import { useNavScreen } from '../../logic/useNav';
 import { NavScreen } from '../NavScreen';
 import { SvgWrapper } from '../SvgWrapper';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface Props {
   siteData: SiteData<DefaultThemeConfig>;

packages/theme-default/src/components/NavScreen/NavScreenMenuGroup.tsx

@@ -7,7 +7,7 @@ import type {
 import { Link } from '@theme';
 import Down from '@theme-assets/down';
 import { useState } from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export interface NavScreenMenuGroupItem {
   text?: string | React.ReactElement;

packages/theme-default/src/components/NavScreen/index.tsx

@@ -12,7 +12,7 @@ import {
 import { SocialLinks } from '../SocialLinks';
 import { SwitchAppearance } from '../SwitchAppearance';
 import { NavScreenMenuGroup } from './NavScreenMenuGroup';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface Props {
   isScreenOpen: boolean;
@@ -35,9 +35,7 @@ const NavScreenTranslations = () => {
 const NavScreenVersions = () => {
   const versionMenuData = useVersionMenuData();
   return (
-    <div
-      className={`${styles.navTranslations} flex text-sm font-bold justify-center`}
-    >
+    <div className={'flex text-sm font-bold justify-center'}>
       <div className="mx-1.5 my-1">
         <NavScreenMenuGroup {...versionMenuData} />
       </div>

packages/theme-default/src/components/Overview/index.tsx

@@ -16,7 +16,7 @@ import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import { useSidebarData } from '../../logic/useSidebarData';
 import { renderInlineMarkdown } from '../../logic/utils';
 import { isSidebarDivider, isSidebarSingleFile } from '../Sidebar/utils';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { findItemByRoutePath } from './utils';
 
 interface GroupItem {

packages/theme-default/src/components/PrevNextPage/index.tsx

@@ -1,7 +1,7 @@
 import { Link } from '@theme';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import { preloadLink } from '../Sidebar/utils';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface PrevNextPageProps {
   type: 'prev' | 'next';

packages/theme-default/src/components/ScrollToTop/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export function ScrollToTop() {
   const [isVisible, setIsVisible] = useState(false);

packages/theme-default/src/components/Search/SearchButton.tsx

@@ -2,7 +2,7 @@ import SearchSvg from '@theme-assets/search';
 import { useEffect, useState } from 'react';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import { SvgWrapper } from '../SvgWrapper';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export interface SearchButtonProps {
   setFocused: (focused: boolean) => void;

packages/theme-default/src/components/Search/SearchPanel.tsx

@@ -16,7 +16,7 @@ import { SvgWrapper } from '../SvgWrapper';
 import { Tab, Tabs } from '../Tabs';
 import { NoSearchResult } from './NoSearchResult';
 import { SuggestItem } from './SuggestItem';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { PageSearcher } from './logic/search';
 import type {
   CustomMatchResult,
@@ -459,7 +459,7 @@ export function SearchPanel({ focused, setFocused }: SearchPanelProps) {
     // accumulateIndex is used to calculate the index of the suggestion in the whole list.
     let accumulateIndex = -1;
     return (
-      <ul className={styles.suggestList}>
+      <ul>
         {Object.keys(normalizedSuggestions).map(group => {
           const groupSuggestions = normalizedSuggestions[group] || [];
           return (

packages/theme-default/src/components/Search/SuggestItem.tsx

@@ -5,7 +5,7 @@ import JumpSvg from '@theme-assets/jump';
 import TitleSvg from '@theme-assets/title';
 import { useRef } from 'react';
 import { SvgWrapper } from '../SvgWrapper';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import type { DefaultMatchResultItem, HighlightInfo } from './logic/types';
 import { getSlicedStrByByteLength, removeDomain } from './logic/util';
 
@@ -134,7 +134,7 @@ export function SuggestItem({
         target={inCurrentDocIndex ? '_self' : '_blank'}
       >
         <div className={styles.suggestItemContainer}>
-          <div className={styles.hitIcon}>
+          <div>
             <SvgWrapper icon={HitIcon} />
           </div>
           <div className={styles.contentWrapper}>

packages/theme-default/src/components/Sidebar/SidebarGroup.tsx

@@ -13,7 +13,7 @@ import { renderInlineMarkdown } from '../../logic/utils';
 import { SvgWrapper } from '../SvgWrapper';
 import { SidebarDivider } from './SidebarDivider';
 import { SidebarItem as SidebarItemComp } from './SidebarItem';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { isSidebarDivider, preloadLink } from './utils';
 
 export function SidebarGroup(props: SidebarItemProps) {

packages/theme-default/src/components/Sidebar/SidebarItem.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
 import { type SidebarItemProps, highlightTitleStyle } from '.';
 import { renderInlineMarkdown } from '../../logic/utils';
 import { SidebarGroup } from './SidebarGroup';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { preloadLink } from './utils';
 
 export function SidebarItem(props: SidebarItemProps) {

packages/theme-default/src/components/Sidebar/index.tsx

@@ -15,7 +15,7 @@ import { SidebarItem } from './SidebarItem';
 import { SidebarSectionHeader } from './SidebarSectionHeader';
 
 import { useSidebarData } from '../../logic/useSidebarData';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import {
   isSideBarCustomLink,
   isSidebarDivider,

packages/theme-default/src/components/SocialLinks/LinkContent.tsx

@@ -1,6 +1,6 @@
 import type { SocialLink } from '@rspress/shared';
 import { useState } from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 declare const process: {
   env: {

packages/theme-default/src/components/SocialLinks/index.tsx

@@ -2,7 +2,7 @@ import type { SocialLink } from '@rspress/shared';
 import { useCallback, useState } from 'react';
 import { HiddenLinks } from './HiddenLinks';
 import { ShownLinks } from './ShownLinks';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 const MORE_LENGTH = 5;
 

packages/theme-default/src/components/SourceCode/index.tsx

@@ -2,7 +2,7 @@ import Github from '@theme-assets/github';
 import Gitlab from '@theme-assets/gitlab';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import { SvgWrapper } from '../SvgWrapper';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface SourceCodeProps {
   href: string;

packages/theme-default/src/components/Steps/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export function Steps({ children }: { children: ReactNode }) {
   return (

packages/theme-default/src/components/Tabs/index.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react';
 import { TabDataContext } from '../../logic/TabDataContext';
 import { useStorageValue } from '../../logic/useStorageValue';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 type TabItem = {
   value?: string;

packages/theme-default/src/global.d.ts

@@ -5,11 +5,8 @@ declare module 'virtual-site-data' {
   export default data;
 }
 
-declare module '*.module.scss' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
+// for the first build when generating the module.scss.d.ts
+declare module '*.module.scss';
 declare module '@theme-assets/*' {
   const SvgIcon: React.FC<React.SVGProps<SVGSVGElement>> | string;
   export default SvgIcon;

packages/theme-default/src/layout/DocLayout/docComponents/code/CopyCodeButton.tsx

@@ -3,7 +3,7 @@ import IconSuccess from '@theme-assets/success';
 import copy from 'copy-to-clipboard';
 import { useRef } from 'react';
 import { SvgWrapper } from '../../../../components/SvgWrapper';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 const timeoutIdMap: Map<HTMLElement, NodeJS.Timeout> = new Map();