chore: unplugin-tailwindcss-mangle esm

Author: sonofmagic

.changeset/clever-peaches-beg.md

@@ -0,0 +1,5 @@
+---
+"unplugin-tailwindcss-mangle": major
+---
+
+feat: prefer esm

apps/vite-react/.tw-patch/tw-class-list.json

@@ -1556,4 +1556,4 @@
   "z-30",
   "z-40",
   "z-50"
-]
+]

apps/vite-react/tsconfig.node.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "composite": true,
+    "target": "ESNext",
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]

apps/vite-react/vite.config.ts

@@ -1,12 +1,22 @@
 import react from '@vitejs/plugin-react'
-import utwm from 'unplugin-tailwindcss-mangle/vite'
+import { register } from 'tsx/esm/api'
 import { defineConfig } from 'vite'
-// https://vitejs.dev/config/
+
+register()
+const { default: utwm } = await import('unplugin-tailwindcss-mangle/vite')
+
 export default defineConfig({
   plugins: [
     react(),
     utwm({
       classMapOutput: true,
     }),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ['legacy-js-api'],
+      },
+    },
+  },
 })

apps/vite-vue/tsconfig.node.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "composite": true,
+    "target": "ESNext",
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]

apps/vite-vue/vite.config.ts

@@ -1,6 +1,9 @@
 import vue from '@vitejs/plugin-vue'
-import utwm from 'unplugin-tailwindcss-mangle/vite'
+import { register } from 'tsx/esm/api'
 import { defineConfig } from 'vite'
+
+register()
+const { default: utwm } = await import('unplugin-tailwindcss-mangle/vite')
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -9,4 +12,11 @@ export default defineConfig({
       classMapOutput: true,
     }),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ['legacy-js-api'],
+      },
+    },
+  },
 })

package.json

@@ -39,7 +39,7 @@
     "@commitlint/prompt-cli": "^19.5.0",
     "@commitlint/types": "^19.5.0",
     "@icebreakers/eslint-config": "^0.6.1",
-    "@icebreakers/monorepo": "^0.6.11",
+    "@icebreakers/monorepo": "^0.6.12",
     "@icebreakers/stylelint-config": "^0.1.2",
     "@rollup/pluginutils": "^5.1.3",
     "@tailwindcss-mangle/core": "workspace:*",
@@ -71,7 +71,7 @@
     "defu": "^6.1.4",
     "del": "^8.0.0",
     "eslint": "^9.13.0",
-    "execa": "^9.4.1",
+    "execa": "^9.5.0",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "get-value": "^3.0.1",

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

@@ -21,33 +21,33 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
     "./vite": {
       "types": "./dist/vite.d.ts",
-      "import": "./dist/vite.mjs",
+      "import": "./dist/vite.js",
       "require": "./dist/vite.cjs"
     },
     "./webpack": {
       "types": "./dist/webpack.d.ts",
-      "import": "./dist/webpack.mjs",
+      "import": "./dist/webpack.js",
       "require": "./dist/webpack.cjs"
     },
     "./rollup": {
       "types": "./dist/rollup.d.ts",
-      "import": "./dist/rollup.mjs",
+      "import": "./dist/rollup.js",
       "require": "./dist/rollup.cjs"
     },
     "./esbuild": {
       "types": "./dist/esbuild.d.ts",
-      "import": "./dist/esbuild.mjs",
+      "import": "./dist/esbuild.js",
       "require": "./dist/esbuild.cjs"
     },
     "./*": "./*"
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -61,8 +61,8 @@
     "dist"
   ],
   "scripts": {
-    "dev": "unbuild --sourcemap",
-    "build": "unbuild",
+    "dev": "tsup --watch --sourcemap",
+    "build": "tsup",
     "test": "vitest run --coverage.enabled",
     "test:dev": "vitest"
   },

packages/unplugin-tailwindcss-mangle/package.json

@@ -1,15 +1,15 @@
 import type { MangleUserConfig } from '@tailwindcss-mangle/config'
 import type { UnpluginFactory } from 'unplugin'
-import path from 'pathe'
-import { pluginName } from '@/constants'
 import { getGroupedEntries } from '@/utils'
 import { createFilter } from '@rollup/pluginutils'
 import { Context, cssHandler, htmlHandler, jsHandler } from '@tailwindcss-mangle/core'
 import { isCSSRequest } from 'is-css-request'
+import path from 'pathe'
+import { pluginName } from '../constants'
 
 const WEBPACK_LOADER = path.resolve(__dirname, __DEV__ ? '../../dist/core/loader.cjs' : 'core/loader.cjs')
 
-const factory: UnpluginFactory<MangleUserConfig | undefined> = (options, { framework }) => {
+const factory: UnpluginFactory<MangleUserConfig | undefined> = (options) => {
   const ctx = new Context()
   let filter = (_id: string) => true
   return [

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

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises'
-import path from 'pathe'
 import process from 'node:process'
 import { groupBy } from '@tailwindcss-mangle/shared'
+import path from 'pathe'
 import { pluginName } from './constants'
 
 export function escapeStringRegexp(str: string) {