From f789203882f60c1e138b8f6218da33a6c0f1f9bb Mon Sep 17 00:00:00 2001 From: Qingyu Wang Date: Sun, 29 Mar 2026 17:38:09 +0800 Subject: [PATCH 1/2] feat: add vue support --- package.json | 4 +- pnpm-lock.yaml | 238 ++++++++++++++++++++++++++++++++- src/index.ts | 2 +- test/vue-support/index.html | 7 + test/vue-support/index.test.ts | 31 +++++ test/vue-support/src/App.vue | 3 + test/vue-support/src/index.js | 5 + 7 files changed, 286 insertions(+), 4 deletions(-) create mode 100644 test/vue-support/index.html create mode 100644 test/vue-support/index.test.ts create mode 100644 test/vue-support/src/App.vue create mode 100644 test/vue-support/src/index.js diff --git a/package.json b/package.json index 102d995..264e5ef 100644 --- a/package.json +++ b/package.json @@ -40,13 +40,15 @@ "@biomejs/biome": "^1.9.4", "@playwright/test": "^1.58.2", "@rsbuild/core": "2.0.0-beta.4", + "@rsbuild/plugin-vue": "^1.2.7", "@rsdoctor/rspack-plugin": "^1.5.2", "@rslib/core": "^0.19.5", "@types/node": "^22.19.11", "postcss": "^8.5.6", "simple-git-hooks": "^2.13.1", "tailwindcss": "^4.2.1", - "typescript": "^5.9.3" + "typescript": "^5.9.3", + "vue": "^3.5.31" }, "peerDependencies": { "@rsbuild/core": "^1.1.0 || ^2.0.0-0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 583f4ab..599ef17 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,6 +37,9 @@ importers: '@rsbuild/core': specifier: 2.0.0-beta.4 version: 2.0.0-beta.4(core-js@3.47.0) + '@rsbuild/plugin-vue': + specifier: ^1.2.7 + version: 1.2.7(@rsbuild/core@2.0.0-beta.4(core-js@3.47.0))(@rspack/core@1.7.6(@swc/helpers@0.5.18))(vue@3.5.31(typescript@5.9.3)) '@rsdoctor/rspack-plugin': specifier: ^1.5.2 version: 1.5.2(@rsbuild/core@2.0.0-beta.4(core-js@3.47.0))(@rspack/core@1.7.6(@swc/helpers@0.5.18))(webpack@5.105.2) @@ -58,6 +61,9 @@ importers: typescript: specifier: ^5.9.3 version: 5.9.3 + vue: + specifier: ^3.5.31 + version: 3.5.31(typescript@5.9.3) playground: devDependencies: @@ -140,10 +146,23 @@ packages: resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==} engines: {node: '>=6.9.0'} + '@babel/helper-string-parser@7.27.1': + resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} + engines: {node: '>=6.9.0'} + '@babel/helper-validator-identifier@7.28.5': resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==} engines: {node: '>=6.9.0'} + '@babel/parser@7.29.2': + resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==} + engines: {node: '>=6.0.0'} + hasBin: true + + '@babel/types@7.29.0': + resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==} + engines: {node: '>=6.9.0'} + '@biomejs/biome@1.9.4': resolution: {integrity: sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==} engines: {node: '>=14.21.3'} @@ -278,6 +297,14 @@ packages: '@rsbuild/core': optional: true + '@rsbuild/plugin-vue@1.2.7': + resolution: {integrity: sha512-epDSChyeR4U+gwq2vfTARV9hbfrmdFTdmhBWIcv7MFyckn3yxJhweJVwdx14Wf3d8s1p4XZzDpqmphDyvX443Q==} + peerDependencies: + '@rsbuild/core': ^1.0.0 || ^2.0.0-0 + peerDependenciesMeta: + '@rsbuild/core': + optional: true + '@rsdoctor/client@1.5.2': resolution: {integrity: sha512-fufNlCiA4+MDj3ZW8ssEdRI9mwawdqSSYvqOOK01+NNIg3TuQNgEdnF/QVGnkxKLgVXJCtUdOKaZtUq1bwnJVQ==} @@ -589,6 +616,35 @@ packages: '@types/tapable@2.2.7': resolution: {integrity: sha512-D6QzACV9vNX3r8HQQNTOnpG+Bv1rko+yEA82wKs3O9CQ5+XW7HI7TED17/UE7+5dIxyxZIWTxKbsBeF6uKFCwA==} + '@vue/compiler-core@3.5.31': + resolution: {integrity: sha512-k/ueL14aNIEy5Onf0OVzR8kiqF/WThgLdFhxwa4e/KF/0qe38IwIdofoSWBTvvxQOesaz6riAFAUaYjoF9fLLQ==} + + '@vue/compiler-dom@3.5.31': + resolution: {integrity: sha512-BMY/ozS/xxjYqRFL+tKdRpATJYDTTgWSo0+AJvJNg4ig+Hgb0dOsHPXvloHQ5hmlivUqw1Yt2pPIqp4e0v1GUw==} + + '@vue/compiler-sfc@3.5.31': + resolution: {integrity: sha512-M8wpPgR9UJ8MiRGjppvx9uWJfLV7A/T+/rL8s/y3QG3u0c2/YZgff3d6SuimKRIhcYnWg5fTfDMlz2E6seUW8Q==} + + '@vue/compiler-ssr@3.5.31': + resolution: {integrity: sha512-h0xIMxrt/LHOvJKMri+vdYT92BrK3HFLtDqq9Pr/lVVfE4IyKZKvWf0vJFW10Yr6nX02OR4MkJwI0c1HDa1hog==} + + '@vue/reactivity@3.5.31': + resolution: {integrity: sha512-DtKXxk9E/KuVvt8VxWu+6Luc9I9ETNcqR1T1oW1gf02nXaZ1kuAx58oVu7uX9XxJR0iJCro6fqBLw9oSBELo5g==} + + '@vue/runtime-core@3.5.31': + resolution: {integrity: sha512-AZPmIHXEAyhpkmN7aWlqjSfYynmkWlluDNPHMCZKFHH+lLtxP/30UJmoVhXmbDoP1Ng0jG0fyY2zCj1PnSSA6Q==} + + '@vue/runtime-dom@3.5.31': + resolution: {integrity: sha512-xQJsNRmGPeDCJq/u813tyonNgWBFjzfVkBwDREdEWndBnGdHLHgkwNBQxLtg4zDrzKTEcnikUy1UUNecb3lJ6g==} + + '@vue/server-renderer@3.5.31': + resolution: {integrity: sha512-GJuwRvMcdZX/CriUnyIIOGkx3rMV3H6sOu0JhdKbduaeCji6zb60iOGMY7tFoN24NfsUYoFBhshZtGxGpxO4iA==} + peerDependencies: + vue: 3.5.31 + + '@vue/shared@3.5.31': + resolution: {integrity: sha512-nBxuiuS9Lj5bPkPbWogPUnjxxWpkRniX7e5UBQDWl6Fsf4roq9wwV+cR7ezQ4zXswNvPIlsdj1slcLB7XCsRAw==} + '@webassemblyjs/ast@1.14.1': resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==} @@ -684,6 +740,10 @@ packages: resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} engines: {node: '>=8'} + ansi-styles@4.3.0: + resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} + engines: {node: '>=8'} + base64id@2.0.0: resolution: {integrity: sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==} engines: {node: ^4.5.0 || >= 5.9} @@ -711,10 +771,21 @@ packages: caniuse-lite@1.0.30001774: resolution: {integrity: sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==} + chalk@4.1.2: + resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} + engines: {node: '>=10'} + chrome-trace-event@1.0.4: resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==} engines: {node: '>=6.0'} + color-convert@2.0.1: + resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} + engines: {node: '>=7.0.0'} + + color-name@1.1.4: + resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + commander@2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} @@ -729,6 +800,9 @@ packages: resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==} engines: {node: '>= 0.10'} + csstype@3.2.3: + resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} + debug@4.3.7: resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==} engines: {node: '>=6.0'} @@ -795,6 +869,10 @@ packages: resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} engines: {node: '>=0.12'} + entities@7.0.1: + resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==} + engines: {node: '>=0.12'} + envinfo@7.21.0: resolution: {integrity: sha512-Lw7I8Zp5YKHFCXL7+Dz95g4CcbMEpgvqZNNq3AmlT5XAV6CgAAk6gyAMqn2zjw08K9BHfcNuKrMiCPLByGafow==} engines: {node: '>=4'} @@ -826,6 +904,9 @@ packages: resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} engines: {node: '>=4.0'} + estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + events@3.3.0: resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==} engines: {node: '>=0.8.x'} @@ -1027,6 +1108,10 @@ packages: resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==} engines: {node: ^10 || ^12 || >=14} + postcss@8.5.8: + resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==} + engines: {node: ^10 || ^12 || >=14} + randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} @@ -1053,6 +1138,20 @@ packages: rslog@1.3.2: resolution: {integrity: sha512-1YyYXBvN0a2b1MSIDLwDTqqgjDzRKxUg/S/+KO6EAgbtZW1B3fdLHAMhEEtvk1patJYMqcRvlp3HQwnxj7AdGQ==} + rspack-vue-loader@17.5.0: + resolution: {integrity: sha512-hJrL2+jytfTs6ORHBOKTh5lU7BVZvmv7afELuQfyEpGC1ll7MKj1BxlgAIbhd6pZwoEwfdH79Lewtwe4VOlfCQ==} + peerDependencies: + '@rspack/core': ^1.0.0 || ^2.0.0-0 + '@vue/compiler-sfc': '*' + vue: '*' + peerDependenciesMeta: + '@rspack/core': + optional: true + '@vue/compiler-sfc': + optional: true + vue: + optional: true + safe-buffer@5.2.1: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} @@ -1105,6 +1204,10 @@ packages: resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} engines: {node: '>=8'} + supports-color@7.2.0: + resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} + engines: {node: '>=8'} + supports-color@8.1.1: resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==} engines: {node: '>=10'} @@ -1170,6 +1273,14 @@ packages: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} + vue@3.5.31: + resolution: {integrity: sha512-iV/sU9SzOlmA/0tygSmjkEN6Jbs3nPoIPFhCMLD2STrjgOU8DX7ZtzMhg4ahVwf5Rp9KoFzcXeB1ZrVbLBp5/Q==} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + watchpack@2.5.1: resolution: {integrity: sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==} engines: {node: '>=10.13.0'} @@ -1249,8 +1360,19 @@ snapshots: js-tokens: 4.0.0 picocolors: 1.1.1 + '@babel/helper-string-parser@7.27.1': {} + '@babel/helper-validator-identifier@7.28.5': {} + '@babel/parser@7.29.2': + dependencies: + '@babel/types': 7.29.0 + + '@babel/types@7.29.0': + dependencies: + '@babel/helper-string-parser': 7.27.1 + '@babel/helper-validator-identifier': 7.28.5 + '@biomejs/biome@1.9.4': optionalDependencies: '@biomejs/cli-darwin-arm64': 1.9.4 @@ -1390,6 +1512,16 @@ snapshots: optionalDependencies: '@rsbuild/core': 2.0.0-beta.4(core-js@3.47.0) + '@rsbuild/plugin-vue@1.2.7(@rsbuild/core@2.0.0-beta.4(core-js@3.47.0))(@rspack/core@1.7.6(@swc/helpers@0.5.18))(vue@3.5.31(typescript@5.9.3))': + dependencies: + rspack-vue-loader: 17.5.0(@rspack/core@1.7.6(@swc/helpers@0.5.18))(vue@3.5.31(typescript@5.9.3)) + optionalDependencies: + '@rsbuild/core': 2.0.0-beta.4(core-js@3.47.0) + transitivePeerDependencies: + - '@rspack/core' + - '@vue/compiler-sfc' + - vue + '@rsdoctor/client@1.5.2': {} '@rsdoctor/core@1.5.2(@rsbuild/core@2.0.0-beta.4(core-js@3.47.0))(@rspack/core@1.7.6(@swc/helpers@0.5.18))(webpack@5.105.2)': @@ -1719,6 +1851,60 @@ snapshots: dependencies: tapable: 2.3.0 + '@vue/compiler-core@3.5.31': + dependencies: + '@babel/parser': 7.29.2 + '@vue/shared': 3.5.31 + entities: 7.0.1 + estree-walker: 2.0.2 + source-map-js: 1.2.1 + + '@vue/compiler-dom@3.5.31': + dependencies: + '@vue/compiler-core': 3.5.31 + '@vue/shared': 3.5.31 + + '@vue/compiler-sfc@3.5.31': + dependencies: + '@babel/parser': 7.29.2 + '@vue/compiler-core': 3.5.31 + '@vue/compiler-dom': 3.5.31 + '@vue/compiler-ssr': 3.5.31 + '@vue/shared': 3.5.31 + estree-walker: 2.0.2 + magic-string: 0.30.21 + postcss: 8.5.8 + source-map-js: 1.2.1 + + '@vue/compiler-ssr@3.5.31': + dependencies: + '@vue/compiler-dom': 3.5.31 + '@vue/shared': 3.5.31 + + '@vue/reactivity@3.5.31': + dependencies: + '@vue/shared': 3.5.31 + + '@vue/runtime-core@3.5.31': + dependencies: + '@vue/reactivity': 3.5.31 + '@vue/shared': 3.5.31 + + '@vue/runtime-dom@3.5.31': + dependencies: + '@vue/reactivity': 3.5.31 + '@vue/runtime-core': 3.5.31 + '@vue/shared': 3.5.31 + csstype: 3.2.3 + + '@vue/server-renderer@3.5.31(vue@3.5.31(typescript@5.9.3))': + dependencies: + '@vue/compiler-ssr': 3.5.31 + '@vue/shared': 3.5.31 + vue: 3.5.31(typescript@5.9.3) + + '@vue/shared@3.5.31': {} + '@webassemblyjs/ast@1.14.1': dependencies: '@webassemblyjs/helper-numbers': 1.13.2 @@ -1857,6 +2043,10 @@ snapshots: ansi-regex@5.0.1: {} + ansi-styles@4.3.0: + dependencies: + color-convert: 2.0.1 + base64id@2.0.0: {} baseline-browser-mapping@2.10.0: {} @@ -1880,9 +2070,20 @@ snapshots: caniuse-lite@1.0.30001774: {} + chalk@4.1.2: + dependencies: + ansi-styles: 4.3.0 + supports-color: 7.2.0 + chrome-trace-event@1.0.4: optional: true + color-convert@2.0.1: + dependencies: + color-name: 1.1.4 + + color-name@1.1.4: {} + commander@2.20.3: optional: true @@ -1895,6 +2096,8 @@ snapshots: object-assign: 4.1.1 vary: 1.1.2 + csstype@3.2.3: {} + debug@4.3.7: dependencies: ms: 2.1.3 @@ -1961,6 +2164,8 @@ snapshots: entities@6.0.1: {} + entities@7.0.1: {} + envinfo@7.21.0: {} es-module-lexer@2.0.0: @@ -1987,6 +2192,8 @@ snapshots: estraverse@5.3.0: optional: true + estree-walker@2.0.2: {} + events@3.3.0: optional: true @@ -2014,8 +2221,7 @@ snapshots: graceful-fs@4.2.11: {} - has-flag@4.0.0: - optional: true + has-flag@4.0.0: {} htmlparser2@10.0.0: dependencies: @@ -2147,6 +2353,12 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 + postcss@8.5.8: + dependencies: + nanoid: 3.3.11 + picocolors: 1.1.1 + source-map-js: 1.2.1 + randombytes@2.1.0: dependencies: safe-buffer: 5.2.1 @@ -2164,6 +2376,14 @@ snapshots: rslog@1.3.2: {} + rspack-vue-loader@17.5.0(@rspack/core@1.7.6(@swc/helpers@0.5.18))(vue@3.5.31(typescript@5.9.3)): + dependencies: + '@rspack/lite-tapable': 1.1.0 + chalk: 4.1.2 + optionalDependencies: + '@rspack/core': 1.7.6(@swc/helpers@0.5.18) + vue: 3.5.31(typescript@5.9.3) + safe-buffer@5.2.1: optional: true @@ -2233,6 +2453,10 @@ snapshots: dependencies: ansi-regex: 5.0.1 + supports-color@7.2.0: + dependencies: + has-flag: 4.0.0 + supports-color@8.1.1: dependencies: has-flag: 4.0.0 @@ -2280,6 +2504,16 @@ snapshots: vary@1.1.2: {} + vue@3.5.31(typescript@5.9.3): + dependencies: + '@vue/compiler-dom': 3.5.31 + '@vue/compiler-sfc': 3.5.31 + '@vue/runtime-dom': 3.5.31 + '@vue/server-renderer': 3.5.31(vue@3.5.31(typescript@5.9.3)) + '@vue/shared': 3.5.31 + optionalDependencies: + typescript: 5.9.3 + watchpack@2.5.1: dependencies: glob-to-regexp: 0.4.1 diff --git a/src/index.ts b/src/index.ts index 7bbba99..d92413f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -171,7 +171,7 @@ export const pluginTailwindCSS = ( // 1. Inject api.transform( { - test: { and: [/\.(jsx?|tsx?)$/, { not: [/node_modules/] }] }, + test: { and: [/\.(jsx?|tsx?|vue)$/, { not: [/node_modules/] }] }, }, ({ code, resourcePath }) => { const params = new URLSearchParams({ diff --git a/test/vue-support/index.html b/test/vue-support/index.html new file mode 100644 index 0000000..3787fd9 --- /dev/null +++ b/test/vue-support/index.html @@ -0,0 +1,7 @@ + + + + +
+ + diff --git a/test/vue-support/index.test.ts b/test/vue-support/index.test.ts new file mode 100644 index 0000000..ef3c530 --- /dev/null +++ b/test/vue-support/index.test.ts @@ -0,0 +1,31 @@ +import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { expect, test } from '@playwright/test'; +import { createRsbuild } from '@rsbuild/core'; +import { pluginVue } from '@rsbuild/plugin-vue'; +import { pluginTailwindCSS } from '../../src'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +test('should build with vue', async ({ page }) => { + const rsbuild = await createRsbuild({ + cwd: __dirname, + rsbuildConfig: { + plugins: [pluginVue(), pluginTailwindCSS()], + }, + }); + + await rsbuild.build(); + const { server, urls } = await rsbuild.preview(); + await page.goto(urls[0]); + + const locator = page.locator('#test'); + await expect(locator).toHaveCSS('display', 'flex'); + // Tailwind v4 uses oklch colors by default + const color = await locator.evaluate( + (el) => window.getComputedStyle(el).color, + ); + expect(color).toMatch(/lab\(|oklch\(|color\(|rgb\(/); + + await server.close(); +}); diff --git a/test/vue-support/src/App.vue b/test/vue-support/src/App.vue new file mode 100644 index 0000000..18949b7 --- /dev/null +++ b/test/vue-support/src/App.vue @@ -0,0 +1,3 @@ + diff --git a/test/vue-support/src/index.js b/test/vue-support/src/index.js new file mode 100644 index 0000000..2b3aee1 --- /dev/null +++ b/test/vue-support/src/index.js @@ -0,0 +1,5 @@ +import { createApp } from 'vue'; +import App from './App.vue'; + +const app = createApp(App); +app.mount('#root'); From d3deb49cc8afe9102fabfb5cf42b10c749416352 Mon Sep 17 00:00:00 2001 From: Qingyu Wang Date: Sun, 29 Mar 2026 17:48:31 +0800 Subject: [PATCH 2/2] fix: exclude vue subresource requests from transform --- src/index.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index d92413f..82ddabe 100644 --- a/src/index.ts +++ b/src/index.ts @@ -171,9 +171,19 @@ export const pluginTailwindCSS = ( // 1. Inject api.transform( { - test: { and: [/\.(jsx?|tsx?|vue)$/, { not: [/node_modules/] }] }, + test: { + and: [ + /\.(jsx?|tsx?|vue)$/, + { not: [/node_modules/] }, + ], + }, }, - ({ code, resourcePath }) => { + ({ code, resourcePath, resourceQuery }) => { + // Exclude Vue subresource requests + if (resourcePath.endsWith('.vue') && resourceQuery) { + return code; + } + const params = new URLSearchParams({ path: resourcePath, });