⚙️ Implementation: How to fix CSS/SCSS inconsistency in LLM-generated component...

Date: 2026-03-17
Time: 16:11:36 UTC
Session: gspace1-230.7
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How to fix CSS/SCSS inconsistency in LLM-generated components?

Task: S230: Fix remaining generation pipeline gaps

🎯 Decision Made

Chosen:

Created new auto-correction strategy: scss-corrections.strategy.ts. Three-step fix: (1) Rewrite styleUrl .css references to .scss in .ts files, (2) If both .css and .scss exist for same component, merge into .scss and drop .css, (3) Rename orphan .css files to .scss. Registered in AutoCorrectionService pipeline.

Options Considered:

• No alternatives documented

💭 Reasoning

LLM sometimes generates .component.css (plain CSS) alongside or instead of .component.scss. Angular CLI and the project conventions require .scss. The auto-correction runs instantly (no LLM call) before the validate/fix loop, so it catches these consistently. Pattern follows existing correction strategies (regex-corrections, api-corrections, etc.).

📁 Files Involved

• APIs/backend-vitto-api/src/app/module-generation/validation/corrections/strategies/scss-corrections.strategy.ts
• APIs/backend-vitto-api/src/app/module-generation/validation/corrections/strategies/index.ts
• APIs/backend-vitto-api/src/app/module-generation/validation/auto-correction.service.ts

🔗 Related

• Decision ID: dev_1773763896165_1mhjrpe
• Session: 230
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation