feat: support webpack/nextjs

Author: sonofmagic

apps/package.json

@@ -2,15 +2,15 @@
   "name": "apps",
   "version": "1.0.0",
   "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
   "main": "index.js",
   "scripts": {
     "build": "pnpm run -r build",
     "extract": "pnpm run -r tw-extract",
     "preview": "pnpm run -r preview"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
   "dependencies": {
     "@tailwindcss-mangle/config": "link:../packages/config",
     "@tailwindcss-mangle/core": "link:../packages/core",
@@ -19,4 +19,4 @@
     "tailwindcss-patch": "link:../packages/tailwindcss-patch",
     "unplugin-tailwindcss-mangle": "link:../packages/unplugin-tailwindcss-mangle"
   }
-}
+}

packages/config/package.json

@@ -19,8 +19,15 @@
     "utils"
   ],
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
   },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
@@ -40,17 +47,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org/",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.mjs",
-        "require": "./dist/index.cjs"
-      }
-    },
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.mjs",
-    "types": "./dist/index.d.ts"
+    "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
     "@tailwindcss-mangle/shared": "workspace:^",

packages/core/package.json

@@ -19,8 +19,15 @@
     "mangle"
   ],
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
   },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
@@ -41,17 +48,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org/",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.mjs",
-        "require": "./dist/index.cjs"
-      }
-    },
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.mjs",
-    "types": "./dist/index.d.ts"
+    "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
     "@ast-core/escape": "^1.0.1",

packages/shared/package.json

@@ -18,8 +18,15 @@
     "utils"
   ],
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
   },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
@@ -39,17 +46,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org/",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.mjs",
-        "require": "./dist/index.cjs"
-      }
-    },
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.mjs",
-    "types": "./dist/index.d.ts"
+    "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {},
   "devDependencies": {}

packages/unplugin-tailwindcss-mangle/.prettierignore

@@ -2,8 +2,13 @@ import path from 'node:path'
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
-  // entries: ['./src/index', './src/cli'],
+  entries: ['src/index.ts', 'src/vite.ts', 'src/esbuild.ts', 'src/rollup.ts', 'src/webpack.ts', 'src/utils.ts', 'src/core/loader.ts'],
   rollup: {
+    replace: {
+      values: {
+        __DEV__: false,
+      },
+    },
     inlineDependencies: true,
     emitCJS: true,
     cjsBridge: true,
@@ -16,4 +21,5 @@ export default defineBuildConfig({
     '@': path.resolve(__dirname, './src'),
   },
   declaration: true,
+
 })

packages/unplugin-tailwindcss-mangle/build.config.ts

@@ -43,16 +43,6 @@
       "import": "./dist/esbuild.mjs",
       "require": "./dist/esbuild.cjs"
     },
-    "./nuxt": {
-      "types": "./dist/nuxt.d.ts",
-      "import": "./dist/nuxt.mjs",
-      "require": "./dist/nuxt.cjs"
-    },
-    "./utils": {
-      "types": "./dist/utils.d.ts",
-      "import": "./dist/utils.mjs",
-      "require": "./dist/utils.cjs"
-    },
     "./*": "./*"
   },
   "main": "./dist/index.cjs",

packages/unplugin-tailwindcss-mangle/package.json

@@ -1,3 +1,4 @@
+import path from 'node:path'
 import type { UnpluginFactory } from 'unplugin'
 import { Context, cssHandler, htmlHandler, jsHandler } from '@tailwindcss-mangle/core'
 import type { MangleUserConfig } from '@tailwindcss-mangle/config'
@@ -7,6 +8,8 @@ import type { OutputAsset } from 'rollup'
 import { pluginName } from '@/constants'
 import { getGroupedEntries } from '@/utils'
 
+const WEBPACK_LOADER = path.resolve(__dirname, __DEV__ ? '../../dist/core/loader.cjs' : 'core/loader.cjs')
+
 const factory: UnpluginFactory<MangleUserConfig | undefined> = (options, { framework }) => {
   const ctx = new Context()
   let filter = (_id: string) => true
@@ -49,6 +52,28 @@ const factory: UnpluginFactory<MangleUserConfig | undefined> = (options, { frame
           return htmlHandler(code, opts)
         }
       },
+      webpack(compiler) {
+        const { NormalModule } = compiler.webpack
+        const isExisted = true
+        compiler.hooks.compilation.tap(pluginName, (compilation) => {
+          NormalModule.getCompilationHooks(compilation).loader.tap(pluginName, (_loaderContext, module) => {
+            if (isExisted) {
+              const idx = module.loaders.findIndex(x => x.loader.includes('postcss-loader'))
+
+              if (idx > -1) {
+                module.loaders.splice(idx, 0, {
+                  loader: WEBPACK_LOADER,
+                  ident: null,
+                  options: {
+                    ctx,
+                  },
+                  type: null,
+                })
+              }
+            }
+          })
+        })
+      },
     },
     {
       name: `${pluginName}:post`,

packages/unplugin-tailwindcss-mangle/src/core/factory.ts

@@ -0,0 +1,16 @@
+import type { LoaderContext } from 'webpack'
+import { type Context, cssHandler } from '@tailwindcss-mangle/core'
+
+const TailwindcssMangleWebpackLoader = async function (this: LoaderContext<{ ctx: Context }>, source: string) {
+  const callback = this.async()
+  const { ctx } = this.getOptions()
+
+  const { code } = await cssHandler(source, {
+    ctx,
+    id: this.resource,
+  })
+
+  callback(null, code)
+}
+
+export default TailwindcssMangleWebpackLoader

packages/unplugin-tailwindcss-mangle/src/core/loader.ts

@@ -0,0 +1 @@
+declare const __DEV__: boolean