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 Treeview - Navigation to property

Quickfix Example 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

Better CSS Stacking Contexts

Mike Rheault