fix: requireResolve tailwindcss

Author: sonofmagic

.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"
     }
   ]
-}
+}

packages/tailwindcss-patch/src/core/postcss.ts

@@ -3,6 +3,7 @@ import process from 'node:process'
 import postcss from 'postcss'
 import { lilconfig } from 'lilconfig'
 import createJiti from 'jiti'
+import { requireResolve } from '@/utils'
 
 const jiti = createJiti(__filename)
 
@@ -36,10 +37,12 @@ export async function processTailwindcss(options: { cwd?: string, config?: strin
     }
     config = result.filepath
   }
-
+  const id = requireResolve('tailwindcss', {
+    basedir: options.cwd,
+  })
   return await postcss([
     // eslint-disable-next-line ts/no-var-requires, ts/no-require-imports
-    require('tailwindcss')({
+    require(id)({
       config,
     }),
   ]).process('@tailwind base;@tailwind components;@tailwind utilities;', {

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

@@ -2,7 +2,7 @@ import { dirname } from 'node:path'
 import fs from 'node:fs/promises'
 import { createUnplugin } from 'unplugin'
 import type { OutputAsset } from 'rollup'
-import { Context, cssHandler, htmlHandler, jsHandler, preProcessJs, preProcessRawCode } from '@tailwindcss-mangle/core'
+import { Context, cssHandler, htmlHandler, jsHandler, preProcessJs, preProcessRawCode, vueHandler } from '@tailwindcss-mangle/core'
 import type { ClassMapOutputOptions, MangleUserConfig } from '@tailwindcss-mangle/config'
 import MagicString from 'magic-string'
 import { pluginName } from '@/constants'
@@ -26,17 +26,25 @@ export const unplugin = createUnplugin((options?: MangleUserConfig) => {
     transform(code, id) {
       const s = new MagicString(code)
       // 直接忽略 css  文件，因为此时 tailwindcss 还没有展开
-      return /\.[jt]sx?$/.test(id)
-        ? preProcessJs({
+      if (/\.[jt]sx?$/.test(id)) {
+        return preProcessJs({
           code: s,
           ctx,
           id,
         })
-        : preProcessRawCode({
+      }
+      else if (/\.vue/.test(id)) {
+        return vueHandler(code, {
+          ctx,
+        })
+      }
+      else {
+        return preProcessRawCode({
           code,
           ctx,
           id,
         })
+      }
     },
     vite: {
       generateBundle: {

packages/unplugin-tailwindcss-mangle/test/__snapshots__/webpack.test.ts.snap

@@ -509,11 +509,7 @@ exports[`webpack build > common > warnings 1`] = `[]`;
 
 exports[`webpack build > with plugin > assets 1`] = `
 {
-  "index.js": "(() => {
-  "use strict";
-
-  document.querySelector("#app").innerHTML = '\\n<main class="flex tw-gb tw-zb tw-db tw-ra tw-nc">\\n<div class="tw-sc tw-hc tw-vb tw-db tw-ra tw-pb tw-dc tw-bc">\\n  <p\\n    class="fixed tw-ec tw-kc flex tw-hc tw-va tw-xb tw-pa tw-ja tw-za tw-oc tw-pc tw-ca tw-l tw-v tw-ea tw-tb tw-ub  tw-ab tw-rb tw-wa tw-gc tw-m">\\n    Get started by editing&nbsp;\\n    <code class="tw-pb tw-ob">pages/index.tsx</code>\\n  </p>\\n  <div\\n    class="fixed tw-yb tw-ec flex tw-lc tw-hc tw-qb tw-va tw-ka tw-kb tw-wb tw-qa tw-ua tw-tb tw-sb tw-ub tw-lb">\\n    <a class="tw-w flex tw-ba tw-ic tw-uc tw-n tw-fc"\\n      href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"\\n      target="_blank" rel="noopener noreferrer">\\n      By\\n    </a>\\n  </div>\\n</div>\\n\\n<div\\n  class="relative flex tw-ba tw-na tw-ha tw-ia tw-k tw-u before:bg-gradient-radial tw-da tw-p tw-oa tw-s tw-sa tw-hb tw-la tw-ma tw-o after:bg-gradient-conic tw-y tw-z tw-ta tw-x tw-b tw-d tw-h tw-j tw-g tw-t">\\n  <img class="relative tw-a tw-ib" src="/vite.svg" alt="Next.js Logo"\\n    priority />\\n</div>\\n\\n<div class="tw-jc grid tw-jb tw-cc tw-xa tw-eb">\\n  <a href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"\\n    class="group tw-nb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e"\\n    target="_blank" rel="noopener noreferrer">\\n    <h2 class="tw-mc tw-ac tw-ya">\\n      Docs <span\\n        class="tw-cb tw-r tw-i tw-f">-&gt;</span>\\n    </h2>\\n    <p class="tw-tc tw-fb tw-dc tw-mb">Find in-depth information about Next.js\\n      features and API.</p>\\n  </a>\\n\\n  <a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"\\n    class="group tw-nb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e"\\n    target="_blank" rel="noopener noreferrer">\\n    <h2 class="tw-mc tw-ac tw-ya">\\n      Learn <span\\n        class="tw-cb tw-r tw-i tw-f">-&gt;</span>\\n    </h2>\\n    <p class="tw-tc tw-fb tw-dc tw-mb">Learn about Next.js in an interactive\\n      course with&nbsp;quizzes!</p>\\n  </a>\\n\\n  <a href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"\\n    class="group tw-nb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e"\\n    target="_blank" rel="noopener noreferrer">\\n    <h2 class="tw-mc tw-ac tw-ya">\\n      Templates <span\\n        class="tw-cb tw-r tw-i tw-f">-&gt;</span>\\n    </h2>\\n    <p class="tw-tc tw-fb tw-dc tw-mb">Discover and deploy boilerplate example\\n      Next.js&nbsp;projects.</p>\\n  </a>\\n\\n  <a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"\\n    class="group tw-nb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e"\\n    target="_blank" rel="noopener noreferrer">\\n    <h2 class="tw-mc tw-ac tw-ya">\\n      Deploy <span\\n        class="tw-cb tw-r tw-i tw-f">-&gt;</span>\\n    </h2>\\n    <p class="tw-tc tw-fb tw-dc tw-mb">Instantly deploy your Next.js site to a\\n      shareable URL with Vercel.</p>\\n  </a>\\n</div>\\n</main>\\n';
-})();",
+  "index.js": "(()=>{"use strict";document.querySelector("#app").innerHTML='\\n<main class="flex tw-gb tw-zb tw-db tw-ra tw-nc">\\n<div class="tw-sc tw-hc tw-vb tw-db tw-ra tw-pb tw-dc tw-bc">\\n  <p\\n    class="fixed tw-ec tw-kc flex tw-hc tw-va tw-xb tw-pa tw-ja tw-za tw-oc tw-pc tw-ca tw-l tw-v tw-ea tw-tb tw-ub  tw-ab tw-rb tw-wa tw-gc tw-m">\\n    Get started by editing&nbsp;\\n    <code class="tw-pb tw-ob">pages/index.tsx</code>\\n  </p>\\n  <div\\n    class="fixed tw-yb tw-ec flex tw-lc tw-hc tw-qb tw-va tw-ka tw-kb tw-wb tw-qa tw-ua tw-tb tw-sb tw-ub tw-lb">\\n    <a class="tw-w flex tw-ba tw-ic tw-uc tw-n tw-fc"\\n      href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"\\n      target="_blank" rel="noopener noreferrer">\\n      By\\n    </a>\\n  </div>\\n</div>\\n\\n<div\\n  class="relative flex tw-ba tw-na tw-ha tw-ia tw-k tw-u before:bg-gradient-radial tw-da tw-p tw-oa tw-s tw-sa tw-hb tw-la tw-ma tw-o after:bg-gradient-conic tw-y tw-z tw-ta tw-x tw-b tw-d tw-h tw-j tw-g tw-t">\\n  <img class="relative tw-a tw-ib" src="/vite.svg" alt="Next.js Logo"\\n    priority />\\n</div>\\n\\n<div class="tw-jc grid tw-jb tw-cc tw-xa tw-eb">\\n  <a href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"\\n    class="group tw-nb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e"\\n    target="_blank" rel="noopener noreferrer">\\n    <h2 class="tw-mc tw-ac tw-ya">\\n      Docs <span\\n        class="tw-cb tw-r tw-i tw-f">-&gt;</span>\\n    </h2>\\n    <p class="tw-tc tw-fb tw-dc tw-mb">Find in-depth information about Next.js\\n      features and API.</p>\\n  </a>\\n\\n  <a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"\\n    class="group tw-nb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e"\\n    target="_blank" rel="noopener noreferrer">\\n    <h2 class="tw-mc tw-ac tw-ya">\\n      Learn <span\\n        class="tw-cb tw-r tw-i tw-f">-&gt;</span>\\n    </h2>\\n    <p class="tw-tc tw-fb tw-dc tw-mb">Learn about Next.js in an interactive\\n      course with&nbsp;quizzes!</p>\\n  </a>\\n\\n  <a href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"\\n    class="group tw-nb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e"\\n    target="_blank" rel="noopener noreferrer">\\n    <h2 class="tw-mc tw-ac tw-ya">\\n      Templates <span\\n        class="tw-cb tw-r tw-i tw-f">-&gt;</span>\\n    </h2>\\n    <p class="tw-tc tw-fb tw-dc tw-mb">Discover and deploy boilerplate example\\n      Next.js&nbsp;projects.</p>\\n  </a>\\n\\n  <a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"\\n    class="group tw-nb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e"\\n    target="_blank" rel="noopener noreferrer">\\n    <h2 class="tw-mc tw-ac tw-ya">\\n      Deploy <span\\n        class="tw-cb tw-r tw-i tw-f">-&gt;</span>\\n    </h2>\\n    <p class="tw-tc tw-fb tw-dc tw-mb">Instantly deploy your Next.js site to a\\n      shareable URL with Vercel.</p>\\n  </a>\\n</div>\\n</main>\\n'})();",
   "main.css": "*,::before,::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;