feat: vue scoped case commit

Author: sonofmagic

packages/unplugin-tailwindcss-mangle/src/css/plugins.ts

@@ -20,13 +20,29 @@ const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin = (options)
     postcssPlugin,
     Rule(rule, helper) {
       rule.selector = parser((selectors) => {
-        selectors.walk((s) => {
+        selectors.walkClasses((s) => {
           if (s.value) {
             const hit = newClassMap[s.value]
             if (hit) {
               // console.log(s.value, hit.name)
               s.value = hit.name
             }
+            // for vue scoped gap-y-4[data-v-0f84999b]
+            // const idx = s.value.indexOf('[data-v-')
+            // const isVueScoped = idx > -1
+            // if (isVueScoped) {
+            //   const prefixCls = s.value.substring(0, idx)
+            //   const hit = newClassMap[prefixCls]
+            //   if (hit) {
+            //     s.value = hit.name + s.value.substring(idx)
+            //   }
+            // } else {
+            //   const hit = newClassMap[s.value]
+            //   if (hit) {
+            //     // console.log(s.value, hit.name)
+            //     s.value = hit.name
+            //   }
+            // }
           }
         })
       }).processSync(rule.selector)

packages/unplugin-tailwindcss-mangle/src/index.ts

@@ -51,10 +51,13 @@ export const unplugin = createUnplugin((options: Options | undefined = {}, meta)
             for (let i = 0; i < groupedEntries.js.length; i++) {
               const [file, chunk] = groupedEntries.js[i] as [string, OutputChunk]
               if (isInclude(file)) {
-                chunk.code = jsHandler(chunk.code, {
+                const code = jsHandler(chunk.code, {
                   runtimeSet,
                   classGenerator
                 }).code
+                if (code) {
+                  chunk.code = code
+                }
               }
             }
           }
@@ -155,8 +158,10 @@ export const unplugin = createUnplugin((options: Options | undefined = {}, meta)
                     runtimeSet,
                     classGenerator
                   }).code
-                  const source = new ConcatSource(code)
-                  compilation.updateAsset(file, source)
+                  if (code) {
+                    const source = new ConcatSource(code)
+                    compilation.updateAsset(file, source)
+                  }
                 }
               }
             }
@@ -197,8 +202,9 @@ export const unplugin = createUnplugin((options: Options | undefined = {}, meta)
                       runtimeSet,
                       classGenerator
                     }).code
-
-                    overwriteServerSideAsset(key, file, code)
+                    if (code) {
+                      overwriteServerSideAsset(key, file, code)
+                    }
                   }
                 })
                 js.clear()
@@ -228,28 +234,9 @@ export const unplugin = createUnplugin((options: Options | undefined = {}, meta)
 export const vitePlugin = unplugin.vite
 export const webpackPlugin = unplugin.webpack
 
-// export const nuxtPlugin = function (options: Options = {}, nuxt: any) {
-//   // install webpack plugin
-//   nuxt.hook('webpack:config', async (config: any) => {
-//     config.plugins = config.plugins || []
-//     config.plugins.unshift(unplugin.webpack(options))
-//   })
-
-//   // install vite plugin
-//   nuxt.hook('vite:extendConfig', async (config: any) => {
-//     config.plugins = config.plugins || []
-//     config.plugins.push(unplugin.vite(options))
-//   })
-// }
-
 // export default unplugin
 // export const vitePlugin = unplugin.vite
 // export const rollupPlugin = unplugin.rollup
 // export const webpackPlugin = unplugin.webpack
 // export const rspackPlugin = unplugin.rspack
 // export const esbuildPlugin = unplugin.esbuild
-// export const vitePlugin = unplugin.vite
-// export const rollupPlugin = unplugin.rollup
-// export const webpackPlugin = unplugin.webpack
-// export const rspackPlugin = unplugin.rspack
-// export const esbuildPlugin = unplugin.esbuild

packages/unplugin-tailwindcss-mangle/src/utils.ts

@@ -36,7 +36,7 @@ export function getGroupedEntries<T>(
       return /\.html?$/.test(file)
     },
     jsMatcher(file: string) {
-      return /\.js$/.test(file)
+      return /\.[cm]?js$/.test(file)
     }
   }
 ) {

packages/unplugin-tailwindcss-mangle/src/vite.ts

@@ -1,3 +1,3 @@
 import { unplugin } from '.'
-import type { } from 'vite'
+import type {} from 'vite'
 export default unplugin.vite

packages/unplugin-tailwindcss-mangle/test/__snapshots__/css.test.ts.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`css vue scoped .gap-y-4[data-v-0f84999b] 1`] = `
+"@media (min-width: 768px) {
+      .tw-a[data-v-0f84999b] {
+      }
+    }"
+`;

packages/unplugin-tailwindcss-mangle/test/css.test.ts

@@ -0,0 +1,20 @@
+import ClassGenerator from '../src/classGenerator'
+import { cssHandler } from '../src/css/index'
+
+describe('css', () => {
+  it('vue scoped .gap-y-4[data-v-0f84999b]', () => {
+    const classGenerator = new ClassGenerator()
+    const runtimeSet = new Set<string>()
+    runtimeSet.add('gap-y-4')
+    classGenerator.generateClassName('gap-y-4')
+    const testCase = `@media (min-width: 768px) {
+      .gap-y-4[data-v-0f84999b] {
+      }
+    }`
+    const css = cssHandler(testCase, {
+      classGenerator,
+      runtimeSet
+    })
+    expect(css).toMatchSnapshot()
+  })
+})