Architecture: How to handle SCSS files in in-browser rspack preview?

Documentation for Sessions

🏗️ Architecture: How to handle SCSS files in in-browser rspack preview?

Date: 2026-03-15
Time: 18:07:55 UTC
Session: gspace1-224.6
Agent: angular
Confidence: 90%
Status: ✅ Documented

📋 Decision Context

Question:

How to handle SCSS files in in-browser rspack preview?

Task: Fix SCSS compilation in preview pipeline

🎯 Decision Made

Chosen:

Lightweight SCSS nesting flattener that compiles nesting + & parent selectors to flat CSS before rspack compilation. No full dart-sass runtime.

Options Considered:

Load full dart-sass (4MB) in browser
Use sass-embedded WASM build
Lightweight nesting flattener
Forbid SCSS in generated code, use CSS only

💭 Reasoning

Generated platform code only uses SCSS nesting and & parent selectors — no $variables, @mixin, @use, @import. Full dart-sass is 4MB JS. Our flattener is ~200 lines, handles all actual use cases, and runs synchronously in the enrichFileMap pipeline. If generated code ever uses full Sass features, swap for WASM dart-sass.

📁 Files Involved

libs/libs-structural/platform-preview/src/lib/services/bundler-filesystem.service.ts

🔗 Related

Decision ID: dev_1773598075877_shdpool
Session: 224
Workspace: gspace1

Auto-generated by MCP Smart Consolidation