CSS Module Variables

Scoped CSS custom-property IntelliSense for CSS Modules.

The extension suggests only the custom properties available to the current module. It also provides hover details, Go to Definition, and diagnostics for unavailable var(--name) references.

Features

• Completion after var( and var(--.
• Per-module variable scopes configured with glob patterns.
• Shared global variables available in every configured module.
• Hover with a variable value and its source file.
• Go to Definition for custom-property references.
• Optional warnings for unavailable variables.

Configuration

Configure one or more modules in your workspace settings:

{
  "cssModuleVariables.modules": [
    {
      "name": "dashboard",
      "files": ["src/dashboard/**/*.module.css"],
      "variables": ["src/dashboard/**/*.css"]
    },
    {
      "name": "website",
      "files": ["src/website/**/*.module.css"],
      "variables": ["src/website/**/*.css"]
    }
  ],
  "cssModuleVariables.globalVariables": ["src/styles/tokens/**/*.css"],
  "cssModuleVariables.diagnostics": true
}

For a file matching dashboard.files, the extension shows variables declared in dashboard.variables, the global patterns, and the current document. It does not suggest variables from website.