feat: webpack dev mangle fail issue

Author: sonofmagic

packages/unplugin-tailwindcss-mangle/rollup.config.mjs

@@ -8,7 +8,8 @@ export default createRollupConfig({
     rollup: 'src/rollup.ts',
     vite: 'src/vite.ts',
     webpack: 'src/webpack.ts',
-    loader: 'src/loader.ts'
+    'twm-css': 'src/loader/twm-css.ts',
+    'twm-js': 'src/loader/twm-js.ts'
   },
   // external: ['tailwindcss'],
   output: [

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

@@ -22,7 +22,7 @@ const outputCachedMap = new Map<
 >()
 
 export const unplugin = createUnplugin((options: Options | undefined = {}, meta) => {
-  const { classGenerator, getCachedClassSet, isInclude, classMapOutputOptions, twPatcher } = getOptions(options)
+  const { classGenerator, getCachedClassSet, isInclude, classMapOutputOptions } = getOptions(options)
 
   return {
     name: pluginName,
@@ -96,30 +96,38 @@ export const unplugin = createUnplugin((options: Options | undefined = {}, meta)
         }
       }
 
-      const loader = path.resolve(__dirname, 'loader.js')
-
+      const twmCssloader = path.resolve(__dirname, 'twm-css.js')
+      // const twmJsloader = path.resolve(__dirname, 'twm-js.js')
       compiler.hooks.compilation.tap(pluginName, (compilation) => {
         NormalModule.getCompilationHooks(compilation).loader.tap(pluginName, (loaderContext, module) => {
           const idx = module.loaders.findIndex((x) => x.loader.includes('css-loader'))
           // vue-loader/dist/stylePostLoader.
           // vue-style-loader
           if (idx > -1) {
             module.loaders.splice(idx + 1, 0, {
-              loader,
+              loader: twmCssloader,
               options: {
                 classGenerator,
                 getCachedClassSet
               },
               ident: null,
               type: null
             })
-
-            // console.log(module.resource, module.loaders.map(x => x.loader))
-            // if(/css/.test(module.resource)){
-            //   const idx = module.loaders.findIndex((x) => x.loader === 'style-loader')
-            //   console.log(idx)
-            // }
           }
+
+          // idx = module.loaders.findIndex((x) => x.loader.includes('babel-loader'))
+
+          // if (idx > -1) {
+          //   module.loaders.splice(idx + 1, 0, {
+          //     loader: twmJsloader,
+          //     options: {
+          //       classGenerator,
+          //       getCachedClassSet
+          //     },
+          //     ident: null,
+          //     type: null
+          //   })
+          // }
         })
         compilation.hooks.processAssets.tap(
           {

packages/unplugin-tailwindcss-mangle/src/loader.ts renamed to packages/unplugin-tailwindcss-mangle/src/loader/twm-css.ts

@@ -1,8 +1,8 @@
 import * as webpack from 'webpack'
-import ClassGenerator from './classGenerator'
-import { cssHandler } from './css'
+import ClassGenerator from '../classGenerator'
+import { cssHandler } from '../css'
 
-export default function loader(
+export default function cssloader(
   this: webpack.LoaderContext<{
     classGenerator: ClassGenerator
     getCachedClassSet: (() => Set<string>) | undefined

packages/unplugin-tailwindcss-mangle/src/loader/twm-js.ts

@@ -0,0 +1,26 @@
+import * as webpack from 'webpack'
+import ClassGenerator from '../classGenerator'
+import { jsHandler } from '../js'
+
+export default function cssloader(
+  this: webpack.LoaderContext<{
+    classGenerator: ClassGenerator
+    getCachedClassSet: (() => Set<string>) | undefined
+  }>,
+  content: string
+) {
+  this.cacheable && this.cacheable()
+  const opt = this.getOptions()
+  if (opt.getCachedClassSet) {
+    const runtimeSet = opt.getCachedClassSet()
+    const code = jsHandler(content, {
+      runtimeSet,
+      classGenerator: opt.classGenerator
+    }).code
+    if (code) {
+      return code
+    }
+  }
+
+  return content
+}

packages/unplugin-tailwindcss-mangle/test/fixtures/webpack-dev-content.js

@@ -32,6 +32,22 @@ describe('js handler', () => {
     expect(code).toMatchSnapshot()
   })
 
+  it('text-[red]', () => {
+    const classGenerator = new ClassGenerator()
+    const runtimeSet = new Set<string>()
+
+    // eslint-disable-next-line no-template-curly-in-string
+    const testCase = ''
+    testCase.split(' ').forEach((x) => {
+      runtimeSet.add(x)
+    })
+    const code = jsHandler(testCase, {
+      classGenerator,
+      runtimeSet
+    }).code
+    expect(code).toMatchSnapshot()
+  })
+
   it('z-10 not transform', () => {
     const classGenerator = new ClassGenerator()
     const runtimeSet = new Set<string>()