Shringar CSS IntelliSense
A Visual Studio Code extension that provides intelligent autocompletion for PostCSS
framework classes. Get instant class suggestions while working with CSS, HTML, JSX, and TSX files.
Features
- 🚀 Intelligent autocompletion for Post CSS global classes
- ✨ Works across multiple file types:
- CSS files (for
composes: from global
)
- HTML files (for
class
attributes)
- JSX/TSX files (for
className
props)
- JavaScript files with JSX
- 🔧 Configurable CSS path
- 🎯 Context-aware suggestions
- 🎨 Automatic spacing between multiple classes
Installation
- Open VS Code
- Press
Cmd+P
(macOS) or Ctrl+P
(Windows/Linux)
- Type
ext install smallcase.shringarcss-intellisense
- Press Enter
Setup
- Open the Command Palette (
Cmd+Shift+P
/ Ctrl+Shift+P
)
- Type "Shringar CSS: Set CSS Path"
- Enter the path to your Shringar CSS file (relative to workspace root)
- Default:
node_modules/@smallcase/shringar/index.css
Usage
The extension automatically provides suggestions when you:
In CSS Files
.your-class {
composes: /* Suggestions appear here */ from global;
}
In JSX/TSX Files
<div className="/* Suggestions appear here */" />
In HTML Files
<div class="/* Suggestions appear here */"></div>
In JavaScript Files with JSX
const element = <div className="/* Suggestions appear here */" />;
Configuration
You can configure the extension through VS Code settings:
- Open Settings (
Cmd+,
/ Ctrl+,
)
- Search for "Shringar CSS"
- Update the "CSS Path" setting with your preferred path
Alternatively, add this to your settings.json
:
{
"shringarcss-intellisense.cssPath": "path/to/your/css/file.css"
}
Requirements
- Visual Studio Code version 1.77.0 or higher
- Shringar CSS framework installed in your project
Known Issues
If you find any issues, please report them here.
Contributing
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch
- Submit a pull request
Release Notes
2.0.0
- Support for html, CSS, JSX, TSX files added
- Add Handling to provide custom path
- Make it agnostic of Shringar and allow any post css based css files
- Add Readme
- Add command to provide custom css path
- BREAKING CHANGE - Instead of a hardcoded path now people will have to add path themselves
1.0.0
- Initial release
- Support for CSS files
- Context-aware class suggestions
License
This extension is licensed under the MIT License. See the LICENSE file for details.