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:

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.
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

Setting	Type	Default	Description
`styleSentinel.enableConflictDetection`	boolean	`true`	Enable conflict diagnostics.
`styleSentinel.enableContrastChecker`	boolean	`true`	Enable the contrast hover.
`styleSentinel.wcagLevel`	`"AA"` \| `"AAA"`	`"AA"`	WCAG level emphasized in hovers.

`.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