add SCSS support with Meteor plugin and Sass loader

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

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';
 

tools/modern-tests/apps/typescript/imports/ui/Global.scss

@@ -0,0 +1,3 @@
+body {
+    white-space: break-spaces;
+}

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"
   },

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()],
   };
 });

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 }) => {