Fabulous introduces a CSS properties sidebar into Visual Studio Code.

Fabulous supports the followings

💅 CSS-in-JS libs which supports template literal (styled-components, emotion, linaria)
🎨 CSS rules from .css files
🌈 CSS rules from .scss files
🌏 CSS rules from .html files - these must be in a <style> tag and the style tag must be within the <head> tag
🌛 CSS rules from component.ts Angular component files that have inline styles within the @Component({ styles:[``] }) decorator
🌟 CSS rules from .vue files that have a <style> tag in the root of the file
💍 CSS rules from .svelte files that have a <style> tag in the root of the file

Fabulous is still in Preview. Give it a try and let us know when things don't go well.

Getting started

Install the Fabulous extension in VS Code
After opening a css, scss, js, jsx, tsx, component.ts, vue or svelte file, click on the icon to toggle the side-bar
Place your cursor in a CSS rule or in a Styled component template literal
You should see the sidebar controls become active