Merge pull request #62 from sonofmagic/feature/add-vue-compiler

Feature/add vue compiler

Author: sonofmagic

.changeset/purple-hotels-itch.md

@@ -0,0 +1,7 @@
+---
+"unplugin-tailwindcss-mangle": minor
+"@tailwindcss-mangle/core": minor
+"tailwindcss-patch": patch
+---
+
+fix(tailwindcss-patch): monorepo basedir option

.vscode/launch.json

@@ -1,9 +1,16 @@
 {
-  // 使用 IntelliSense 了解相关属性。 
+  // 使用 IntelliSense 了解相关属性。
   // 悬停以查看现有属性的描述。
   // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "command": "pnpm tw-extract",
+      "name": "[vite-vue] tw-extract",
+      "request": "launch",
+      "type": "node-terminal",
+      "cwd": "${workspaceFolder}/apps/vite-vue"
+    },
     {
       "command": "pnpm start",
       "name": "[scripts] postcss7-compat run",
@@ -117,4 +124,4 @@
       "cwd": "${workspaceFolder}/packages/core"
     }
   ]
-}
+}

package.json

@@ -21,7 +21,7 @@
     "preinstall": "npx only-allow pnpm",
     "sync": "cnpm sync @tailwindcss-mangle/shared @tailwindcss-mangle/config tailwindcss-patch unplugin-tailwindcss-mangle @tailwindcss-mangle/core",
     "publish-packages": "pnpm run test && changeset version && changeset publish",
-    "release": "bumpp -r --no-push --no-commit"
+    "release": "changeset"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
@@ -31,7 +31,7 @@
     "@tailwindcss-mangle/shared": "workspace:*",
     "@tsconfig/recommended": "^1.0.6",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.5",
     "@vitest/coverage-v8": "^1.6.0",
     "bumpp": "^9.4.1",
     "cross-env": "^7.0.3",

packages/config/package.json

@@ -2,13 +2,32 @@
   "name": "@tailwindcss-mangle/config",
   "version": "2.2.2",
   "description": "The config and load function of tailwindcss-mangle",
+  "author": "SonOfMagic <[email protected]>",
+  "license": "MIT",
+  "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sonofmagic/tailwindcss-mangle.git"
+  },
+  "keywords": [
+    "tailwindcss",
+    "mangle",
+    "patch",
+    "core",
+    "mangle",
+    "shared",
+    "utils"
+  ],
   "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",
   "typesVersions": {
     "*": {
       "*": [
@@ -17,9 +36,6 @@
       ]
     }
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -29,17 +45,6 @@
     "test": "vitest run --coverage.enabled",
     "test:dev": "vitest"
   },
-  "keywords": [
-    "tailwindcss",
-    "mangle",
-    "patch",
-    "core",
-    "mangle",
-    "shared",
-    "utils"
-  ],
-  "author": "SonOfMagic <[email protected]>",
-  "license": "MIT",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -48,10 +53,5 @@
     "@tailwindcss-mangle/shared": "workspace:^",
     "c12": "^1.11.1",
     "dedent": "^1.5.3"
-  },
-  "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sonofmagic/tailwindcss-mangle.git"
   }
 }

packages/core/package.json

@@ -2,13 +2,32 @@
   "name": "@tailwindcss-mangle/core",
   "version": "2.2.2",
   "description": "The core of tailwindcss-mangle",
+  "author": "SonOfMagic <[email protected]>",
+  "license": "MIT",
+  "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sonofmagic/tailwindcss-mangle.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sonofmagic/tailwindcss-mangle/issues"
+  },
+  "keywords": [
+    "tailwindcss",
+    "patch",
+    "core",
+    "mangle"
+  ],
   "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",
   "typesVersions": {
     "*": {
       "*": [
@@ -17,9 +36,6 @@
       ]
     }
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -30,51 +46,32 @@
     "test:dev": "vitest",
     "coverage": "vitest run --coverage"
   },
-  "keywords": [
-    "tailwindcss",
-    "patch",
-    "core",
-    "mangle"
-  ],
-  "author": "SonOfMagic <[email protected]>",
-  "license": "MIT",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
     "@ast-core/escape": "^1.0.1",
-    "@babel/core": "^7.24.7",
-    "@babel/helper-plugin-utils": "^7.24.7",
     "@babel/parser": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/traverse": "^7.24.7",
     "@babel/types": "^7.24.7",
     "@tailwindcss-mangle/config": "workspace:^",
     "@tailwindcss-mangle/shared": "workspace:^",
     "@vue/compiler-sfc": "^3.4.29",
     "fast-sort": "^3.4.0",
+    "htmlparser2": "9.1.0",
     "magic-string": "^0.30.10",
     "micromatch": "^4.0.7",
-    "parse5": "^7.1.2",
     "postcss": "^8.4.38",
     "postcss-selector-parser": "^6.1.0"
   },
   "devDependencies": {
-    "@parse5/tools": "^0.5.0",
-    "@types/babel__core": "^7.20.5",
+    "@types/babel__traverse": "^7.20.6",
     "@types/micromatch": "^4.0.7",
     "@vue/compiler-core": "^3.4.29",
     "@vue/compiler-sfc": "^3.4.27"
   },
-  "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sonofmagic/tailwindcss-mangle.git"
-  },
-  "bugs": {
-    "url": "https://github.com/sonofmagic/tailwindcss-mangle/issues"
-  },
   "directories": {
     "test": "test"
   }
-}
+}

packages/core/src/babel/index.ts

@@ -0,0 +1,9 @@
+import _babelTraverse from '@babel/traverse'
+
+export { parse, parseExpression } from '@babel/parser'
+
+function _interopDefaultCompat(e: any) {
+  return e && typeof e === 'object' && 'default' in e ? e.default : e
+}
+
+export const traverse = _interopDefaultCompat(_babelTraverse) as typeof _babelTraverse

packages/core/src/css/plugins.ts

@@ -7,8 +7,6 @@ export type PostcssMangleTailwindcssPlugin = PluginCreator<ICssHandlerOptions>
 
 const postcssPlugin = 'postcss-mangle-tailwindcss-plugin'
 
-const clonedKey = '__tw_mangle_cloned__'
-
 export function isVueScoped(s: parser.ClassName): boolean {
   if (s.parent) {
     const index = s.parent.nodes.indexOf(s)
@@ -23,39 +21,37 @@ export function isVueScoped(s: parser.ClassName): boolean {
 }
 
 export const transformSelectorPostcssPlugin: PluginCreator<ICssHandlerOptions> = function (options) {
-  const { ignoreVueScoped, replaceMap, ctx } = defu(options, {
+  const { ignoreVueScoped, ctx } = defu(options, {
     ignoreVueScoped: true,
   })
+  const replaceMap = ctx.replaceMap
 
   return {
     postcssPlugin,
-    async Rule(rule) {
-      // @ts-ignore
-      if (rule[clonedKey]) {
-        return
-      }
-      await parser((selectors) => {
-        selectors.walkClasses((s) => {
-          if (s.value && replaceMap && replaceMap.has(s.value)) {
-            if (ignoreVueScoped && isVueScoped(s)) {
-              return
-            }
-            const v = replaceMap.get(s.value)
-            if (v) {
-              if (ctx.isPreserveClass(s.value)) {
-                const r = rule.cloneBefore()
-                // @ts-ignore
-                r[clonedKey] = true
+    Once(root) {
+      root.walkRules((rule) => {
+        parser((selectors) => {
+          selectors.walkClasses((s) => {
+            if (s.value && replaceMap && replaceMap.has(s.value)) {
+              if (ignoreVueScoped && isVueScoped(s)) {
+                return
+              }
+              const v = replaceMap.get(s.value)
+              if (v) {
+                if (ctx.isPreserveClass(s.value)) {
+                  rule.cloneBefore()
+                }
+                s.value = v
               }
-              s.value = v
             }
-          }
+          })
+        }).transformSync(rule, {
+          lossless: false,
+          updateSelector: true,
         })
-      }).transform(rule, {
-        lossless: false,
-        updateSelector: true,
       })
     },
+
   }
 }
 transformSelectorPostcssPlugin.postcss = true

packages/core/src/ctx/index.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs'
 import { isAbsolute, resolve } from 'node:path'
+import process from 'node:process'
 import { ClassGenerator } from '@tailwindcss-mangle/shared'
 import { getConfig } from '@tailwindcss-mangle/config'
 import type { MangleUserConfig } from '@tailwindcss-mangle/config'
@@ -17,7 +18,7 @@ export class Context {
   options: MangleUserConfig
   private includeMatcher: (file: string) => boolean
   private excludeMatcher: (file: string) => boolean
-  private replaceMap: Map<string, string>
+  public replaceMap: Map<string, string>
   classSet: Set<string>
 
   classGenerator: ClassGenerator
@@ -46,9 +47,6 @@ export class Context {
   }
 
   isPreserveFunction(calleeName: string) {
-    // if (callee === undefined) {
-    //   return false
-    // }
     return this.preserveFunctionSet.has(calleeName)
   }
 
@@ -77,12 +75,6 @@ export class Context {
   }
 
   getReplaceMap() {
-    // const map = new Map<string, string>()
-    // for (const [key, value] of sort([...this.replaceMap.entries()]).desc((x) => x[0].length)) {
-    //   if (!this.isPreserveClass(key)) {
-    //     map.set(key, value)
-    //   }
-    // }
     return this.replaceMap // map
   }
 

packages/core/src/env.ts

@@ -1,2 +1,4 @@
+import process from 'node:process'
+
 export const isProd = () => process.env.NODE_ENV === 'production'
 export const isDev = () => process.env.NODE_ENV === 'development'

packages/core/src/html/index.ts

@@ -1,25 +1,38 @@
-import { parse, serialize } from 'parse5'
-import { traverse } from '@parse5/tools'
+import { Parser } from 'htmlparser2'
+import MagicString from 'magic-string'
 import type { IHtmlHandlerOptions } from '../types'
 import { makeRegex, splitCode } from '../shared'
-// const { traverse } = await import('@parse5/tools')
-export function htmlHandler(rawSource: string, options: IHtmlHandlerOptions) {
-  const { replaceMap, ctx } = options
-  const fragment = parse(rawSource)
-  traverse(fragment, {
-    element(node) {
-      const attribute = node.attrs.find(x => x.name === 'class')
-      if (attribute) {
-        const array = splitCode(attribute.value, {
+import { jsHandler } from '@/js'
+
+export function htmlHandler(raw: string | MagicString, options: IHtmlHandlerOptions) {
+  const { ctx, isVue } = options
+  const { replaceMap } = ctx
+  const ms: MagicString = typeof raw === 'string' ? new MagicString(raw) : raw
+  const parser = new Parser({
+    onattribute(name, value) {
+      if (name === 'class') {
+        const arr = splitCode(value, {
           splitQuote: false,
         })
-        for (const v of array) {
+        let rawValue = value
+        for (const v of arr) {
           if (replaceMap.has(v)) {
-            attribute.value = attribute.value.replace(makeRegex(v), ctx.classGenerator.generateClassName(v).name)
+            rawValue = rawValue.replace(makeRegex(v), ctx.classGenerator.generateClassName(v).name)
           }
         }
+        ms.update(parser.startIndex + name.length + 2, parser.endIndex - 1, rawValue)
+      }
+      if (isVue) {
+        if (name === ':class') {
+          const { code } = jsHandler(value, {
+            ctx,
+          })
+          ms.update(parser.startIndex + name.length + 2, parser.endIndex - 1, code)
+        }
       }
     },
   })
-  return serialize(fragment)
+  parser.write(ms.original)
+  parser.end()
+  return ms.toString()
 }