From 7439e98c17c2e7397aa5ecfdde806d750fad45e2 Mon Sep 17 00:00:00 2001
From: markthree <1801982702@qq.com>
Date: Wed, 10 Jan 2024 13:05:33 +0800
Subject: [PATCH 1/2] feat: add extractStyle

---
 README.md                                |  24 +++-
 playground/app.vue                       | 144 ++++++++++++-----------
 src/config.ts                            |   3 +-
 src/module.ts                            |  26 +++-
 src/runtime/components/AExtractStyle.vue |  21 ++++
 src/types.ts                             |   1 +
 6 files changed, 143 insertions(+), 76 deletions(-)
 create mode 100644 src/runtime/components/AExtractStyle.vue

diff --git a/README.md b/README.md
index 8c4f5ab..c7763c7 100644
--- a/README.md
+++ b/README.md
@@ -69,9 +69,11 @@ const handleMessage = () => {
 }
 </script>
 <template>
-  <a-button @click="handleMessage">
-    button
-  </a-button>
+  <a-extract-style>
+     <a-button @click="handleMessage">
+      button
+    </a-button>
+  </a-extract-style>
 </template>
 ```
 Reference [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/components) and [playground](./playground/app.vue) use.
@@ -99,6 +101,22 @@ If you wish to add automatically import content from Ant Design Vue, you can add
 If there are components that are not imported automatically from @ant-design/icons-vue, you need to add the component name here.
 
 
+### extractStyle
+
+* Type: `boolean`
+
+Extract css on demand, start by default
+
+```vue
+<!-- If launched, we can wrap the component or page in the app.vue outermost layer -->
+<template>
+  <a-extract-style>
+    <!-- Your page or component -->
+  </a-extract-style>
+</template>
+```
+
+
 ## Development
 
 ```bash
diff --git a/playground/app.vue b/playground/app.vue
index cff7394..4cf6286 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,81 +1,83 @@
 <template>
-  <a-config-provider :theme="theme">
-    <div class="container">
-      <div>
+  <a-extract-style>
+    <a-config-provider :theme="theme">
+      <div class="container">
+        <div>
+          <a-space>
+            <a-button @click="changeTheme('dark')">
+              dark
+            </a-button>
+            <a-button @click="changeTheme('light')">
+              light
+            </a-button>
+          </a-space>
+        </div>
+        <a-alert
+          message="Success Text"
+          type="success"
+        />
+        <div>
+          icon:
+          <AlertFilled />
+          <LoadingOutlined />
+        </div>
+        <a-table v-bind="tableProps" />
         <a-space>
-          <a-button @click="changeTheme('dark')">
-            dark
+          <a-button
+            type="primary"
+            @click="handleMessage('success')"
+          >
+            message success 
           </a-button>
-          <a-button @click="changeTheme('light')">
-            light
+          <a-button @click="handleMessage('info')">
+            message info
           </a-button>
         </a-space>
-      </div>
-      <a-alert
-        message="Success Text"
-        type="success"
-      />
-      <div>
-        icon:
-        <AlertFilled />
-        <LoadingOutlined />
-      </div>
-      <a-table v-bind="tableProps" />
-      <a-space>
-        <a-button
-          type="primary"
-          @click="handleMessage('success')"
-        >
-          message success 
-        </a-button>
-        <a-button @click="handleMessage('info')">
-          message info
-        </a-button>
-      </a-space>
-      <a-space>
-        <a-button
-          type="primary"
-          @click="handleModal('success')"
-        >
-          modal success
-        </a-button>
-        <a-button @click="handleModal('info')">
-          modal info
-        </a-button>
-      </a-space>
-      <a-space>
-        <a-button
-          type="primary"
-          @click="handleNotification('success')"
+        <a-space>
+          <a-button
+            type="primary"
+            @click="handleModal('success')"
+          >
+            modal success
+          </a-button>
+          <a-button @click="handleModal('info')">
+            modal info
+          </a-button>
+        </a-space>
+        <a-space>
+          <a-button
+            type="primary"
+            @click="handleNotification('success')"
+          >
+            notification success
+          </a-button>
+          <a-button @click="handleNotification('info')">
+            notification info
+          </a-button>
+        </a-space>
+        <a-flex
+          gap="middle"
+          vertical
         >
-          notification success
-        </a-button>
-        <a-button @click="handleNotification('info')">
-          notification info
-        </a-button>
-      </a-space>
-      <a-flex
-        gap="middle"
-        vertical
-      >
-        <a-radio-group v-model:value="value">
-          <a-radio value="horizontal">
-            horizontal
-          </a-radio>
-          <a-radio value="vertical">
-            vertical
-          </a-radio>
-        </a-radio-group>
-        <a-flex :vertical="value === 'vertical'">
-          <div
-            v-for="(item, index) in new Array(4)"
-            :key="item"
-            :style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"
-          />
+          <a-radio-group v-model:value="value">
+            <a-radio value="horizontal">
+              horizontal
+            </a-radio>
+            <a-radio value="vertical">
+              vertical
+            </a-radio>
+          </a-radio-group>
+          <a-flex :vertical="value === 'vertical'">
+            <div
+              v-for="(item, index) in new Array(4)"
+              :key="item"
+              :style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"
+            />
+          </a-flex>
         </a-flex>
-      </a-flex>
-    </div>
-  </a-config-provider>
+      </div>
+    </a-config-provider>
+  </a-extract-style>
 </template>
 
 <script setup lang="ts">
diff --git a/src/config.ts b/src/config.ts
index 538bba4..cea1686 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -14,5 +14,6 @@ export { allComponents } from "./antdv"
 export const defaults:Options = {
   components: allComponents,
   icons: allIcons,
-  imports: allImports
+  imports: allImports,
+  extractStyle: true
 }
diff --git a/src/module.ts b/src/module.ts
index 89af202..80865a8 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,4 +1,4 @@
-import { defineNuxtModule } from '@nuxt/kit'
+import { addComponent, createResolver, defineNuxtModule, useNuxt } from '@nuxt/kit'
 import { libraryName,defaults } from "./config"
 import { resolveComponents,resolveImports } from "./core"
 import type { Options } from './types'
@@ -18,9 +18,33 @@ export default defineNuxtModule<Partial<Options>>({
     nuxt.options.imports.autoImport !== false && resolveImports(options)
     nuxt.options.components !== false && resolveComponents(options)
 
+    if (options.extractStyle) {
+      extractStyle()
+    }
 
     // const resolver = createResolver(import.meta.url)
     // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
     // addPlugin(resolver.resolve('./runtime/plugin'))
   }
 })
+
+function extractStyle() {
+  const nuxt = useNuxt()
+  // The spa does not need to be injected with css.
+  if (!nuxt.options.ssr) {
+    return;
+  }
+  // When generating, replace process.env.NODE_ENV to production (defaults to prerender).
+  // And antd relies on process.env.NODE_ENV when generating css prefixes.
+  if (nuxt.options.dev === false && nuxt.options.nitro.static) {
+    nuxt.options.nitro.replace ??= {};
+    nuxt.options.nitro.replace["process.env.NODE_ENV"] = "'production'";
+  }
+
+  // Adding auxiliary components
+  const resolver = createResolver(import.meta.url)
+  addComponent({
+    name: 'AExtractStyle',
+    filePath: resolver.resolve('./runtime/components/AExtractStyle.vue')
+  })
+}
\ No newline at end of file
diff --git a/src/runtime/components/AExtractStyle.vue b/src/runtime/components/AExtractStyle.vue
new file mode 100644
index 0000000..0ddf65a
--- /dev/null
+++ b/src/runtime/components/AExtractStyle.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { createCache, extractStyle, StyleProvider } from "ant-design-vue"
+
+const cache = createCache()
+
+const app = useNuxtApp()
+
+// Real-time style extraction at ssr
+// Pre-rendered extraction styles for ssg
+app.hook('app:rendered', () => {
+  useHead({
+    style: [extractStyle(cache, true)]
+  })
+})
+</script>
+
+<template>
+  <StyleProvider :cache="cache">
+    <slot />
+  </StyleProvider>
+</template>
diff --git a/src/types.ts b/src/types.ts
index a6eea6c..a6f3d54 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -5,6 +5,7 @@ export interface Options {
   icons: false | PresetImport[]
   components: false | PresetImport[]
   imports: PresetImport[]
+  extractStyle: boolean
 }
 
 

From 48db824c47d77b27f0173a42e9f010f145697d2c Mon Sep 17 00:00:00 2001
From: markthree <1801982702@qq.com>
Date: Wed, 10 Jan 2024 14:09:52 +0800
Subject: [PATCH 2/2] fix!(extractStyle): close by default

---
 README.md                 | 14 +++++++-------
 playground/nuxt.config.ts |  4 +++-
 src/config.ts             |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index c7763c7..6a37e88 100644
--- a/README.md
+++ b/README.md
@@ -69,11 +69,9 @@ const handleMessage = () => {
 }
 </script>
 <template>
-  <a-extract-style>
-     <a-button @click="handleMessage">
-      button
-    </a-button>
-  </a-extract-style>
+  <a-button @click="handleMessage">
+    button
+  </a-button>
 </template>
 ```
 Reference [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/components) and [playground](./playground/app.vue) use.
@@ -105,10 +103,12 @@ If there are components that are not imported automatically from @ant-design/ico
 
 * Type: `boolean`
 
-Extract css on demand, start by default
+> Solve page css flicker problem
+
+Extracts and injects css on demand, defaults to false
 
 ```vue
-<!-- If launched, we can wrap the component or page in the app.vue outermost layer -->
+<!-- If the extractStyle option is enabled, we can use a-extract-style on the outermost level of the template in app.vue -->
 <template>
   <a-extract-style>
     <!-- Your page or component -->
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 35f738f..f933af1 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,6 +1,8 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
-  antd: {},
+  antd: {
+    extractStyle: true
+  },
   imports:{
     autoImport:true
   },
diff --git a/src/config.ts b/src/config.ts
index cea1686..1b13b34 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -15,5 +15,5 @@ export const defaults:Options = {
   components: allComponents,
   icons: allIcons,
   imports: allImports,
-  extractStyle: true
+  extractStyle: false
 }