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

.github/labeler.yml

@@ -53,7 +53,7 @@ rust:
 
 package:y-indexeddb: 'packages/y-indexeddb/**/*'
 
-app:web: 'apps/web/**/*'
+app:core: 'apps/core/**/*'
 
 app:electron: 'apps/electron/**/*'
 

apps/README.md

@@ -20,6 +20,6 @@ Server using [Nest.js](https://nestjs.com/).
 
 Storybook using [Storybook](https://storybook.js.org/).
 
-## web
+## Core
 
 AFFiNE Core Application using [React.js](https://reactjs.org/).

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={

tests/affine-local/e2e/router.spec.ts

@@ -16,6 +16,8 @@ test('goto not found workspace', async ({ page }) => {
   await openHomePage(page);
   await waitEditorLoad(page);
   const currentUrl = page.url();
+  // if doesn't wait for timeout, data won't be saved into indexedDB
+  await page.waitForTimeout(1000);
   await page.goto(new URL('/workspace/invalid/all', webUrl).toString());
   await waitEditorLoad(page);
   expect(page.url()).toEqual(currentUrl);

yarn.lock

@@ -241,6 +241,7 @@ __metadata:
     react-resizable-panels: ^0.0.53
     react-router-dom: ^6.14.1
     rxjs: ^7.8.1
+    style-loader: ^3.3.3
     swc-loader: ^0.2.3
     swc-plugin-coverage-instrument: ^0.0.19
     swr: ^2.1.5
@@ -30171,6 +30172,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-loader@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "style-loader@npm:3.3.3"
+  peerDependencies:
+    webpack: ^5.0.0
+  checksum: f59c953f56f6a935bd6a1dfa409f1128fed2b66b48ce4a7a75b85862a7156e5e90ab163878962762f528ec4d510903d828da645e143fbffd26f055dc1c094078
+  languageName: node
+  linkType: hard
+
 "stylehacks@npm:^6.0.0":
   version: 6.0.0
   resolution: "stylehacks@npm:6.0.0"