SCSS Manager

AI-powered SCSS refactoring for VS Code. Scans your entire project, finds opportunities to nest selectors, extract repeated values into variables, consolidate near-duplicate rules, and remove redundant declarations — all visible in a dedicated sidebar with one-click apply.

Features

Installation

Development

git clone <this-repo>
cd scss-manager
npm install
npm run compile

Press F5 in VS Code to launch an Extension Development Host with the extension loaded.

Package

npm install -g @vscode/vsce
vsce package
code --install-extension scss-manager-1.2.0.vsix

How to use

1. Click the SCSS Manager icon in the activity bar (left rail).
2. Click Scan Project if the scan didn't auto-start.
3. Explore the panel:
   • Project Statistics — counts and metrics
   • Suggestions — collapsible categories (Nesting, Variables, Duplicates, Redundancies)
   • Actions — re-scan, apply all safe, AI refactor active file, settings
4. Click any suggestion → details panel opens with proposed before/after.
5. Click Apply for safe deterministic refactors, or ✨ Apply with AI for ones that benefit from a language-model rewrite.

Configuration

All settings live under scssManager.*:

AI integration

AI features use the VS Code Language Model API. The extension does not ship its own model; it requests one from any installed provider.

Currently the most reliable provider is GitHub Copilot Chat. If no language model is available, deterministic features still work; AI features show a one-time prompt offering to install Copilot Chat.

Models the extension will try, in order: claude-3.5-sonnet (Copilot), gpt-4o (Copilot), gpt-4 (Copilot), any Copilot model, any provider.

Project structure

scss-manager/
├── package.json
├── tsconfig.json
├── media/scss-icon.svg
├── samples/messy.scss
└── src/
    ├── extension.ts                  ← entry point
    ├── types.ts                      ← shared types
    ├── parser/
    │   ├── scssParser.ts             ← postcss-scss wrapper
    │   └── projectScanner.ts         ← workspace file scan
    ├── analyzers/
    │   ├── index.ts                  ← runs all analyzers
    │   ├── statisticsCollector.ts
    │   ├── nestingAnalyzer.ts
    │   ├── variableAnalyzer.ts
    │   ├── duplicateAnalyzer.ts
    │   └── redundancyAnalyzer.ts
    ├── refactor/
    │   ├── nestingRefactor.ts
    │   ├── variableRefactor.ts
    │   ├── duplicateRefactor.ts
    │   └── redundancyRefactor.ts
    ├── views/
    │   ├── statisticsTreeProvider.ts ← sidebar TreeView
    │   └── suggestionPanel.ts        ← detail WebView
    ├── llm/
    │   └── aiAssistant.ts            ← vscode.lm wrapper
    ├── minify/
    │   └── minifier.ts               ← dart-sass compressed compile + source map
    ├── convert/
    │   └── cssToScss.ts              ← CSS → SCSS converter (selector trie + variable extraction)
    ├── commands/index.ts
    └── utils/
        ├── editor.ts
        └── logger.ts

Minifier

The Minify Current File action (editor title bar icon, right-click menu, or SCSS: Minify Current File from the command palette) compiles the active SCSS/SASS file with dart-sass in compressed mode.

Output-path resolution rules for scssManager.minify.outputPath:

When scssManager.minify.sourceMap is enabled, a v3 source map is written as <output>.css.map and a /*# sourceMappingURL=… */ comment is appended to the CSS.

CSS → SCSS converter

Right-click any .css file (in the Explorer or in the editor) and pick SCSS: Convert CSS → SCSS. The converter:

• Parses the file with postcss.
• Builds a selector trie so shared ancestors collapse into nested blocks (.card .header becomes .card { .header { … } }).
• Compound suffixes (:hover, .foo.bar, [disabled]) are nested with & references.
• @media and @supports blocks group their inner rules with full nesting.
• @keyframes are preserved as-is.
• Multi-selector rules (.a, .b { … }) are emitted flat.
• Repeated colors / lengths / durations are hoisted into top-of-file $variables (threshold: scssManager.convert.variableMinOccurrences).
• Works on minified .min.css files; the .min is stripped from the output filename.

Output-path resolution for scssManager.convert.outputPath mirrors the minifier:

Dependencies

• postcss + postcss-scss — SCSS parsing (battle-tested, real AST)
• sass — dart-sass for minified compilation + source maps
• typescript — build only

Limitations

• Variable extraction across multiple files requires that the target file is @used or @imported by every consumer — the extension does not add imports automatically. Use the variables.targetFile setting and ensure your existing import chain covers it.
• @extend / @mixin consolidation for high-similarity duplicates is routed through AI rather than done deterministically, because the right transformation depends on context.
• The analyzer respects glob exclusions but doesn't currently understand @use namespaces — a variable defined in one file is treated as available everywhere when checking for name collisions.

License

MIT.