Aspect-AutoCompletion

This extention provides auto completion for CSS variables and utility class names defined in your CSS and SCSS files.

How it works

It uses SASS binary from your workspace node_modules folder to compile your SCSS code in files configured for scanning, and parses the CSS content via PostCss and collects 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 have 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 colors
  • ✅ Go to definition
• ✅ Atomic class names
  • ✅ Auto completion in html class attributes
  • ✅ 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.