Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Atomic CSS Previewer - VS Code Extension (Proof of Concept)New to Visual Studio Code? Get it now.
Atomic CSS Previewer - VS Code Extension (Proof of Concept)

Atomic CSS Previewer - VS Code Extension (Proof of Concept)

hsam

|
8 installs
| (0) | Free
CSS previewer for atomic and self contained css rules
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

CSS Previewer – Prototype VSCode Extension

A lightweight VSCode extension to preview individual CSS/SCSS class rules in real-time. Best suited for atomic CSS styles or isolated classes.

⚠️ Note: Due to the cascading nature of CSS, styles influenced by other files/selectors may not be fully represented.

Demo

Demo gif

Features:

  • Parse .css and .scss files
  • Extract selectors and rules
  • Webview preview of selected class
  • Enable/disable from command palette

Limitations / Known Issues:

  • No support for CSS imports, global rules, or variable resolution
  • Doesn’t compile full SCSS context
  • Not accurate for deeply nested or overwritten styles
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft