Skip to content
🎨 CSS properties sidebar for VS Code
Branch: master
Clone or download
Latest commit bcfed97 Jun 10, 2019

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

Help us make Fabulous better

Have a look at our contribution guide.


Thanks goes to these wonderful people (emoji key):

Sunil Pai
Sunil Pai

Raathi Kugarajan
Raathi Kugarajan

πŸ€” πŸ’» 🎨

Austin Turner
Austin Turner

⚠️ πŸ’» 🚧 πŸ› πŸ“– πŸš‡ πŸ‘€


This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.