Aspect-autocompletion

This extention provides auto completion for CSS variables and utility class names in Aspect Library.

How it works

It uses SASS from the workspace node_modules folder to compile the SCSS files configured for scanning, and parse the CSS content via PostCss and collect all CSS variables and class names for auto completion.

Be noted, having CSS variables and class names in auto completion doesn't mean these varaibles or class names will take effect at runtime. You will have to make sure those CSS declarations are included in your web app bundles.

Features

• ✅ CSS variables
  • ✅ Auto completion
  • ✅ Display color
  • ✅ Go to definition
• ✅ Atomic class names
  • ✅ Auto completion in html class attribute
  • ✅ Class names inside media queries
  • ✅ Go to definition

These are not supported:

• ❌ Nested selectors (.a .b{color: red})
• ❌ Angular ngClass

Configuration

• aspectAutoCompletion.cssVarLookupFiles

  • Description: Configure glob patterns for including files to be scanned for CSS variables. This is typically aspect palette public file.
  • Example: ["libs/project/style/_public.scss"]

• aspectAutoCompletion.atomicClassNameLookupFiles

  • Description: Configure glob patterns for including files to be scanned for atomic class names
  • Example: ["libs/project/partials/{_colors,_backgrounds,_borders,_spacing}.scss", "libs/projectB/style/index.scss"]

TODOs

• Configure what document requires auto completion. Currently it's hardcoded to *.css and *scss.

• VSCode Remote mode support.

• Live reload when files in the scan list have been changed.

• Live reload when extension configuration changes.