CSS Syntax Comment Highlighting for VSCode

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

1. Clone this repository
2. Open the folder in VSCode
3. Press F5 to launch the extension in a new Extension Development Host window
4. Test it with the example code above

Manual Installation

1. Copy this extension folder to your VSCode extensions directory:
   • Windows: %USERPROFILE%\.vscode\extensions
   • macOS/Linux: ~/.vscode/extensions
2. 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:

1. Edit syntaxes/css-comment-injection.json to change the grammar rules
2. Edit package.json to modify extension metadata or add features
3. Press F5 in VSCode to test your changes

License

MIT