diff --git a/tools/modern-tests/apps/react-router/imports/ui/App.jsx b/tools/modern-tests/apps/react-router/imports/ui/App.jsx index 0338de28bf..c317515faa 100644 --- a/tools/modern-tests/apps/react-router/imports/ui/App.jsx +++ b/tools/modern-tests/apps/react-router/imports/ui/App.jsx @@ -5,6 +5,7 @@ import { Route, createRoutesFromElements, } from "react-router-dom"; +import "./Global.less"; // Dynamically import components const Home = lazy(() => diff --git a/tools/modern-tests/apps/react-router/imports/ui/Global.less b/tools/modern-tests/apps/react-router/imports/ui/Global.less new file mode 100644 index 0000000000..2c0c9d93e3 --- /dev/null +++ b/tools/modern-tests/apps/react-router/imports/ui/Global.less @@ -0,0 +1,3 @@ +body { + white-space: break-spaces; +} diff --git a/tools/modern-tests/apps/react-router/package.json b/tools/modern-tests/apps/react-router/package.json index be63600f23..79eca0ff4b 100644 --- a/tools/modern-tests/apps/react-router/package.json +++ b/tools/modern-tests/apps/react-router/package.json @@ -17,12 +17,14 @@ "react-router-dom": "^7.0.0" }, "devDependencies": { - "playwright": "^1.54.2", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/preset-env": "^7.23.5", "@babel/preset-react": "^7.23.3", "babel-plugin-react-compiler": "^19.1.0-rc.2", - "babel-loader": "^9.1.3" + "babel-loader": "^9.1.3", + "less": "^4.4.0", + "less-loader": "^12.3.0", + "playwright": "^1.54.2" }, "meteor": { "mainModule": { diff --git a/tools/modern-tests/apps/react-router/rspack.config.js b/tools/modern-tests/apps/react-router/rspack.config.js index cff469024d..f500795704 100644 --- a/tools/modern-tests/apps/react-router/rspack.config.js +++ b/tools/modern-tests/apps/react-router/rspack.config.js @@ -25,6 +25,15 @@ export default defineConfig(Meteor => { ], type: 'javascript/auto', }, + { + test: /\.less$/, + use: [ + { + loader: 'less-loader', + }, + ], + type: 'css/auto', + }, ], }, }; diff --git a/tools/modern-tests/react-router.test.js b/tools/modern-tests/react-router.test.js index b3235514b9..905949f6f6 100644 --- a/tools/modern-tests/react-router.test.js +++ b/tools/modern-tests/react-router.test.js @@ -9,7 +9,7 @@ import { import { testMeteorBundler, testMeteorRspackBundler } from './test-helpers'; import fs from 'fs-extra'; import path from 'path'; -import { assertMeteorReactApp } from "./assertions"; +import { assertBodyStyles, assertMeteorReactApp } from "./assertions"; describe('ReactRouter App Bundling /', () => { describe('Meteor+Rspack Bundler /', testMeteorRspackBundler({ @@ -25,6 +25,10 @@ describe('ReactRouter App Bundling /', () => { await waitForReactEnvs(result.outputLines, { isJsxEnabled: true }); await waitForMeteorOutput(result.outputLines, /.*babel-plugin-react-compiler.*/); await assert404Page(port); + // Less styles support + await assertBodyStyles({ + 'white-space': 'break-spaces', + }); }, afterRunRebuildClient: async ({ allConsoleLogs }) => { // Check for HMR output as enabled by default @@ -34,6 +38,10 @@ describe('ReactRouter App Bundling /', () => { await waitForReactEnvs(result.outputLines, { isJsxEnabled: true }); await waitForMeteorOutput(result.outputLines, /.*babel-plugin-react-compiler.*/); await assert404Page(port, { isProductionMode: true }); + // Less styles support + await assertBodyStyles({ + 'white-space': 'break-spaces', + }); }, afterRunProductionRebuildClient: async ({ allConsoleLogs }) => { // Check for HMR to not be enabled in production-like mode