fix: Make sure webpack is running properly (#68)

* chore: temp commit

* fix: Make sure webpack is running properly

Author: baiwusanyu-c

package.json

@@ -50,6 +50,7 @@
     "dev": "pnpm run --filter @unplugin-vue-ce/build dev",
     "dev:v-model": "pnpm run --filter @unplugin-vue-ce/play-v-model dev",
     "dev:sub-style": "pnpm run --filter @unplugin-vue-ce/play-sub-style dev",
+    "dev:sub-style-webpack": "pnpm run --filter @unplugin-vue-ce/play-sub-style-webpack serve",
     "dev:ce-app": "pnpm run --filter @unplugin-vue-ce/play-ce-app dev",
     "build": "pnpm run --filter @unplugin-vue-ce/build build",
     "release": "bumpp package.json packages/*/package.json utils/package.json --commit --push --tag",

packages/core/index.ts

@@ -1,12 +1,11 @@
 import { unVueCEVModel } from '@unplugin-vue-ce/v-model'
 import { unVueCESubStyle } from '@unplugin-vue-ce/sub-style'
-import { unVueCEShadow } from '@unplugin-vue-ce/switch-shadow'
 import { createUnplugin } from 'unplugin'
 const unplugin = createUnplugin(() => {
   return [
     unVueCEVModel(),
-    unVueCESubStyle(),
-    unVueCEShadow(),
+    ...unVueCESubStyle(),
+    // unVueCEShadow(),
   ]
 })
 export const viteVueCE = unplugin.vite

packages/sub-style/README.md

@@ -117,7 +117,7 @@ so you need to add the root component of each web component to add the reference
     @tailwind utilities;
 </style>
 ```
-or
+or (only vite)
 ```html
 <!-- xxx.vue -->
 <script>
@@ -137,7 +137,7 @@ you need to add the root component of each web component to add the reference st
     @unocss;
 </style>
 ```
-or
+or (only vite)
 ```html
 <!-- xxx.vue -->
 <script>
@@ -147,4 +147,4 @@ or
 
 ## About Windi CSS
 Windi css is not supported
-[Windi CSS is Sunsetting](https://windicss.org/posts/sunsetting.html)
+[Windi CSS is Sunsetting](https://windicss.org/posts/sunsetting.html)

packages/sub-style/index.ts

@@ -1,70 +1,73 @@
 import { createUnplugin } from 'unplugin'
-import { setGlobalPrefix } from 'baiwusanyu-utils'
+import { normalizePath, setGlobalPrefix } from 'baiwusanyu-utils'
 import MagicString from 'magic-string'
 import { NAME } from '@unplugin-vue-ce/utils'
 import { injectVueRuntime } from './src/inject/inject-vue-runtime'
 import { atomicCSSPreset, virtualTailwind, virtualUno } from './src/atomic-css'
 
 export const unVueCESubStyle = (): any => {
   setGlobalPrefix(`[${NAME}]:`)
+  // just vite
   return [
     {
       name: `${NAME}:sub-style:pre`,
       enforce: 'pre',
-      resolveId(id: string) {
-        if (atomicCSSPreset[id as keyof typeof atomicCSSPreset])
-          return `\0${id}`
+      transformInclude(id: string) {
+        return !id.endsWith('.html')
       },
-      load(id: string) {
-        if (id === `\0${virtualTailwind}` || id === `\0${virtualUno}`) {
-          return {
-            code: '',
+      vite: {
+        resolveId(id: string) {
+          if (atomicCSSPreset[id as keyof typeof atomicCSSPreset])
+            return `\0${id}`
+        },
+        load(id: string) {
+          if (id === `\0${virtualTailwind}` || id === `\0${virtualUno}`) {
+            return {
+              code: '',
+            }
           }
-        }
-      },
-      transformInclude() {
-        return true
-      },
-      async transform(code: string, id: string) {
-        const mgcStr = new MagicString(code)
-        if (id.endsWith('.vue') && code.includes(virtualTailwind))
-          mgcStr.prependRight(mgcStr.length(), atomicCSSPreset[virtualTailwind])
+        },
+        transform(code: string, id: string) {
+          const mgcStr = new MagicString(code)
+          if (id.endsWith('.vue') && code.includes(virtualTailwind))
+            mgcStr.prependRight(mgcStr.length(), atomicCSSPreset[virtualTailwind])
 
-        if (id.endsWith('.vue') && code.includes(virtualUno))
-          mgcStr.prependRight(mgcStr.length(), atomicCSSPreset[virtualUno])
+          if (id.endsWith('.vue') && code.includes(virtualUno))
+            mgcStr.prependRight(mgcStr.length(), atomicCSSPreset[virtualUno])
 
-        return {
-          code: mgcStr.toString(),
-          get map() {
-            return mgcStr.generateMap({
-              source: id,
-              includeContent: true,
-              hires: true,
-            })
-          },
-        }
+          return {
+            code: mgcStr.toString(),
+            get map() {
+              return mgcStr.generateMap({
+                source: id,
+                includeContent: true,
+                hires: true,
+              })
+            },
+          }
+        },
       },
     },
     {
       name: `${NAME}:sub-style:post`,
       enforce: 'post',
-      transformInclude() {
-        return true
+      transformInclude(id: string) {
+        return !id.endsWith('.html')
       },
       async transform(code: string, id: string) {
+        const formatId = normalizePath(id)
         const mgcStr = new MagicString(code)
-
-        // build only
-        if (id.includes('@vue/runtime-dom/dist/runtime-dom.esm-bundler.js'))
+        // build only / webpack dev
+        if (formatId.includes('@vue/runtime-dom/dist/runtime-dom.esm-bundler.js'))
           injectVueRuntime(mgcStr)
 
-        // build only
-        if (id.includes('@vue/runtime-core/dist/runtime-core.esm-bundler.js'))
+        // build only / webpack dev
+        if (formatId.includes('@vue/runtime-core/dist/runtime-core.esm-bundler.js'))
           injectVueRuntime(mgcStr)
 
-        // dev only
-        if (id.includes('.vite/deps/vue.js')
-        || (id.includes('.vite/deps/chunk') && code.includes('__isVue')))
+        // vite dev only
+        if (formatId.includes('.vite/deps/vue.js')
+        || (formatId.includes('.vite/deps/chunk') && code.includes('__isVue')))
           injectVueRuntime(mgcStr)
 
         return {

packages/switch-shadow/index.ts

@@ -1,5 +1,5 @@
 import { createUnplugin } from 'unplugin'
-import { setGlobalPrefix } from 'baiwusanyu-utils'
+import { normalizePath, setGlobalPrefix } from 'baiwusanyu-utils'
 import MagicString from 'magic-string'
 import { NAME } from '@unplugin-vue-ce/utils'
 
@@ -8,28 +8,29 @@ export const unVueCEShadow = (): any => {
   return {
     name: `${NAME}:switch-shadow`,
     enforce: 'post',
-    transformInclude() {
-      return true
+    transformInclude(id: string) {
+      return !id.endsWith('.html')
     },
     async transform(code: string, id: string) {
+      const formatId = normalizePath(id)
       const mgcStr = new MagicString(code)
 
-      // build only
-      if (id.includes('@vue/runtime-dom/dist/runtime-dom.esm-bundler.js'))
-        console.log(id)
+      // build only / webpack dev
+      if (formatId.includes('@vue/runtime-dom/dist/runtime-dom.esm-bundler.js'))
+        console.log(formatId)
 
       // injectVueRuntime(mgcStr)
 
-      // build only
-      if (id.includes('@vue/runtime-core/dist/runtime-core.esm-bundler.js'))
-        console.log(id)
+      // build only / webpack dev
+      if (formatId.includes('@vue/runtime-core/dist/runtime-core.esm-bundler.js'))
+        console.log(formatId)
 
       // injectVueRuntime(mgcStr)
 
-      // dev only
-      if (id.includes('.vite/deps/vue.js')
-        || (id.includes('.vite/deps/chunk') && code.includes('__isVue')))
-        console.log(id)
+      // vite dev only
+      if (formatId.includes('.vite/deps/vue.js')
+        || (formatId.includes('.vite/deps/chunk') && code.includes('__isVue')))
+        console.log(formatId)
 
       //  injectVueRuntime(mgcStr)
       return {

packages/v-model/index.ts

@@ -1,5 +1,5 @@
 import { createUnplugin } from 'unplugin'
-import { setGlobalPrefix } from 'baiwusanyu-utils'
+import { normalizePath, setGlobalPrefix } from 'baiwusanyu-utils'
 import MagicString from 'magic-string'
 import { NAME } from '@unplugin-vue-ce/utils'
 import { injectVueRuntime } from './src/inject-vue-runtime'
@@ -11,28 +11,29 @@ export const unVueCEVModel = (): any => {
   return {
     name: `${NAME}:v-model`,
     enforce: 'post',
-    transformInclude() {
-      return true
+    transformInclude(id: string) {
+      return !id.endsWith('.html')
     },
     async transform(code: string, id: string) {
       const mgcStr = new MagicString(code)
-      // build only
-      if (id.includes('/@vue/shared/dist/shared.esm-bundler.js'))
+      const formatId = normalizePath(id)
+      // build only / webpack dev
+      if (formatId.includes('/@vue/shared/dist/shared.esm-bundler.js'))
         injectIsCEModifiers(mgcStr, false)
 
-      // build only
-      if (id.includes('@vue/runtime-dom/dist/runtime-dom.esm-bundler.js')) {
+      // build only / webpack dev
+      if (formatId.includes('@vue/runtime-dom/dist/runtime-dom.esm-bundler.js')) {
         injectVueRuntime(mgcStr)
         injectImport(mgcStr)
       }
 
-      // build only
-      if (id.includes('@vue/runtime-core/dist/runtime-core.esm-bundler.js'))
+      // build only / webpack dev
+      if (formatId.includes('@vue/runtime-core/dist/runtime-core.esm-bundler.js'))
         injectEmit(mgcStr)
 
-      // dev only
-      if (id.includes('.vite/deps/vue.js')
-        || (id.includes('.vite/deps/chunk') && code.includes('__isVue'))) {
+      // vite dev only
+      if (formatId.includes('.vite/deps/vue.js')
+        || (formatId.includes('.vite/deps/chunk') && code.includes('__isVue'))) {
         injectVueRuntime(mgcStr)
         injectIsCEModifiers(mgcStr, true)
       }

play/sub-style-webpack/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+holy/node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

play/sub-style-webpack/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

play/sub-style-webpack/README.md

@@ -0,0 +1,19 @@
+# holy
+
+## Project setup
+```
+pnpm install
+```
+
+### Compiles and hot-reloads for development
+```
+pnpm run serve
+```
+
+### Compiles and minifies for production
+```
+pnpm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

play/sub-style-webpack/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@unplugin-vue-ce/play-sub-style-webpack",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "preview": "cd dist && npx http-server -p 8081"
+  },
+  "dependencies": {
+    "@unocss/postcss": "^0.55.2",
+    "postcss": "^8.4.28",
+    "unocss": "^0.55.2",
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@unocss/webpack": "latest",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "baiwusanyu-utils": "^1.0.15",
+    "typescript": "~4.5.5",
+    "unplugin": "^1.4.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

play/sub-style-webpack/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        '@unocss/postcss': {},
+    },
+}

play/sub-style-webpack/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <bwsy-ce-foo />
+</template>

play/sub-style-webpack/src/bwsy-bar.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <p class="bar">
+      should be blue -- bar
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.bar {
+  color: blue;
+}
+</style>

play/sub-style-webpack/src/bwsy-ce-foo.ce.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <p class="foo bg-blue">
+      should be red -- foo
+    </p>
+    <BwsyBar />
+  </div>
+</template>
+
+<script setup>
+import BwsyBar from './bwsy-bar.vue'
+// import '@virtual:uno'
+</script>
+
+<style scoped>
+.foo {
+  color: red;
+}
+@unocss preflights;
+@unocss default;
+@unocss;
+</style>

play/sub-style-webpack/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp, defineCustomElement } from 'vue'
+import 'uno.css'
+import App from './App.vue'
+import Foo from './bwsy-ce-foo.ce.vue'
+const app = createApp(App)
+customElements.define('bwsy-ce-foo', defineCustomElement(Foo))
+app.mount('#app')

play/sub-style-webpack/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}