fix(core): css.ts hmr (#3317)

apps/core/.webpack/config.ts

@@ -209,7 +209,9 @@ export const createConfiguration: (
             {
               test: /\.css$/,
               use: [
-                MiniCssExtractPlugin.loader,
+                buildFlags.mode === 'development'
+                  ? 'style-loader'
+                  : MiniCssExtractPlugin.loader,
                 {
                   loader: 'css-loader',
                   options: {
@@ -243,7 +245,12 @@ export const createConfiguration: (
       ...(IN_CI ? [] : [new webpack.ProgressPlugin({ percentBy: 'entries' })]),
       ...(buildFlags.mode === 'development'
         ? [new ReactRefreshWebpackPlugin({ overlay: false, esModule: true })]
-        : []),
+        : [
+            new MiniCssExtractPlugin({
+              filename: `[name].[contenthash:8].css`,
+              ignoreOrder: true,
+            }),
+          ]),
       new HTMLPlugin({
         template: join(rootPath, '.webpack', 'template.html'),
         inject: 'body',
@@ -252,10 +259,6 @@ export const createConfiguration: (
         chunks: ['index', 'plugin'],
         filename: 'index.html',
       }),
-      new MiniCssExtractPlugin({
-        filename: `[name].[chunkhash:8].css`,
-        ignoreOrder: true,
-      }),
       new VanillaExtractPlugin(),
       new webpack.DefinePlugin({
         'process.env': JSON.stringify({}),
@@ -291,6 +294,36 @@ export const createConfiguration: (
     );
   }
 
+  if (buildFlags.mode === 'development') {
+    config.optimization = {
+      ...config.optimization,
+      minimize: false,
+      runtimeChunk: false,
+      splitChunks: {
+        maxInitialRequests: Infinity,
+        chunks: 'all',
+        cacheGroups: {
+          defaultVendors: {
+            test: `[\\/]node_modules[\\/](?!.*vanilla-extract)`,
+            priority: -10,
+            reuseExistingChunk: true,
+          },
+          default: {
+            minChunks: 2,
+            priority: -20,
+            reuseExistingChunk: true,
+          },
+          styles: {
+            name: 'styles',
+            type: 'css/mini-extract',
+            chunks: 'all',
+            enforce: true,
+          },
+        },
+      },
+    };
+  }
+
   if (
     process.env.SENTRY_AUTH_TOKEN &&
     process.env.SENTRY_ORG &&

apps/core/package.json

@@ -70,6 +70,7 @@
     "express": "^4.18.2",
     "html-webpack-plugin": "^5.5.3",
     "raw-loader": "^4.0.2",
+    "style-loader": "^3.3.3",
     "swc-loader": "^0.2.3",
     "swc-plugin-coverage-instrument": "^0.0.19",
     "thread-loader": "^4.0.2",

apps/core/src/components/page-detail-editor.tsx

@@ -24,7 +24,7 @@ import { pageSettingFamily } from '../atoms';
 import { contentLayoutAtom } from '../atoms/layout';
 import { fontStyleOptions, useAppSetting } from '../atoms/settings';
 import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
-import { editor } from './page-detail-editor.css';
+import * as styles from './page-detail-editor.css';
 import { pluginContainer } from './page-detail-editor.css';
 
 export type PageDetailEditorProps = {
@@ -72,7 +72,7 @@ const EditorWrapper = memo(function EditorWrapper({
 
   return (
     <Editor
-      className={clsx(editor, {
+      className={clsx(styles.editor, {
         'full-screen': appSettings.fullWidthLayout,
       })}
       style={