diff --git a/.eslintignore b/.eslintignore
index d22736f94..3c7853ba2 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,3 +3,4 @@ lib
 test/unit/coverage
 src/_deprecated/icons
 dist
+es
diff --git a/demo/loaders/ComponentDemoTemplate.vue b/build/loaders/ComponentDemoTemplate.vue
similarity index 100%
rename from demo/loaders/ComponentDemoTemplate.vue
rename to build/loaders/ComponentDemoTemplate.vue
diff --git a/demo/loaders/ComponentDocumentationEntryTemplate.vue b/build/loaders/ComponentDocumentationEntryTemplate.vue
similarity index 100%
rename from demo/loaders/ComponentDocumentationEntryTemplate.vue
rename to build/loaders/ComponentDocumentationEntryTemplate.vue
diff --git a/demo/loaders/convertMd2Demo.js b/build/loaders/convert-md-to-demo.js
similarity index 98%
rename from demo/loaders/convertMd2Demo.js
rename to build/loaders/convert-md-to-demo.js
index 55745d12a..911b098d7 100644
--- a/demo/loaders/convertMd2Demo.js
+++ b/build/loaders/convert-md-to-demo.js
@@ -1,7 +1,7 @@
 const marked = require('marked')
 const fs = require('fs')
 const path = require('path')
-const createRenderer = require('./mdRenderer')
+const createRenderer = require('./md-renderer')
 const mdRenderer = createRenderer()
 const codeRenderer = createRenderer(false)
 // const prettier = require('prettier')
diff --git a/demo/loaders/convertMd2Doc.js b/build/loaders/convert-md-to-doc.js
similarity index 98%
rename from demo/loaders/convertMd2Doc.js
rename to build/loaders/convert-md-to-doc.js
index 8482e976d..37d0494f1 100644
--- a/demo/loaders/convertMd2Doc.js
+++ b/build/loaders/convert-md-to-doc.js
@@ -1,7 +1,7 @@
 const marked = require('marked')
 const camelCase = require('lodash/camelCase')
-const mdLoader = require('./NaiveUIMdLoader')
-const createRenderer = require('./mdRenderer')
+const mdLoader = require('./naive-ui-md-loader')
+const createRenderer = require('./md-renderer')
 const mdRenderer = createRenderer()
 
 function template (demos, demosLiteral, isSingleColumn = false) {
diff --git a/demo/loaders/mdRenderer.js b/build/loaders/md-renderer.js
similarity index 100%
rename from demo/loaders/mdRenderer.js
rename to build/loaders/md-renderer.js
diff --git a/demo/loaders/NaiveUIDemoLoader.js b/build/loaders/naive-ui-demo-loader.js
similarity index 80%
rename from demo/loaders/NaiveUIDemoLoader.js
rename to build/loaders/naive-ui-demo-loader.js
index 4842f920c..d7923d513 100644
--- a/demo/loaders/NaiveUIDemoLoader.js
+++ b/build/loaders/naive-ui-demo-loader.js
@@ -1,4 +1,4 @@
-const convertMd2Demo = require('./convertMd2Demo')
+const convertMd2Demo = require('./convert-md-to-demo')
 const projectPath = require('./project-path')
 
 module.exports = function (content, path) {
diff --git a/demo/loaders/NaiveUIDocEntryLoader.js b/build/loaders/naive-ui-doc-entry-loader.js
similarity index 100%
rename from demo/loaders/NaiveUIDocEntryLoader.js
rename to build/loaders/naive-ui-doc-entry-loader.js
diff --git a/demo/loaders/NaiveUIDocLoader.js b/build/loaders/naive-ui-doc-loader.js
similarity index 81%
rename from demo/loaders/NaiveUIDocLoader.js
rename to build/loaders/naive-ui-doc-loader.js
index 308786bd3..087a12065 100644
--- a/demo/loaders/NaiveUIDocLoader.js
+++ b/build/loaders/naive-ui-doc-loader.js
@@ -1,4 +1,4 @@
-const convertMd2Doc = require('./convertMd2Doc')
+const convertMd2Doc = require('./convert-md-to-doc')
 const projectPath = require('./project-path')
 
 module.exports = function (content, path) {
diff --git a/demo/loaders/NaiveUIMdLoader.js b/build/loaders/naive-ui-md-loader.js
similarity index 98%
rename from demo/loaders/NaiveUIMdLoader.js
rename to build/loaders/naive-ui-md-loader.js
index ca1b09c7b..13893f134 100644
--- a/demo/loaders/NaiveUIMdLoader.js
+++ b/build/loaders/naive-ui-md-loader.js
@@ -1,5 +1,5 @@
 const marked = require('marked')
-const createRenderer = require('./mdRenderer')
+const createRenderer = require('./md-renderer')
 const renderer = createRenderer()
 const projectPath = require('./project-path')
 
diff --git a/demo/loaders/project-path.js b/build/loaders/project-path.js
similarity index 100%
rename from demo/loaders/project-path.js
rename to build/loaders/project-path.js
diff --git a/demo/loaders/test/basic.test.md b/build/loaders/test/basic.test.md
similarity index 100%
rename from demo/loaders/test/basic.test.md
rename to build/loaders/test/basic.test.md
diff --git a/demo/loaders/test/component.test.md b/build/loaders/test/component.test.md
similarity index 100%
rename from demo/loaders/test/component.test.md
rename to build/loaders/test/component.test.md
diff --git a/demo/loaders/test/test.md b/build/loaders/test/test.md
similarity index 100%
rename from demo/loaders/test/test.md
rename to build/loaders/test/test.md
diff --git a/demo/loaders/test/testDemoLoader.js b/build/loaders/test/testDemoLoader.js
similarity index 100%
rename from demo/loaders/test/testDemoLoader.js
rename to build/loaders/test/testDemoLoader.js
diff --git a/demo/loaders/test/testMdLoader.js b/build/loaders/test/testMdLoader.js
similarity index 100%
rename from demo/loaders/test/testMdLoader.js
rename to build/loaders/test/testMdLoader.js
diff --git a/build/rollup-plugin-css-render.js b/build/rollup-plugin-css-render.js
new file mode 100644
index 000000000..265c6b7ea
--- /dev/null
+++ b/build/rollup-plugin-css-render.js
@@ -0,0 +1,9 @@
+const cleanCssr = require('./utils/clean-cssr')
+
+module.exports = () => ({
+  async transform (code, id) {
+    if (id.endsWith('.cssr.js')) {
+      return cleanCssr(code)
+    }
+  }
+})
diff --git a/build/rollup-plugin-demo.js b/build/rollup-plugin-demo.js
new file mode 100644
index 000000000..9424e74e5
--- /dev/null
+++ b/build/rollup-plugin-demo.js
@@ -0,0 +1,9 @@
+const getDemoByPath = require('./utils/get-demo-by-path')
+
+module.exports = function () {
+  return {
+    async load (id) {
+      return getDemoByPath(id)
+    }
+  }
+}
diff --git a/build/utils/clean-cssr.js b/build/utils/clean-cssr.js
new file mode 100644
index 000000000..6609a5856
--- /dev/null
+++ b/build/utils/clean-cssr.js
@@ -0,0 +1,3 @@
+module.exports = function cleanCssr (code) {
+  return code.replace(/\n\s+/g, '\n')
+}
diff --git a/build/utils/get-demo-by-path.js b/build/utils/get-demo-by-path.js
new file mode 100644
index 000000000..9c7357f8a
--- /dev/null
+++ b/build/utils/get-demo-by-path.js
@@ -0,0 +1,21 @@
+const fs = require('fs').promises
+
+const demoLoader = require('../loaders/naive-ui-demo-loader')
+const docEntryLoader = require('../loaders/naive-ui-doc-entry-loader')
+const docLoader = require('../loaders/naive-ui-doc-loader')
+const mdLoader = require('../loaders/naive-ui-md-loader')
+
+module.exports = async function getDemoByPath (path) {
+  if (path.endsWith('.demo.md')) {
+    const code = await fs.readFile(path, 'utf-8')
+    return demoLoader(code, path)
+  } else if (path.endsWith('.entry')) {
+    return docEntryLoader(path)
+  } else if (path.endsWith('.demo-entry.md')) {
+    const code = await fs.readFile(path, 'utf-8')
+    return docLoader(code, path)
+  } else if (path.endsWith('.md')) {
+    const code = await fs.readFile(path, 'utf-8')
+    return mdLoader(code, path)
+  }
+}
diff --git a/build/vite-plugin-css-render.js b/build/vite-plugin-css-render.js
new file mode 100644
index 000000000..4afbc6863
--- /dev/null
+++ b/build/vite-plugin-css-render.js
@@ -0,0 +1,17 @@
+const cleanCssr = require('./utils/clean-cssr')
+
+module.exports = () => {
+  return {
+    configureServer: [
+      async ({ app }) => {
+        app.use(async (ctx, next) => {
+          await next()
+          // if not ctx.body, it should be a http 304
+          if (ctx.path.endsWith('.cssr.js') && ctx.body) {
+            ctx.body = cleanCssr(ctx.body.toString())
+          }
+        })
+      }
+    ]
+  }
+}
diff --git a/build/vite-plugin-demo.js b/build/vite-plugin-demo.js
new file mode 100644
index 000000000..bbe13beca
--- /dev/null
+++ b/build/vite-plugin-demo.js
@@ -0,0 +1,32 @@
+const getDemoByPath = require('./utils/get-demo-by-path')
+
+module.exports = function () {
+  const configureServer = [
+    async ({ app, resolver, watcher }) => {
+      // check and send hmr message
+      watcher.on('change', async (file) => {
+        if (file.endsWith('.md')) {
+          const content = await getDemoByPath(file)
+          watcher.handleVueReload(file, Date.now(), content)
+        }
+      })
+      app.use(async (ctx, next) => {
+        if (/\/@modules\/naive-ui\/?/.test(ctx.path)) {
+          ctx.path = ctx.path.replace(/\/@modules\/naive-ui\/?/, '/@naive-ui/index.js')
+        }
+        if (/\.md$/.test(ctx.path) || /\.entry$/.test(ctx.path)) {
+          const publicPath = ctx.path
+          const filePath = resolver.requestToFile(publicPath)
+          const content = await getDemoByPath(filePath)
+          // make it Treat as vue
+          ctx.vue = true
+          ctx.body = content
+        }
+        await next()
+      })
+    }
+  ]
+  return {
+    configureServer
+  }
+}
diff --git a/demo/vite-plugins/mdPlugin.js b/demo/vite-plugins/mdPlugin.js
deleted file mode 100644
index 194a4cab9..000000000
--- a/demo/vite-plugins/mdPlugin.js
+++ /dev/null
@@ -1,74 +0,0 @@
-const { readFileSync } = require('fs')
-
-const NaiveUIDemoLoader = require('../loaders/NaiveUIDemoLoader')
-const NaiveUIDocEntryLoader = require('../loaders/NaiveUIDocEntryLoader')
-const NaiveUIDocLoader = require('../loaders/NaiveUIDocLoader')
-const NaiveUIMdLoader = require('../loaders/NaiveUIMdLoader')
-
-module.exports = {
-  viteMdPlugin: function () {
-    const configureServer = [
-      async ({ app, resolver, watcher }) => {
-      // check and send hmr message
-        watcher.on('change', (file) => {
-          if (file.endsWith('.md')) {
-            const content = mdTransform2VueTemplateHandlers(file)
-            watcher.handleVueReload(file, Date.now(), content)
-          }
-        })
-        app.use(async (ctx, next) => {
-          if (/\/@modules\/naive-ui\/?/.test(ctx.path)) {
-            ctx.path = ctx.path.replace(/\/@modules\/naive-ui\/?/, '/@naive-ui/index.js')
-          }
-          if (/.md$/.test(ctx.path) || ctx.path.endsWith('.entry')) {
-            const publicPath = ctx.path
-            const filePath = resolver.requestToFile(publicPath)
-            const content = mdTransform2VueTemplateHandlers(filePath)
-            // make it Treat as vue
-            ctx.vue = true
-            ctx.body = content
-            await next()
-          } else {
-            await next()
-          }
-        })
-      }
-    ]
-    return {
-      configureServer
-    }
-  },
-  rollupMdPlugin: function () {
-    return {
-      async load (id) {
-        if (id.endsWith('.demo.md')) {
-          const code = readFileSync(id).toString()
-          return NaiveUIDemoLoader(code, id)
-        } else if (id.endsWith('.entry')) {
-          return NaiveUIDocEntryLoader(id)
-        } else if (id.endsWith('.demo-entry.md')) {
-          const code = readFileSync(id).toString()
-          return NaiveUIDocLoader(code, id)
-        } else if (id.endsWith('.md')) {
-          const code = readFileSync(id).toString()
-          return NaiveUIMdLoader(code, id)
-        }
-      }
-    }
-  }
-}
-
-function mdTransform2VueTemplateHandlers (path) {
-  let content = null
-  const mdContent = readFileSync(path, 'utf-8')
-  if (/\.demo\.md$/.test(path)) {
-    content = NaiveUIDemoLoader(mdContent, path)
-  } else if (path.endsWith('.entry')) {
-    content = NaiveUIDocEntryLoader(path)
-  } else if (/\.demo-entry\.md$/.test(path)) {
-    content = NaiveUIDocLoader(mdContent, path)
-  } else {
-    content = NaiveUIMdLoader(mdContent, path)
-  }
-  return content
-}
diff --git a/package.json b/package.json
index ea2e27e86..5802a2793 100644
--- a/package.json
+++ b/package.json
@@ -83,13 +83,14 @@
     "@vicons/fluent": "^0.0.1",
     "@vicons/ionicons-v4": "^0.0.1",
     "@vicons/ionicons-v5": "^0.0.1",
-    "async-validator": "^1.11.5",
+    "async-validator": "^3.4.0",
     "css-render": "^0.11.1",
     "date-fns": "^2.9.0",
     "evtd": "^0.0.1-alpha.1",
     "highlight.js": "^9.18.1",
     "lodash-es": "^4.17.15",
     "treemate": "^0.1.9",
+    "vfonts": "^0.0.1",
     "vooks": "^0.0.1",
     "vue": "^3.0.2",
     "vueuc": "0.1.0-alpha.9"
diff --git a/rollup.config.js b/rollup.config.js
index 0317138b5..c27b7f1db 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,4 +1,5 @@
 const vuePlugin = require('rollup-plugin-vue')
+const cssRenderPlugin = require('./build/rollup-plugin-css-render')
 const { nodeResolve } = require('@rollup/plugin-node-resolve')
 const { terser } = require('rollup-plugin-terser')
 const replace = require('@rollup/plugin-replace')
@@ -29,6 +30,7 @@ module.exports = {
     nodeResolve({
       extensions: ['.js', '.json', '.vue']
     }),
+    cssRenderPlugin(),
     vuePlugin(),
     terser({
       mangle: false,
diff --git a/vite.config.js b/vite.config.js
index 4ecf34214..ae50b5954 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,12 +1,15 @@
 const path = require('path')
 const alias = require('@rollup/plugin-alias')
-
-const { viteMdPlugin, rollupMdPlugin } = require('./demo/vite-plugins/mdPlugin')
+const rollupCssRenderPlugin = require('./build/rollup-plugin-css-render')
+const rollupDemoPlugin = require('./build/rollup-plugin-demo')
+const viteCssRenderPlugin = require('./build/vite-plugin-css-render')
+const viteDemoPlugin = require('./build/vite-plugin-demo')
 
 module.exports = {
   root: __dirname,
   plugins: [
-    viteMdPlugin()
+    viteDemoPlugin(),
+    viteCssRenderPlugin()
   ],
   outDir: 'site',
   optimizeDeps: {
@@ -39,7 +42,8 @@ module.exports = {
           }
         ]
       }),
-      rollupMdPlugin()
+      rollupDemoPlugin(),
+      rollupCssRenderPlugin()
     ]
   },
   indexHtmlTransforms: [
@@ -47,7 +51,6 @@ module.exports = {
       apply: 'pre',
       transform ({ code }) {
         const isTusimple = !!process.env.TUSIMPLE
-        console.log('/demo/index.' + isTusimple ? 'ts-dev.js' : 'dev.js')
         switch (process.env.NODE_ENV) {
           case 'production':
             return code.replace(
diff --git a/vue3.md b/vue3.md
index c0228ed43..f516b9661 100644
--- a/vue3.md
+++ b/vue3.md
@@ -323,7 +323,7 @@
   - [x] use-global-style ? 感觉效果不会特别好而且还是很无谓的性能开销
     这个问题可以之后再思考，现阶段 vue 的写法还是全局 install
   - [x] dynamic-input, no value
-  - [ ] button, input 的变量名需要修改一下
+  - [ ] button, input 的 css 变量名需要修改一下
   - [x] test rollup treeshaking
   - [x] test webpack treeshaking