feat: add .cache file for log and debug

sonofmagic · sonofmagic · commit ce97b60847fb · 2023-04-28T22:07:09.000+08:00
diff --git a/apps/next-app/next.config.js b/apps/next-app/next.config.js
@@ -5,7 +5,10 @@ const { webpackPlugin: utwm } = require('unplugin-tailwindcss-mangle')
 const nextConfig = {
   reactStrictMode: true,
   webpack: (config) => {
-    config.plugins.push(utwm())
+    config.plugins.push(utwm({
+      classSetOutput: true,
+      classMapOutput: true
+    }))
     return config
   }
 }
diff --git a/apps/nuxt-app/nuxt.config.ts b/apps/nuxt-app/nuxt.config.ts
@@ -12,9 +12,8 @@ export default defineNuxtConfig({
     [
       nuxtPlugin,
       {
-        classSetOutput: {
-          type: 'all'
-        }
+        classSetOutput: true,
+        classMapOutput: true
       }
     ]
   ]
diff --git a/apps/solid-app/vite.config.ts b/apps/solid-app/vite.config.ts
@@ -2,7 +2,13 @@ import { defineConfig } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
 import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
 export default defineConfig({
-  plugins: [solidPlugin(), utwm()],
+  plugins: [
+    solidPlugin(),
+    utwm({
+      classSetOutput: true,
+      classMapOutput: true
+    })
+  ],
   server: {
     port: 3000
   },
diff --git a/apps/vite-lit/package.json b/apps/vite-lit/package.json
@@ -14,7 +14,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "_build": "tsc && vite build",
     "prepare": "tw-patch"
   },
   "dependencies": {
diff --git a/apps/vite-react/vite.config.ts b/apps/vite-react/vite.config.ts
@@ -3,5 +3,11 @@ import react from '@vitejs/plugin-react'
 import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), utwm()]
+  plugins: [
+    react(),
+    utwm({
+      classSetOutput: true,
+      classMapOutput: true
+    })
+  ]
 })
diff --git a/apps/vite-svelte/vite.config.ts b/apps/vite-svelte/vite.config.ts
@@ -3,5 +3,11 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte(), utwm()]
+  plugins: [
+    svelte(),
+    utwm({
+      classSetOutput: true,
+      classMapOutput: true
+    })
+  ]
 })
diff --git a/apps/vite-vanilla/vite.config.ts b/apps/vite-vanilla/vite.config.ts
@@ -2,5 +2,10 @@ import { defineConfig } from 'vite'
 import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [utwm()]
+  plugins: [
+    utwm({
+      classSetOutput: true,
+      classMapOutput: true
+    })
+  ]
 })
diff --git a/apps/vite-vue/vite.config.ts b/apps/vite-vue/vite.config.ts
@@ -3,5 +3,11 @@ import vue from '@vitejs/plugin-vue'
 import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), utwm()]
+  plugins: [
+    vue(),
+    utwm({
+      classSetOutput: true,
+      classMapOutput: true
+    })
+  ]
 })
diff --git a/apps/webpack5-vue3/vue.config.js b/apps/webpack5-vue3/vue.config.js
@@ -4,7 +4,8 @@ module.exports = defineConfig({
   transpileDependencies: true,
   configureWebpack: (config) => {
     config.plugins.push(utwm({
-      classSetOutput: true
+      classSetOutput: true,
+      classMapOutput: true
     }))
   }
 })
diff --git a/packages/unplugin-tailwindcss-mangle/src/css/plugins.ts b/packages/unplugin-tailwindcss-mangle/src/css/plugins.ts
@@ -24,25 +24,18 @@ const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin = (options)
           if (s.value) {
             const hit = newClassMap[s.value]
             if (hit) {
-              // console.log(s.value, hit.name)
+              // vue scoped
+              if (s.parent) {
+                const idx = s.parent.nodes.indexOf(s)
+                if (idx > -1) {
+                  const nextNode = s.parent.nodes[idx + 1]
+                  if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.indexOf('data-v-') > -1) {
+                    return
+                  }
+                }
+              }
               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)
diff --git a/packages/unplugin-tailwindcss-mangle/src/index.ts b/packages/unplugin-tailwindcss-mangle/src/index.ts
@@ -1,7 +1,7 @@
 import { createUnplugin } from 'unplugin'
 import type { Options } from './types'
 import { pluginName } from './constants'
-import { getGroupedEntries } from './utils'
+import { getGroupedEntries, cacheDump } from './utils'
 import type { OutputAsset, OutputChunk } from 'rollup'
 import { htmlHandler } from './html'
 import { jsHandler } from './js'
@@ -22,7 +22,7 @@ const outputCachedMap = new Map<
 >()
 
 export const unplugin = createUnplugin((options: Options | undefined = {}, meta) => {
-  const { classGenerator, getCachedClassSet, isInclude } = getOptions(options)
+  const { classGenerator, getCachedClassSet, isInclude, classMapOutputOptions } = getOptions(options)
 
   return {
     name: pluginName,
@@ -227,6 +227,18 @@ export const unplugin = createUnplugin((options: Options | undefined = {}, meta)
           }
         )
       })
+    },
+    writeBundle() {
+      const entries = Object.entries(classGenerator.newClassMap)
+      if (entries.length && classMapOutputOptions) {
+        cacheDump(
+          classMapOutputOptions.filename,
+          entries.map((x) => {
+            return [x[0], x[1].name]
+          }),
+          classMapOutputOptions.dir
+        )
+      }
     }
   }
 })
diff --git a/packages/unplugin-tailwindcss-mangle/src/options.ts b/packages/unplugin-tailwindcss-mangle/src/options.ts
@@ -1,22 +1,7 @@
-import type { Options, ClassSetOutputOptions } from './types'
+import type { Options, ClassSetOutputOptions, ClassMapOutputOptions } from './types'
 import { getClassCacheSet } from 'tailwindcss-patch'
 import ClassGenerator from './classGenerator'
-import { createGlobMatcher } from './utils'
-import fs from 'fs'
-import path from 'path'
-import { pluginName } from './constants'
-
-export function mkCacheDirectory(cwd = process.cwd()) {
-  const cacheDirectory = path.resolve(cwd, 'node_modules', '.cache', pluginName)
-
-  const exists = fs.existsSync(cacheDirectory)
-  if (!exists) {
-    fs.mkdirSync(cacheDirectory, {
-      recursive: true
-    })
-  }
-  return cacheDirectory
-}
+import { createGlobMatcher, isMangleClass, cacheDump } from './utils'
 
 export function getOptions(options: Options | undefined = {}) {
   const includeMatcher = createGlobMatcher(options.include, true)
@@ -26,40 +11,39 @@ export function getOptions(options: Options | undefined = {}) {
     return includeMatcher(file) && !excludeMatcher(file)
   }
 
-  const isMangleClass = (className: string) => {
-    // ignore className like 'filter','container'
-    // it may be dangerous to mangle/rename all StringLiteral , so use /-/ test for only those with /-/ like:
-    // bg-[#123456] w-1 etc...
-    return /[-:]/.test(className)
-  }
   let classSet: Set<string>
 
   const classSetOutputOptions: ClassSetOutputOptions = {
-    filename: path.resolve(process.cwd(), 'node_modules', '.cache', pluginName, 'classSet.json'),
+    filename: 'classSet.json',
     type: 'partial'
   }
+
+  const classMapOutputOptions: ClassMapOutputOptions = {
+    filename: 'classMap.json'
+  }
+
   if (typeof options.classSetOutput === 'object') {
     Object.assign(classSetOutputOptions, options.classSetOutput)
   }
-
-  function writeClassSetJson(set: Set<string>) {
-    mkCacheDirectory()
-    fs.writeFileSync(classSetOutputOptions.filename, JSON.stringify(Array.from(set), null, 2), 'utf-8')
+  if (typeof options.classMapOutput === 'object') {
+    Object.assign(classMapOutputOptions, options.classMapOutput)
   }
+
   // let cached: boolean
   const classGenerator = new ClassGenerator(options.classGenerator)
   function getCachedClassSet() {
     const set = getClassCacheSet()
-    if (set.size && options.classSetOutput && classSetOutputOptions.type === 'all') {
-      writeClassSetJson(set)
+    const isOutput = set.size && options.classSetOutput
+    if (isOutput && classSetOutputOptions.type === 'all') {
+      cacheDump(classSetOutputOptions.filename, set, classSetOutputOptions.dir)
     }
     set.forEach((c) => {
       if (!isMangleClass(c)) {
         set.delete(c)
       }
     })
-    if (set.size && options.classSetOutput && classSetOutputOptions.type === 'partial') {
-      writeClassSetJson(set)
+    if (isOutput && classSetOutputOptions.type === 'partial') {
+      cacheDump(classSetOutputOptions.filename, set, classSetOutputOptions.dir)
     }
 
     classSet = set
@@ -72,6 +56,8 @@ export function getOptions(options: Options | undefined = {}) {
     classGenerator,
     includeMatcher,
     excludeMatcher,
-    isInclude
+    isInclude,
+    classSetOutputOptions,
+    classMapOutputOptions
   }
 }
diff --git a/packages/unplugin-tailwindcss-mangle/src/types.ts b/packages/unplugin-tailwindcss-mangle/src/types.ts
@@ -28,11 +28,18 @@ export interface IHandlerOptions {
 
 export interface ClassSetOutputOptions {
   filename: string
+  dir?: string
   type: 'all' | 'partial'
 }
+
+export interface ClassMapOutputOptions {
+  filename: string
+  dir?: string
+}
 export interface Options {
   classGenerator?: IClassGeneratorOptions
   exclude?: string[]
   include?: string[]
   classSetOutput?: boolean | ClassSetOutputOptions
+  classMapOutput?: boolean | ClassMapOutputOptions
 }
diff --git a/packages/unplugin-tailwindcss-mangle/src/utils.ts b/packages/unplugin-tailwindcss-mangle/src/utils.ts
@@ -1,6 +1,18 @@
 import type { IClassGeneratorOptions, IClassGenerator } from './types'
 import micromatch from 'micromatch'
+import fs from 'fs'
+import path from 'path'
+
+import { pluginName } from './constants'
 const { isMatch } = micromatch
+
+export const isMangleClass = (className: string) => {
+  // ignore className like 'filter','container'
+  // it may be dangerous to mangle/rename all StringLiteral , so use /-/ test for only those with /-/ like:
+  // bg-[#123456] w-1 etc...
+  return /[-:]/.test(className)
+}
+
 export function groupBy<T>(arr: T[], cb: (arg: T) => string): Record<string, T[]> {
   if (!Array.isArray(arr)) {
     throw new Error('expected an array for first argument')
@@ -133,3 +145,28 @@ export function createGlobMatcher(pattern: string | string[] | undefined, fallba
     return isMatch(file, pattern)
   }
 }
+
+export function getCacheDir(basedir = process.cwd()) {
+  return path.resolve(basedir, 'node_modules/.cache', pluginName)
+}
+
+export function mkCacheDirectory(cwd = process.cwd()) {
+  const cacheDirectory = getCacheDir(cwd)
+
+  const exists = fs.existsSync(cacheDirectory)
+  if (!exists) {
+    fs.mkdirSync(cacheDirectory, {
+      recursive: true
+    })
+  }
+  return cacheDirectory
+}
+
+export function cacheDump(filename: string, data: any[] | Set<any>, basedir?: string) {
+  try {
+    const dir = mkCacheDirectory(basedir)
+    fs.writeFileSync(path.resolve(dir, filename), JSON.stringify(Array.from(data), null, 2), 'utf-8')
+  } catch (error) {
+    console.log(error)
+  }
+}
diff --git a/packages/unplugin-tailwindcss-mangle/test/__snapshots__/css.test.ts.snap b/packages/unplugin-tailwindcss-mangle/test/__snapshots__/css.test.ts.snap
@@ -2,15 +2,22 @@
 
 exports[`css common with scoped 1`] = `
 "
-    .tw-a[data-v-0f84999b] {
+    .bg-white[data-v-0f84999b] {
       --tw-bg-opacity: 1;
       background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
     }"
 `;
 
+exports[`css vue scoped .gap-y-4 1`] = `
+"@media (min-width: 768px) {
+      .tw-a {
+      }
+    }"
+`;
+
 exports[`css vue scoped .gap-y-4[data-v-0f84999b] 1`] = `
 "@media (min-width: 768px) {
-      .tw-a[data-v-0f84999b] {
+      .gap-y-4[data-v-0f84999b] {
       }
     }"
 `;
diff --git a/packages/unplugin-tailwindcss-mangle/test/css.test.ts b/packages/unplugin-tailwindcss-mangle/test/css.test.ts
@@ -6,6 +6,22 @@ describe('css', () => {
   beforeEach(() => {
     classGenerator = new ClassGenerator()
   })
+
+  it('vue scoped .gap-y-4', () => {
+    const runtimeSet = new Set<string>()
+    runtimeSet.add('gap-y-4')
+    classGenerator.generateClassName('gap-y-4')
+    const testCase = `@media (min-width: 768px) {
+      .gap-y-4 {
+      }
+    }`
+
+    const css = cssHandler(testCase, {
+      classGenerator,
+      runtimeSet
+    })
+    expect(css).toMatchSnapshot()
+  })
   it('vue scoped .gap-y-4[data-v-0f84999b]', () => {
     const runtimeSet = new Set<string>()
     runtimeSet.add('gap-y-4')

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,10 @@ const { webpackPlugin: utwm } = require('unplugin-tailwindcss-mangle')`
`5`	`5`	`const nextConfig = {`
`6`	`6`	`reactStrictMode: true,`
`7`	`7`	`webpack: (config) => {`
`8`		`- config.plugins.push(utwm())`
	`8`	`+ config.plugins.push(utwm({`
	`9`	`+ classSetOutput: true,`
	`10`	`+ classMapOutput: true`
	`11`	`+ }))`
`9`	`12`	`return config`
`10`	`13`	`}`
`11`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,9 +12,8 @@ export default defineNuxtConfig({`
`12`	`12`	`[`
`13`	`13`	`nuxtPlugin,`
`14`	`14`	`{`
`15`		`- classSetOutput: {`
`16`		`- type: 'all'`
`17`		`- }`
	`15`	`+ classSetOutput: true,`
	`16`	`+ classMapOutput: true`
`18`	`17`	`}`
`19`	`18`	`]`
`20`	`19`	`]`