💎 Features
- 🎨 Syntax highlighting — TextMate grammar for
.ecss files
- 🔴 Error diagnostics — parse errors and semantic violations shown inline
- 💡 Hover hints — type info for
--param variables, variant values, state definitions
- 📖 CSS documentation — hover on standard CSS properties shows MDN docs
📦 Installation
Find the extension in the VS Code Marketplace by name ECSS Language Support, or install it via the command palette:
ext install webeach.ecss-language-support
🚀 Quick start
After installation, open any .ecss file — syntax highlighting and language server features activate automatically.
@state-variant Theme {
values: light, dark;
}
@state-def Button(--theme Theme: "light", --disabled boolean: false) {
border-radius: 6px;
@if (--disabled) {
opacity: 0.4;
cursor: not-allowed;
}
@if (--theme == 'dark') {
background: #1e1e1e;
color: #f0f0f0;
} @else {
background: #ffffff;
color: [#111111](https://github.com/webeach/ecss-vscode-extension/issues/111111);
}
}
💡 Language Server features
Error diagnostics
Parse errors and semantic violations are highlighted inline:
[SEM-1] Duplicate @state-variant name: "Size"
[SEM-8] Unknown @state-variant reference: "Color"
[2:15] Expected ',' or ')'
Hover hints
| Element |
Shows |
--param in a condition |
Parameter type and default value |
@state-variant Name |
List of declared values |
@state-def Name(...) |
Signature: all parameters with types and defaults |
| CSS property |
MDN documentation |
📐 TypeScript types for .ecss imports
The extension handles editor features only. For TypeScript type support in your project, use @ecss/typescript-plugin:
{
"compilerOptions": {
"plugins": [{ "name": "@ecss/typescript-plugin" }]
}
}
Tip: For VS Code to load TypeScript plugins from node_modules, switch to workspace TypeScript:
Cmd+Shift+P → TypeScript: Select TypeScript Version → Use Workspace Version
🔧 Development
Build:
pnpm install
pnpm build # production
pnpm watch # watch mode
Launch extension in development mode:
Open vscode-extension/ in VS Code and press F5 — this starts the Extension Development Host with the built extension loaded.
Type check:
pnpm typecheck
Lint and format:
pnpm lint # oxlint
pnpm lint:fix # oxlint --fix
pnpm fmt # oxfmt
pnpm fmt:check # oxfmt --check
👨💻 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.
