🇬🇧 English version | 🇷🇺 Русская версия

ECSS (Extended CSS) — a language that extends CSS with three constructs for declarative component state management directly in stylesheets.

📖 Documentation

---

@state-variant Size {
  values: sm, md, lg;
}

@state-variant Theme {
  values: light, dark;
}

@state-def Button(--size Size, --theme Theme) {
  padding: 8px 16px;

  @if (--size == sm) {
    padding: 4px 8px;
  }
  @elseif (--size == lg) {
    padding: 12px 24px;
  }

  @if (--theme == dark) {
    background: #1a1a1a;
    color: #fff;
  }
}

.ecss files compile into plain CSS and typed JS style factories that return CSS classes and state data-attributes.

Packages

Repository	npm	Description
webeach/ecss-parser		Rust-based ECSS parser (napi-rs), returns AST
webeach/ecss-transformer		AST → CSS + JS + d.ts transformer
webeach/ecss-vite-plugin		Vite plugin for .ecss files
webeach/ecss-typescript-plugin		TypeScript Language Service Plugin for IDEs
webeach/ecss-vscode-extension		VS Code: syntax highlighting, diagnostics, hover

---

👨‍💻 Author

Developed and maintained by Ruslan Martynov.

Found a bug or have a suggestion? Open an issue or submit a pull request.

---

📄 License

Distributed under the MIT License.