chore: commit more cases

Author: sonofmagic

apps/nuxt-app/app.vue

@@ -12,14 +12,14 @@
           href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
           target="_blank" rel="noopener noreferrer">
           By
-          <img src="./assets/vercel.svg" alt="Vercel Logo" class="dark:invert" priority />
+          <img width="200" src="./assets/vercel.svg" alt="Vercel Logo" class="dark:invert" priority />
         </a>
       </div>
     </div>
 
     <div
       class="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
-      <img class="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert" src="./assets/next.svg" alt="Next.js Logo"
+      <img class="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert" width="300" src="./assets/next.svg" alt="Next.js Logo"
         priority />
     </div>
 

apps/nuxt-app/nuxt.config.ts

@@ -8,5 +8,14 @@ export default defineNuxtConfig({
       autoprefixer: {}
     }
   },
-  modules: [nuxtPlugin]
+  modules: [
+    [
+      nuxtPlugin,
+      {
+        classSetOutput: {
+          type: 'all'
+        }
+      }
+    ]
+  ]
 })

apps/webpack5-vue3/vue.config.js

@@ -3,6 +3,8 @@ const { webpackPlugin: utwm } = require('unplugin-tailwindcss-mangle')
 module.exports = defineConfig({
   transpileDependencies: true,
   configureWebpack: (config) => {
-    config.plugins.push(utwm())
+    config.plugins.push(utwm({
+      classSetOutput: true
+    }))
   }
 })

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

@@ -1,7 +1,22 @@
-import type { Options } from './types'
+import type { Options, ClassSetOutputOptions } 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
+}
 
 export function getOptions(options: Options | undefined = {}) {
   const includeMatcher = createGlobMatcher(options.include, true)
@@ -18,15 +33,34 @@ export function getOptions(options: Options | undefined = {}) {
     return /[-:]/.test(className)
   }
   let classSet: Set<string>
+
+  const classSetOutputOptions: ClassSetOutputOptions = {
+    filename: path.resolve(process.cwd(), 'node_modules', '.cache', pluginName, 'classSet.json'),
+    type: 'partial'
+  }
+  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')
+  }
   // let cached: boolean
   const classGenerator = new ClassGenerator(options.classGenerator)
   function getCachedClassSet() {
     const set = getClassCacheSet()
+    if (set.size && options.classSetOutput && classSetOutputOptions.type === 'all') {
+      writeClassSetJson(set)
+    }
     set.forEach((c) => {
       if (!isMangleClass(c)) {
         set.delete(c)
       }
     })
+    if (set.size && options.classSetOutput && classSetOutputOptions.type === 'partial') {
+      writeClassSetJson(set)
+    }
 
     classSet = set
 

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

@@ -26,8 +26,13 @@ export interface IHandlerOptions {
   classGenerator: ClassGenerator
 }
 
+export interface ClassSetOutputOptions {
+  filename: string
+  type: 'all' | 'partial'
+}
 export interface Options {
   classGenerator?: IClassGeneratorOptions
   exclude?: string[]
   include?: string[]
+  classSetOutput?: boolean | ClassSetOutputOptions
 }