diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b70e4ab..f08fa4ac 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -480,7 +480,7 @@ importers: version: 66.7.0 '@unocss/webpack': specifier: ^66.7.0 - version: 66.7.0(webpack@5.102.1) + version: 66.7.0(@rspack/core@2.2.3)(esbuild@0.28.1)(rolldown@1.0.3)(rollup@4.60.3)(vite@8.0.16)(webpack@5.102.1) typescript: specifier: ^5.9.3 version: 5.9.3 @@ -735,8 +735,8 @@ importers: rsbuild/stylex: dependencies: '@stylexjs/stylex': - specifier: ^0.18.3 - version: 0.18.3 + specifier: ^0.19.1 + version: 0.19.1 react: specifier: ^19.2.7 version: 19.2.7 @@ -750,6 +750,9 @@ importers: '@rsbuild/plugin-react': specifier: ^2.1.0 version: 2.1.0(@rsbuild/core@2.2.0)(@rspack/core@2.2.3) + '@stylexjs/unplugin': + specifier: ^0.19.1 + version: 0.19.1(unplugin@2.3.11) '@types/node': specifier: ^24.12.4 version: 24.12.4 @@ -762,9 +765,9 @@ importers: typescript: specifier: ^5.9.3 version: 5.9.3 - unplugin-stylex: - specifier: ^0.6.3 - version: 0.6.3(@stylexjs/stylex@0.18.3)(rollup@4.60.3) + unplugin: + specifier: ^2.3.11 + version: 2.3.11 rsbuild/svelte: dependencies: @@ -9318,17 +9321,19 @@ packages: storybook: ^10.4.1 vue: ^3.0.0 - '@stylexjs/babel-plugin@0.18.2': - resolution: {integrity: sha512-vmdk1DGiMBuz4hKjXh3KiM+E065OE115GZTNrK9icak0wYAgzpF6K/hExBSwS+yjiH/c3p+6tfN7G9UJPet1gA==} + '@stylexjs/babel-plugin@0.19.1': + resolution: {integrity: sha512-Ig3crX6MuGWDEAx+f89aLxTQUWVeEc2Aco2moIdcObyvo7hZJgU26rxJN3k7geFjhi+5dfna6TNR8iTRK0PQGA==} - '@stylexjs/shared@0.18.2': - resolution: {integrity: sha512-CnHG0MWwtQt9DwP0ogl6C19fnKJtMcJq37vTyrfhlz9GOycdDh28Yza0flKikGUF5lQOmknatopwi1Y9XTxTzQ==} + '@stylexjs/shared@0.19.1': + resolution: {integrity: sha512-oFBtW0NPNLJOT1gLweWRNKrIJHjJMwOmSV7fgd6ewok4fwb/Nh95PEaYGKu+ZONk0nNghjLFfOwiIsxJdvh3TQ==} - '@stylexjs/stylex@0.18.2': - resolution: {integrity: sha512-wXYe9MBlxE9Lz26KbbM9vwKy746sJWe6NdhY+573KMjcEbrswjFU+121b7TeBAc8gcvC5DOUzDOlBrT3N2xsxA==} + '@stylexjs/stylex@0.19.1': + resolution: {integrity: sha512-JwNFm0MOYPqi+M4Ax5Un4ZxfZp4HEAX2sAWetZ88KALFcv1eEiHNJs75oO3V3U7RVWnzfkiM8i9eBowC3hqgUw==} - '@stylexjs/stylex@0.18.3': - resolution: {integrity: sha512-15gDzAJAorOE0yzxaWLNxldW2aqdmCiLG5QcPD8nmVCVqvrWp0Asgv45zk7LtN86WJb/4Ym9eQ6qT5MJW59tWQ==} + '@stylexjs/unplugin@0.19.1': + resolution: {integrity: sha512-MJz/IPrFe3hSHbZtjbxaYd3kLgS718/NFBEY/Mf+njteJKLdY7bHHfVka3051LCYy9fKfyZapGCmUpibraHqmQ==} + peerDependencies: + unplugin: ^2.3.11 '@sveltejs/acorn-typescript@1.0.10': resolution: {integrity: sha512-4WfKk68eTih+MiJD4fSbxN7E8kVBmTMPWHUPYjvl2N0rMs53YLTT8/YjKU5Dtnz5LqDjl7LEw4U7lXR2W3J5WA==} @@ -16904,12 +16909,6 @@ packages: '@vueuse/core': optional: true - unplugin-stylex@0.6.3: - resolution: {integrity: sha512-K2jnmZHN9W6nf7WsCQVscLUvfuguYhYFEIt2UK+ezxxJiRKAIMGSE1Wf74dUTAxvaPswpaDpBr2aB1MxYYYrkw==} - engines: {node: ^20.19.0 || >=22.12.0} - peerDependencies: - '@stylexjs/stylex': 0.x - unplugin-utils@0.3.1: resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==} engines: {node: '>=20.19.0'} @@ -16928,10 +16927,6 @@ packages: resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==} engines: {node: '>=18.12.0'} - unplugin@3.0.0: - resolution: {integrity: sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==} - engines: {node: ^20.19.0 || >=22.12.0} - unplugin@3.3.0: resolution: {integrity: sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==} engines: {node: ^20.19.0 || >=22.12.0} @@ -19635,7 +19630,7 @@ snapshots: '@types/estree-jsx': 1.0.4 '@types/hast': 3.0.4 '@types/mdx': 2.0.11 - acorn: 8.16.0 + acorn: 8.18.0 collapse-white-space: 2.1.0 devlop: 1.1.0 estree-util-is-identifier-name: 3.0.0 @@ -19644,7 +19639,7 @@ snapshots: hast-util-to-jsx-runtime: 2.3.6 markdown-extensions: 2.0.0 recma-build-jsx: 1.0.0 - recma-jsx: 1.0.1(acorn@8.16.0) + recma-jsx: 1.0.1(acorn@8.18.0) recma-stringify: 1.0.0 rehype-recma: 1.0.0 remark-mdx: 3.1.1 @@ -20728,7 +20723,7 @@ snapshots: '@eyhn/msgpack-stream': 2.8.4 '@perfsee/jsonr': 1.14.2 '@perfsee/utils': 1.14.2 - acorn: 8.16.0 + acorn: 8.18.0 acorn-walk: 8.3.5 htmlparser2: 8.0.2 lodash: 4.18.1 @@ -20896,7 +20891,7 @@ snapshots: dependencies: '@types/estree': 1.0.9 estree-walker: 2.0.2 - picomatch: 4.0.4 + picomatch: 4.0.7 optionalDependencies: rollup: 4.60.3 @@ -22495,32 +22490,39 @@ snapshots: vue: 3.5.35(typescript@5.9.3) vue-component-type-helpers: 3.3.2 - '@stylexjs/babel-plugin@0.18.2': + '@stylexjs/babel-plugin@0.19.1': dependencies: '@babel/core': 7.29.7 '@babel/helper-module-imports': 7.29.7 - '@babel/traverse': 7.29.7 - '@babel/types': 7.29.7 + '@babel/traverse': 7.29.8 + '@babel/types': 7.29.8 '@dual-bundle/import-meta-resolve': 4.1.0 - '@stylexjs/shared': 0.18.2 - '@stylexjs/stylex': 0.18.2 + '@stylexjs/shared': 0.19.1 + '@stylexjs/stylex': 0.19.1 postcss-value-parser: 4.2.0 transitivePeerDependencies: - supports-color - '@stylexjs/shared@0.18.2': {} + '@stylexjs/shared@0.19.1': {} - '@stylexjs/stylex@0.18.2': + '@stylexjs/stylex@0.19.1': dependencies: css-mediaquery: 0.1.2 invariant: 2.2.4 styleq: 0.2.1 - '@stylexjs/stylex@0.18.3': + '@stylexjs/unplugin@0.19.1(unplugin@2.3.11)': dependencies: - css-mediaquery: 0.1.2 - invariant: 2.2.4 - styleq: 0.2.1 + '@babel/core': 7.29.7 + '@babel/plugin-syntax-flow': 7.28.6(@babel/core@7.29.7) + '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7) + '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7) + '@stylexjs/babel-plugin': 0.19.1 + browserslist: 4.29.3 + lightningcss: 1.33.0 + unplugin: 2.3.11 + transitivePeerDependencies: + - supports-color '@sveltejs/acorn-typescript@1.0.10(acorn@8.16.0)': dependencies: @@ -23051,7 +23053,7 @@ snapshots: exsolve: 1.1.1 lightningcss: 1.33.0 pathe: 2.0.3 - picomatch: 4.0.5 + picomatch: 4.0.7 seroval: 1.6.2 source-map: 0.7.6 srvx: 0.11.16 @@ -23543,7 +23545,7 @@ snapshots: '@unocss/core': 66.7.0 magic-string: 0.30.21 - '@unocss/webpack@66.7.0(webpack@5.102.1)': + '@unocss/webpack@66.7.0(@rspack/core@2.2.3)(esbuild@0.28.1)(rolldown@1.0.3)(rollup@4.60.3)(vite@8.0.16)(webpack@5.102.1)': dependencies: '@jridgewell/remapping': 2.3.5 '@unocss/config': 66.7.0 @@ -23552,10 +23554,19 @@ snapshots: magic-string: 0.30.21 pathe: 2.0.3 tinyglobby: 0.2.17 - unplugin: 3.0.0 + unplugin: 3.3.0(@rspack/core@2.2.3)(esbuild@0.28.1)(rolldown@1.0.3)(rollup@4.60.3)(vite@8.0.16)(webpack@5.102.1) unplugin-utils: 0.3.1 - webpack: 5.102.1 + webpack: 5.102.1(esbuild@0.28.1) webpack-sources: 3.4.1 + transitivePeerDependencies: + - '@farmfe/core' + - '@rspack/core' + - bun-types-no-globals + - esbuild + - rolldown + - rollup + - unloader + - vite '@vanilla-extract/babel-plugin-debug-ids@1.2.2': dependencies: @@ -23729,7 +23740,7 @@ snapshots: alien-signals: 3.2.1 muggle-string: 0.4.1 path-browserify: 1.0.1 - picomatch: 4.0.4 + picomatch: 4.0.7 '@vue/reactivity@3.5.35': dependencies: @@ -23931,7 +23942,7 @@ snapshots: acorn-walk@8.3.5: dependencies: - acorn: 8.16.0 + acorn: 8.18.0 acorn@7.4.1: {} @@ -25493,7 +25504,7 @@ snapshots: esast-util-from-js@2.0.1: dependencies: '@types/estree-jsx': 1.0.4 - acorn: 8.16.0 + acorn: 8.18.0 esast-util-from-estree: 2.0.0 vfile-message: 4.0.2 @@ -27130,7 +27141,7 @@ snapshots: chalk: 4.1.2 ci-info: 4.4.0 graceful-fs: 4.2.11 - picomatch: 4.0.5 + picomatch: 4.0.7 jest-worker@27.5.1: dependencies: @@ -28570,7 +28581,7 @@ snapshots: mlly@1.8.2: dependencies: - acorn: 8.16.0 + acorn: 8.18.0 pathe: 2.0.3 pkg-types: 1.3.1 ufo: 1.6.3 @@ -29125,8 +29136,7 @@ snapshots: picomatch@4.0.5: {} - picomatch@4.0.7: - optional: true + picomatch@4.0.7: {} pify@2.3.0: {} @@ -29876,10 +29886,10 @@ snapshots: estree-util-build-jsx: 3.0.1 vfile: 6.0.1 - recma-jsx@1.0.1(acorn@8.16.0): + recma-jsx@1.0.1(acorn@8.18.0): dependencies: - acorn: 8.16.0 - acorn-jsx: 5.3.2(acorn@8.16.0) + acorn: 8.18.0 + acorn-jsx: 5.3.2(acorn@8.18.0) estree-util-to-js: 2.0.0 recma-parse: 1.0.0 recma-stringify: 1.0.0 @@ -31520,7 +31530,6 @@ snapshots: webpack: 5.102.1(esbuild@0.28.1) optionalDependencies: esbuild: 0.28.1 - optional: true terser-webpack-plugin@5.6.1(lightningcss@1.33.0)(webpack@5.102.1): dependencies: @@ -31563,7 +31572,7 @@ snapshots: terser@5.37.0: dependencies: '@jridgewell/source-map': 0.3.5 - acorn: 8.16.0 + acorn: 8.18.0 commander: 2.20.3 source-map-support: 0.5.21 @@ -31907,14 +31916,14 @@ snapshots: unimport@5.7.0: dependencies: - acorn: 8.16.0 + acorn: 8.18.0 escape-string-regexp: 5.0.0 estree-walker: 3.0.3 local-pkg: 1.1.2 magic-string: 0.30.21 mlly: 1.8.2 pathe: 2.0.3 - picomatch: 4.0.4 + picomatch: 4.0.7 pkg-types: 2.3.0 scule: 1.3.0 strip-literal: 3.1.0 @@ -32012,20 +32021,6 @@ snapshots: optionalDependencies: '@vueuse/core': 14.3.0(vue@3.5.35) - unplugin-stylex@0.6.3(@stylexjs/stylex@0.18.3)(rollup@4.60.3): - dependencies: - '@babel/core': 7.29.7 - '@babel/plugin-syntax-flow': 7.28.6(@babel/core@7.29.7) - '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7) - '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7) - '@rollup/pluginutils': 5.3.0(rollup@4.60.3) - '@stylexjs/babel-plugin': 0.18.2 - '@stylexjs/stylex': 0.18.3 - unplugin: 3.0.0 - transitivePeerDependencies: - - rollup - - supports-color - unplugin-utils@0.3.1: dependencies: pathe: 2.0.3 @@ -32047,20 +32042,14 @@ snapshots: unplugin@2.3.11: dependencies: '@jridgewell/remapping': 2.3.5 - acorn: 8.16.0 - picomatch: 4.0.4 - webpack-virtual-modules: 0.6.2 - - unplugin@3.0.0: - dependencies: - '@jridgewell/remapping': 2.3.5 - picomatch: 4.0.4 + acorn: 8.18.0 + picomatch: 4.0.7 webpack-virtual-modules: 0.6.2 unplugin@3.3.0(@rspack/core@2.2.3)(esbuild@0.28.1)(rolldown@1.0.3)(rollup@4.60.3)(vite@8.0.16)(webpack@5.102.1): dependencies: '@jridgewell/remapping': 2.3.5 - picomatch: 4.0.5 + picomatch: 4.0.4 webpack-virtual-modules: 0.6.2 optionalDependencies: '@rspack/core': 2.2.3(@module-federation/runtime-tools@2.9.0)(@swc/helpers@0.5.23) @@ -32493,7 +32482,6 @@ snapshots: - lightningcss - postcss - uglify-js - optional: true webpack@5.102.1(esbuild@0.28.1)(lightningcss@1.33.0): dependencies: diff --git a/rsbuild/stylex/README.md b/rsbuild/stylex/README.md index 37b1dd33..a4ccee83 100644 --- a/rsbuild/stylex/README.md +++ b/rsbuild/stylex/README.md @@ -1,4 +1,10 @@ -# Rsbuild Project +# Rsbuild + StyleX + +Minimal example of using [StyleX](https://stylexjs.com/) with Rsbuild via the official [`@stylexjs/unplugin`](https://stylexjs.com/docs/learn/installation/rspack/) adapter. + +The plugin compiles StyleX at build time and appends the generated CSS to the stylesheet emitted by Rsbuild's `CssExtractRspackPlugin` (fed by `src/index.css`). StyleX styles therefore stay in the normal CSS asset pipeline with content-hashed filenames, instead of a separate hardcoded `/stylex.css` link. + +This example uses `stylex.webpack()` (not `stylex.rspack()`) because `@stylexjs/unplugin` currently attaches CSS injection through the webpack-compatible hook; Rspack still runs that hook for plugins registered via `tools.rspack.plugins`. ## Setup diff --git a/rsbuild/stylex/package.json b/rsbuild/stylex/package.json index 3aa032d1..c3052d76 100644 --- a/rsbuild/stylex/package.json +++ b/rsbuild/stylex/package.json @@ -9,17 +9,18 @@ "preview": "rsbuild preview" }, "dependencies": { - "@stylexjs/stylex": "^0.18.3", + "@stylexjs/stylex": "^0.19.1", "react": "^19.2.7", "react-dom": "^19.2.7" }, "devDependencies": { "@rsbuild/core": "2.2.0", "@rsbuild/plugin-react": "^2.1.0", + "@stylexjs/unplugin": "^0.19.1", "@types/node": "^24.12.4", "@types/react": "^19.2.15", "@types/react-dom": "^19.2.3", "typescript": "^5.9.3", - "unplugin-stylex": "^0.6.3" + "unplugin": "^2.3.11" } } diff --git a/rsbuild/stylex/rsbuild.config.ts b/rsbuild/stylex/rsbuild.config.ts index de95fb71..a54d0883 100644 --- a/rsbuild/stylex/rsbuild.config.ts +++ b/rsbuild/stylex/rsbuild.config.ts @@ -1,12 +1,23 @@ import { defineConfig } from '@rsbuild/core'; import { pluginReact } from '@rsbuild/plugin-react'; -import stylexPlugin from 'unplugin-stylex/rspack'; +import stylex from '@stylexjs/unplugin'; export default defineConfig({ plugins: [pluginReact()], tools: { rspack: { - plugins: [stylexPlugin()], + plugins: [ + // Official StyleX plugin: compiles StyleX and appends CSS into the + // stylesheet emitted by CssExtractRspackPlugin (used by Rsbuild). + // See https://stylexjs.com/docs/learn/installation/rspack/ + // + // Prefer the webpack adapter here: @stylexjs/unplugin currently attaches + // CSS injection via the webpack() hook, which Rspack still invokes for + // webpack-compatible plugins. The rspack() entry only runs transform. + stylex.webpack({ + useCSSLayers: true, + }), + ], }, }, });