Skip to content

Commit 09efafe

Browse files
alan-agius4filipesilva
authored andcommitted
fix(@angular-devkit/build-angular): Sass compilation in StackBlitz webcontainers
When `process.versions.webcontainer` is truthy it means that we are running in a StackBlitz webcontainer. `SassWorkerImplementation` uses `receiveMessageOnPort` Node.js `worker_thread` API to ensure sync behavior which is ~2x faster. However, it is non trivial to support this in a webcontainer and while slower we choose to use `dart-sass` which in Webpack uses the slower async path. (cherry picked from commit ac66e40)
1 parent 9266adb commit 09efafe

1 file changed

Lines changed: 21 additions & 8 deletions

File tree

  • packages/angular_devkit/build_angular/src/webpack/configs

packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -108,14 +108,16 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
108108
);
109109
}
110110

111-
const sassImplementation = new SassWorkerImplementation();
112-
extraPlugins.push({
113-
apply(compiler) {
114-
compiler.hooks.shutdown.tap('sass-worker', () => {
115-
sassImplementation?.close();
116-
});
117-
},
118-
});
111+
const sassImplementation = getSassImplementation();
112+
if (sassImplementation instanceof SassWorkerImplementation) {
113+
extraPlugins.push({
114+
apply(compiler) {
115+
compiler.hooks.shutdown.tap('sass-worker', () => {
116+
sassImplementation?.close();
117+
});
118+
},
119+
});
120+
}
119121

120122
const assetNameTemplate = assetNameTemplateFactory(hashFormat);
121123

@@ -406,3 +408,14 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
406408
plugins: extraPlugins,
407409
};
408410
}
411+
412+
function getSassImplementation(): SassWorkerImplementation | typeof import('sass') {
413+
const { webcontainer } = process.versions as unknown as Record<string, unknown>;
414+
415+
// When `webcontainer` is a truthy it means that we are running in a StackBlitz webcontainer.
416+
// `SassWorkerImplementation` uses `receiveMessageOnPort` Node.js `worker_thread` API to ensure sync behavior which is ~2x faster.
417+
// However, it is non trivial to support this in a webcontainer and while slower we choose to use `dart-sass`
418+
// which in Webpack uses the slower async path.
419+
// We should periodically check with StackBlitz folks (Mark Whitfeld / Dominic Elm) to determine if this workaround is still needed.
420+
return webcontainer ? require('sass') : new SassWorkerImplementation();
421+
}

0 commit comments

Comments
 (0)