fix: style missing with loading (#14)

* fix: style missing with loading

* chore: code clean

* fix: filter empty styles

Author: MadCcc

example/with-app-router/app/loading.tsx

@@ -0,0 +1,4 @@
+export default function Loading() {
+  // You can add any UI inside Loading, including a Skeleton.
+  return <div>Loading...</div>;
+}

example/with-app-router/app/page.tsx

@@ -17,49 +17,65 @@ type FieldType = {
   remember?: string;
 };
 
-const Page: React.FC = () => (
-  <ConfigProvider theme={{ cssVar: true }}>
-    <Form
-      name="basic"
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
-      style={{ maxWidth: 600 }}
-      initialValues={{ remember: true }}
-      onFinish={onFinish}
-      onFinishFailed={onFinishFailed}
-      autoComplete="off"
-    >
-      <Form.Item<FieldType>
-        label="Username"
-        name="username"
-        rules={[{ required: true, message: 'Please input your username!' }]}
-      >
-        <Input />
-      </Form.Item>
+let promise;
+function genPromise() {
+  if (promise) return promise;
+  promise = new Promise((resolve) => {
+    setTimeout(() => {
+      promise = null;
+      resolve({});
+    }, 3 * 1000);
+  });
+  return promise;
+}
 
-      <Form.Item<FieldType>
-        label="Password"
-        name="password"
-        rules={[{ required: true, message: 'Please input your password!' }]}
-      >
-        <Input.Password />
-      </Form.Item>
+const Page: React.FC = () => {
+  React.use(genPromise());
 
-      <Form.Item<FieldType>
-        name="remember"
-        valuePropName="checked"
-        wrapperCol={{ offset: 8, span: 16 }}
+  return (
+    <ConfigProvider theme={{ cssVar: true }}>
+      <Form
+        name="basic"
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+        style={{ maxWidth: 600 }}
+        initialValues={{ remember: true }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
       >
-        <Checkbox>Remember me</Checkbox>
-      </Form.Item>
+        <Form.Item<FieldType>
+          label="Username"
+          name="username"
+          rules={[{ required: true, message: 'Please input your username!' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item<FieldType>
+          label="Password"
+          name="password"
+          rules={[{ required: true, message: 'Please input your password!' }]}
+        >
+          <Input.Password />
+        </Form.Item>
 
-      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  </ConfigProvider>
-);
+        <Form.Item<FieldType>
+          name="remember"
+          valuePropName="checked"
+          wrapperCol={{ offset: 8, span: 16 }}
+        >
+          <Checkbox>Remember me</Checkbox>
+        </Form.Item>
+
+        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form.Item>
+      </Form>
+    </ConfigProvider>
+  );
+};
 
 export default Page;

example/with-app-router/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -33,7 +33,7 @@
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\""
   },
   "devDependencies": {
-    "@ant-design/cssinjs": "^1.18.2",
+    "@ant-design/cssinjs": "^1.24.0",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@umijs/fabric": "^2.0.8",
@@ -50,7 +50,7 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@ant-design/cssinjs": "^1.18.2",
+    "@ant-design/cssinjs": "^1.24.0",
     "antd": "^5.0.0",
     "next": "^14.0.0 || ^15.0.0",
     "react": ">=16.0.0",

src/AntdRegistry.tsx

@@ -1,23 +1,21 @@
 'use client';
 
-import React, { type FC, useRef, useState } from 'react';
-import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import React, { type FC, useState } from 'react';
 import type { StyleProviderProps } from '@ant-design/cssinjs';
+import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
 import { useServerInsertedHTML } from 'next/navigation';
 
 type AntdRegistryProps = Omit<StyleProviderProps, 'cache'>;
 
 const AntdRegistry: FC<AntdRegistryProps> = (props) => {
   const [cache] = useState(() => createCache());
-  const inserted = useRef(false);
 
   useServerInsertedHTML(() => {
-    const styleText = extractStyle(cache, { plain: true });
+    const styleText = extractStyle(cache, { plain: true, once: true });
 
-    if (inserted.current) {
+    if (styleText.includes('.data-ant-cssinjs-cache-path{content:"";}')) {
       return null;
     }
-    inserted.current = true;
 
     return (
       <style