VSCode Better CSS Stacking Contexts

Better CSS Stacking Contexts is a VSCode extension designed to simplify managing z-index and stacking contexts in CSS/SCSS. It provides visual cues and quick fixes to help developers create maintainable and bug-free layouts.

✨ Features

• Stacking Context Highlighting: Identifies and highlights new stacking contexts.
• Z-Index Analysis: Detects ineffective z-index values with visual warnings.
• Quick Fixes: Suggests fixes for ineffective z-index usage.
• Real-time Feedback: Provides insights into stacking context hierarchy as you type.
• Tree View: Navigable tree view of stacking contexts.

🛠️ Installation

There are several ways to install.

• Install from the Visual Studio Marketplace.
• From the VS Code Extensions view (Ctrl+Shift+X) or ( Cmd+Shift+X), search for Better CSS Stacking Contexts.
• Run ext install mikerheault.vscode-better-css-stacking-contexts in the command palette (Ctrl+Shift+P) or (Cmd+Shift+P).

▶️ Demo

Treeview - Navigation to property

Quickfix - ineffective z-index

⚙️ Configuration/Settings

Setting	Description	Type	Default Value
betterStackingContexts.decorationColor	Highlight color - hex value or Theme Color token	string	editorInfo.foreground
betterStackingContexts.messageText	Decoration message text	string	🤐 This property creates a new stacking context
betterStackingContexts.stackingContextMethod	Method for creating new stacking context (ineffective z-index quickfix)	enum: [ position, isolation ],	isolation
betterStackingContexts.backgroundColor	Background highlight color - hex value or Theme Color token	string	editor.hoverHighlightBackground

👨‍💻 Usage

The extension analyzes CSS/SCSS files automatically, highlighting regions and providing information and fixes for stacking context and z-index issues.

🤝 Contributing

Contributions are welcome!

📜 License

Licensed under the MIT License.

🚨 Support

For issues or feature requests, file an issue.

📢 Release Notes

Change log here