This VSCode extension provides CSS syntax highlighting in JavaScript/TypeScript template literals when they begin with a /* css */ comment.
Features
Automatically highlights CSS syntax in template literals that start with the /* css */ comment marker:
const styles = /* css */ `
.foo {
color: red;
background: blue;
}
`;
Works with:
- JavaScript (
.js)
- JSX (
.jsx)
- TypeScript (
.ts)
- TSX (
.tsx)
Supports template literal interpolations with ${} syntax.
Installation
From Source
- Clone this repository
- Open the folder in VSCode
- Press
F5 to launch the extension in a new Extension Development Host window
- Test it with the example code above
Manual Installation
- Copy this extension folder to your VSCode extensions directory:
- Windows:
%USERPROFILE%\.vscode\extensions
- macOS/Linux:
~/.vscode/extensions
- Restart VSCode
Usage
Simply add a /* css */ comment before any template literal containing CSS:
// This will have CSS syntax highlighting
const buttonStyles = /* css */ `
button {
padding: 10px 20px;
border-radius: 4px;
}
`;
// This will NOT have CSS syntax highlighting
const regularString = `
button {
padding: 10px 20px;
}
`;
Development
To modify or extend this extension:
- Edit syntaxes/css-comment-injection.json to change the grammar rules
- Edit package.json to modify extension metadata or add features
- Press
F5 in VSCode to test your changes
License
MIT
| |
