From f46c3aef89edd1f4d4ded9fc61d11f6d5ba16f5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nacho=20Codo=C3=B1er?= <igcogi@gmail.com>
Date: Wed, 17 Sep 2025 17:06:20 +0200
Subject: [PATCH] add SCSS support with Meteor plugin and Sass loader

---
 .../apps/typescript/.meteor/packages          |  2 +-
 .../typescript/client/{main.css => main.scss} |  0
 .../apps/typescript/imports/ui/App.tsx        |  1 +
 .../apps/typescript/imports/ui/Global.scss    |  3 +++
 .../modern-tests/apps/typescript/package.json |  3 +++
 .../apps/typescript/rspack.config.js          | 20 +++++++++++++++++++
 tools/modern-tests/typescript.test.js         | 10 +++++++++-
 7 files changed, 37 insertions(+), 2 deletions(-)
 rename tools/modern-tests/apps/typescript/client/{main.css => main.scss} (100%)
 create mode 100644 tools/modern-tests/apps/typescript/imports/ui/Global.scss

diff --git a/tools/modern-tests/apps/typescript/.meteor/packages b/tools/modern-tests/apps/typescript/.meteor/packages
index 993162a9f0..da38d886c4 100644
--- a/tools/modern-tests/apps/typescript/.meteor/packages
+++ b/tools/modern-tests/apps/typescript/.meteor/packages
@@ -17,7 +17,7 @@ typescript              # Enable TypeScript syntax in .ts and .tsx modules
 shell-server            # Server-side component of the `meteor shell` command
 hot-module-replacement  # Update client in development without reloading the page
 
-
+fourseven:scss@5.0.0-rc.1 # Enable SCSS syntax in .scss using Meteor
 static-html             # Define static page content in .html files
 react-meteor-data       # React higher-order component for reactively tracking Meteor data
 zodern:types            # Pull in type declarations from other Meteor packages
diff --git a/tools/modern-tests/apps/typescript/client/main.css b/tools/modern-tests/apps/typescript/client/main.scss
similarity index 100%
rename from tools/modern-tests/apps/typescript/client/main.css
rename to tools/modern-tests/apps/typescript/client/main.scss
diff --git a/tools/modern-tests/apps/typescript/imports/ui/App.tsx b/tools/modern-tests/apps/typescript/imports/ui/App.tsx
index d354e1b352..52f71448cc 100644
--- a/tools/modern-tests/apps/typescript/imports/ui/App.tsx
+++ b/tools/modern-tests/apps/typescript/imports/ui/App.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import './Global.scss';
 import { Hello } from './Hello';
 import { Info } from './Info';
 
diff --git a/tools/modern-tests/apps/typescript/imports/ui/Global.scss b/tools/modern-tests/apps/typescript/imports/ui/Global.scss
new file mode 100644
index 0000000000..2c0c9d93e3
--- /dev/null
+++ b/tools/modern-tests/apps/typescript/imports/ui/Global.scss
@@ -0,0 +1,3 @@
+body {
+    white-space: break-spaces;
+}
diff --git a/tools/modern-tests/apps/typescript/package.json b/tools/modern-tests/apps/typescript/package.json
index d831ddf726..e8966e9724 100644
--- a/tools/modern-tests/apps/typescript/package.json
+++ b/tools/modern-tests/apps/typescript/package.json
@@ -22,6 +22,9 @@
     "@types/react-dom": "^18.2.4",
     "assert": "^2.1.0",
     "playwright": "^1.54.2",
+    "sass": "^1.92.1",
+    "sass-embedded": "^1.92.1",
+    "sass-loader": "^16.0.5",
     "ts-checker-rspack-plugin": "^1.1.5",
     "typescript": "^5.4.5"
   },
diff --git a/tools/modern-tests/apps/typescript/rspack.config.js b/tools/modern-tests/apps/typescript/rspack.config.js
index 64e8db0052..1658ab91dc 100644
--- a/tools/modern-tests/apps/typescript/rspack.config.js
+++ b/tools/modern-tests/apps/typescript/rspack.config.js
@@ -1,5 +1,8 @@
 import { defineConfig } from '@meteorjs/rspack';
 import { TsCheckerRspackPlugin } from 'ts-checker-rspack-plugin';
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
 
 /**
  * Rspack configuration for Meteor projects.
@@ -13,6 +16,23 @@ import { TsCheckerRspackPlugin } from 'ts-checker-rspack-plugin';
  */
 export default defineConfig(Meteor => {
   return {
+    module: {
+      rules: [
+        {
+          test: /\.scss$/i,
+          use: [
+            {
+              loader: 'sass-loader',
+              options: {
+                api: 'modern-compiler',
+                implementation: require.resolve('sass-embedded'),
+              },
+            },
+          ],
+          type: 'css/auto',
+        },
+      ],
+    },
     plugins: [new TsCheckerRspackPlugin()],
   };
 });
diff --git a/tools/modern-tests/typescript.test.js b/tools/modern-tests/typescript.test.js
index 8981aa50be..3cd2da3295 100644
--- a/tools/modern-tests/typescript.test.js
+++ b/tools/modern-tests/typescript.test.js
@@ -2,7 +2,7 @@ import {
   waitForMeteorOutput,
 } from "./helpers";
 import { testMeteorRspackBundler } from './test-helpers';
-import { assertFileExist } from "./assertions";
+import { assertBodyStyles, assertFileExist } from "./assertions";
 
 describe('TypeScript App Bundling /', () => {
   describe('Meteor+Rspack Bundler /', testMeteorRspackBundler({
@@ -16,6 +16,10 @@ describe('TypeScript App Bundling /', () => {
     },
     customAssertions: {
       afterRun: async ({ result, tempDir }) => {
+        // SCSS styles support
+        await assertBodyStyles({
+          'white-space': 'break-spaces',
+        });
         await waitForTypeScriptEnvs(result.outputLines, { isTsxEnabled: true });
         await waitForTypeScriptErrorFree(result.outputLines);
         await assertFileExist(tempDir, '.meteor/local/types');
@@ -25,6 +29,10 @@ describe('TypeScript App Bundling /', () => {
         await waitForMeteorOutput(allConsoleLogs, /.*HMR.*Updated modules:.*/);
       },
       afterRunProduction: async ({ result }) => {
+        // SCSS styles support
+        await assertBodyStyles({
+          'white-space': 'break-spaces',
+        });
         await waitForTypeScriptEnvs(result.outputLines, { isTsxEnabled: true });
       },
       afterRunProductionRebuildClient: async ({ allConsoleLogs }) => {