fix(plugin-sass): pollute the global.location object (#3712)

* feat(plugin-sass): add `patchGlobalLocation` & `unpatchGlobalLocation` to `@modern-js/utils`

* fix(plugin-sass): `global.location` object will crash SSR server

* feat: move `patch` to `@modern-js/builder-shared`

* fix: can't set `GLOBAL_PATCHED_SYMBOL` as prop of a string

* feat: add new function `patchCompilerGlobalLocation`

* feat: only create href and location variables if `global.location` is not defined

* feat: remove assert

Author: Asuka109

.changeset/new-insects-argue.md

@@ -0,0 +1,8 @@
+---
+'@modern-js/utils': minor
+'@modern-js/builder-webpack-provider': patch
+'@modern-js/builder-rspack-provider': patch
+---
+
+fix(plugin-sass): pollute the `global.location` object
+fix(plugin-sass): 污染全局对象 `global.location`

packages/builder/builder-rspack-provider/src/plugins/sass.ts

@@ -2,13 +2,18 @@ import {
   isUseCssSourceMap,
   SASS_REGEX,
   getSassLoaderOptions,
+  patchCompilerGlobalLocation,
 } from '@modern-js/builder-shared';
 import type { BuilderPlugin } from '../types';
 
 export function builderPluginSass(): BuilderPlugin {
   return {
     name: 'builder-plugin-sass',
-    setup(api) {
+    async setup(api) {
+      api.onAfterCreateCompiler(({ compiler }) => {
+        patchCompilerGlobalLocation(compiler);
+      });
+
       api.modifyBundlerChain(async (chain, utils) => {
         const config = api.getNormalizedConfig();
         const { applyBaseCSSRule } = await import('./css');

packages/builder/builder-shared/package.json

@@ -107,7 +107,8 @@
     "html-webpack-plugin": "5.5.0",
     "terser": "^5.14.1",
     "typescript": "^4",
-    "webpack": "^5.82.1"
+    "webpack": "^5.82.1",
+    "@rspack/core": "0.0.0-canary-22b006c-20230517164249"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

packages/builder/builder-shared/src/index.ts

@@ -25,3 +25,4 @@ export * from './apply';
 export * from './fallback';
 export * from './getLoaderOptions';
 export * from './svgo';
+export * from './patch';

packages/builder/builder-shared/src/patch.ts

@@ -0,0 +1,48 @@
+import path from 'path';
+import { pathToFileURL } from 'url';
+import type {
+  Compiler as WebpackCompiler,
+  MultiCompiler as WebpackMultiCompiler,
+} from 'webpack';
+import type {
+  Compiler as RspackCompiler,
+  MultiCompiler as RspackMultiCompiler,
+} from '@rspack/core';
+
+const GLOBAL_PATCHED_SYMBOL: unique symbol = Symbol('GLOBAL_PATCHED_SYMBOL');
+
+declare global {
+  interface Location {
+    [GLOBAL_PATCHED_SYMBOL]?: true;
+  }
+}
+
+/** fix issue about dart2js: https://github.com/dart-lang/sdk/issues/27979 */
+export function patchGlobalLocation() {
+  if (!global.location) {
+    const href = pathToFileURL(process.cwd()).href + path.sep;
+    const location = Object.freeze({ [GLOBAL_PATCHED_SYMBOL]: true, href });
+    global.location = location as unknown as Location;
+  }
+}
+
+export function unpatchGlobalLocation() {
+  if (global.location?.[GLOBAL_PATCHED_SYMBOL]) {
+    // @ts-expect-error
+    delete global.location;
+  }
+}
+
+export function patchCompilerGlobalLocation(
+  compiler:
+    | WebpackCompiler
+    | RspackCompiler
+    | WebpackMultiCompiler
+    | RspackMultiCompiler,
+) {
+  // https://github.com/webpack/webpack/blob/136b723023f8f26d71eabdd16badf04c1c8554e4/lib/MultiCompiler.js#L64
+  compiler.hooks.run.tap('PatchGlobalLocation', patchGlobalLocation);
+  compiler.hooks.watchRun.tap('PatchGlobalLocation', patchGlobalLocation);
+  compiler.hooks.watchClose.tap('PatchGlobalLocation', unpatchGlobalLocation);
+  compiler.hooks.done.tap('PatchGlobalLocation', unpatchGlobalLocation);
+}

packages/builder/builder-webpack-provider/src/plugins/sass.ts

@@ -1,25 +1,19 @@
-import path from 'path';
-import { pathToFileURL } from 'url';
 import {
   isUseCssSourceMap,
   SASS_REGEX,
   getSassLoaderOptions,
+  patchCompilerGlobalLocation,
 } from '@modern-js/builder-shared';
 import type { BuilderPlugin } from '../types';
 
-/** fix issue about dart2js: https://github.com/dart-lang/sdk/issues/27979 */
-export function patchGlobalLocation() {
-  const href = `${pathToFileURL(process.cwd()).href}${path.sep}`;
-  // @ts-expect-error
-  global.location ||= {};
-  global.location.href ||= href;
-}
-
 export function builderPluginSass(): BuilderPlugin {
   return {
     name: 'builder-plugin-sass',
-    setup(api) {
-      patchGlobalLocation();
+    async setup(api) {
+      api.onAfterCreateCompiler(({ compiler }) => {
+        patchCompilerGlobalLocation(compiler);
+      });
+
       api.modifyBundlerChain(async (chain, utils) => {
         const config = api.getNormalizedConfig();
         const { applyBaseCSSRule } = await import('./css');