supports vite css.extract=false. credits: @ruofee

vitejs/vite#4345

README.md

@@ -15,7 +15,7 @@ Live Demo & Documentation: https://fritx.github.io/vue-at
 - [x] Vue3 / Vue2 / Vue1
 - [x] Vuetify / Element UI / Element Plus
 - [x] Vue-CLI migration
-- [ ] Vite migration
+- [x] Vite migration. See [example](https://github.com/we-demo/vue-at-vite-app).
 
 See also: [react-at](https://github.com/fritx/react-at)
 
@@ -47,7 +47,6 @@ npm i vue1-at  # for Vue1 (branch vue1-new)
 </template>
 
 <script>
-import 'vue-at/dist/style.css' // import style
 import At from 'vue-at' // import components
 
 export default {
@@ -91,7 +90,6 @@ With Textarea, `v-model` should be bound in `<textarea>` itself.
 </template>
 
 <script>
-import 'vue-at/dist/style.css' // import style
 // import At from 'vue-at' // for content-editable
 import AtTa from 'vue-at/dist/vue-at-textarea' // for textarea
 

build/ViteSingleCssPlugin.js

@@ -0,0 +1,44 @@
+// supports vite css.extract=false.
+// credits: @ruofee
+// https://github.com/vitejs/vite/issues/4345#issuecomment-1073734133
+// https://github.com/ruofee/vue-dynamic-form-component/blob/vite/build/ViteSingleCssPlugin.js
+
+let packageNames = []
+let viteConfig
+let IIFEcss
+
+let extMap = {
+  cjs: '.js',
+  es: '.mjs',
+  umd: '.umd.js',
+}
+
+// 将 css 打包到 js 文件中
+export default function () {
+  return {
+    apply: 'build',
+    enforce: 'post',
+    name: 'pack-css',
+    configResolved (config) {
+      viteConfig = config
+      packageNames = viteConfig.build.lib.formats.map(format => {
+        return viteConfig.build.lib.fileName + extMap[format]
+      })
+    },
+    generateBundle (_, bundle) {
+      const cssFileName = 'style.css'
+      const { [cssFileName]: cssBundle } = bundle
+      if (cssBundle) {
+        IIFEcss = `(function() {try {var elementStyle = document.createElement('style');elementStyle.textContent = ${JSON.stringify(
+          cssBundle.source
+        )};document.head.appendChild(elementStyle);} catch(error) {console.error(error, 'unable to concat style inside the bundled file')}})()`
+        delete bundle[cssFileName]
+      }
+      packageNames.forEach(packageName => {
+        if (bundle[packageName]) {
+          bundle[packageName].code += ';;' + IIFEcss + ';;'
+        }
+      })
+    }
+  }
+}

vite.config.0.js

@@ -3,12 +3,17 @@
 // import { createVuePlugin as vue } from 'vite-plugin-vue2'
 // vue3
 import vue from '@vitejs/plugin-vue'
-
-// todo: vite should support css.extract=false
-// pending https://github.com/vitejs/vite/issues/4345
+import ViteSingleCssPlugin from './build/ViteSingleCssPlugin'
 
 export default {
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    // supports vite css.extract=false.
+    // credits: @ruofee
+    // https://github.com/vitejs/vite/issues/4345#issuecomment-1073734133
+    // https://github.com/ruofee/vue-dynamic-form-component/blob/vite/build/ViteSingleCssPlugin.js
+    ViteSingleCssPlugin()
+  ],
   build: {
     emptyOutDir: false,
     rollupOptions: {