StyleSentinel

Detects conflicting/redundant CSS style declarations and checks WCAG color contrast directly in the editor — regardless of styling approach.

Description

StyleSentinel is a framework-agnostic VS Code extension that surfaces two classes of styling problems as you type:

1. Conflict / redundancy detection — when the same property (or a shorthand/longhand equivalent) is declared more than once in the same rule, the overridden declaration is flagged.
2. WCAG contrast checking — hover any color value to see its resolved swatch and, when a paired background/foreground exists in the same rule, its contrast ratio against WCAG AA and AAA thresholds.

Phase 1 supports plain .css and .scss files. The architecture is layered so future adapters (Tailwind, CSS-in-JS, CSS Modules) can reuse the same core engine.

Features

• ✅ Conflict diagnostics for duplicate and shorthand/longhand overrides (e.g. padding-left overridden by a later padding).
• 🎨 Contrast hover with color swatch, resolved value, ratio, and AA/AAA pass/fail table.
• 🔗 CSS custom property resolution — var(--x) references are resolved through a workspace-wide variable map (collected from any selector).
• ⚡ Live updates — debounced on edit (~300ms) and refreshed on save.
• 💡 Quick fix — "Remove overridden declaration".
• 🔢 Status bar conflict count for the active file.
• 🔍 CodeLens issue summaries above rule blocks.
• ⚙️ Team config via .stylesentinelrc.json to disable specific rules.

Settings

.stylesentinelrc.json

{
  "disabledRules": ["shorthand-override"]
}

Valid rule ids: duplicate-property, shorthand-override.

Architecture

src/
  core/            # Pure logic — ZERO vscode/postcss imports
    types.ts
    conflictEngine.ts
    contrastEngine.ts
  adapters/        # Parsing backends (postcss today)
    cssAdapter.ts
  providers/       # VS Code API wiring
    diagnosticsProvider.ts
    hoverProvider.ts
    codeActionProvider.ts
    codeLensProvider.ts
    statusBar.ts
    customPropertyRegistry.ts
    config.ts
  extension.ts     # activate / deactivate

Development

npm install
npm run build      # bundle with webpack
npm test           # run Jest unit tests (core engines)

Press F5 in VS Code to launch the Extension Development Host, then open any .css or .scss file.

Roadmap

• Phase 2: Tailwind CSS (including custom config/theme values)
• Phase 3: CSS-in-JS (styled-components / Emotion)
• Phase 4: CSS Modules

License

MIT