SpiraCSS HTML to SCSS

VS Code extension that generates SpiraCSS SCSS files from HTML structure and can insert placeholder classes.

Demo

About SpiraCSS

SpiraCSS is a CSS architecture designed to stay intact. HTML structure decides where styles belong, and Stylelint enforces it — no matter who writes, human or AI.

This extension is designed to be used with the SpiraCSS Design Principles.

→ See how it works

Requirements

• VS Code >= 1.99.0

Features

• Generate SCSS from a selected HTML fragment or root block
• Insert placeholder classes (block-box / element)
• Reads naming and generator options from spiracss.config.js
• Generation logic is powered by @spiracss/html-cli

Commands

Quick Start

1. Create spiracss.config.js in your project root.
2. Select an HTML fragment.
3. Run a SpiraCSS command from the Command Palette or use the keybinding.

Docs

• HTML to SCSS
• Configuration

Related Tools

• SpiraCSS Stylelint Plugin (npm)
• SpiraCSS HTML CLI (npm)
• SpiraCSS Comment Links (VS Code Marketplace / Open VSX)

Development Notes

• In this monorepo, @spiracss/html-cli is linked via workspace:^0.4.3.
• Install dependencies from the repository root with pnpm install.