Working with PostCSS Simple Variables is a pain, this extension enhances the Web Development experience by providing advanced features such as autocomplete, color preview, and go to definition.

Installation

Install packages, run npm run package, drag the zip file onto vscode extensions pane.

By default the extension only scan files with this glob patterns:

["**/*.css", "**/*.scss", "**/*.sass", "**/*.less"]

And ignore files in these folders:

[
  "**/.git",
  "**/.svn",
  "**/.hg",
  "**/CVS",
  "**/.DS_Store",
  "**/.git",
  "**/node_modules",
  "**/bower_components",
  "**/tmp",
  "**/dist",
  "**/tests"
]

Features

Autocomplete & Color Preview

Intelligent suggestions for all PostCSS Simple variables in the project

Go to definition

You can easily knows where the variable coming from by hold Alt/Cmd and click to the variable.

FAQ

I want to add files in node_modules folder

.vscode/settings.json

{
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "node_modules/open-props/open-props.min.css"
  ]
}

I want to add files from public url, CDN

src/style.css

@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/tailwind-colors/dist/css/colors.min.css';

body {
  color: $indigo-50;
}

...

Full demo