added variable substitution

Author: ecmel

CHANGELOG.md

@@ -2,9 +2,10 @@
 
 All notable changes to the extension will be documented in this file.
 
-## [2.0.8] - 2024-02-01
+## [2.0.9] - 2024-02-01
 
 - Added optional auto validation
+- Added variable substitution for local style sheets
 - Added feedback for clear cache
 - Updated documentation
 - Updated dependencies

README.md

@@ -29,7 +29,7 @@ This setting is application scoped and changing the setting requires restarting
 
 ## Specifying Style Sheets
 
-Remote and local style sheets with optional glob patterns can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest in all configured languages within that workspace folder.
+Remote and local style sheets with optional glob patterns and variable substitutions can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest in all configured languages within that workspace folder.
 
 Glob patterns for local style sheets can have the following syntax:
 
@@ -41,9 +41,16 @@ Glob patterns for local style sheets can have the following syntax:
 | `{}`    | group conditions like `**​/*.{css,scss}`              |
 | `[]`    | a range of characters like `[0-9]` or negate `[!0-9]` |
 
+The following variable substitutions are supported for local style sheets as well:
+
+| Variable                     | Substitution                              |
+| ---------------------------- | ----------------------------------------- |
+| `${fileBasename}`            | Current file's basename                   |
+| `${fileBasenameNoExtension}` | Current file's basename with no extension |
+
 ## Examples
 
-Configuration depends on your layout of the project. The following most basic setting will suggest from all `css` files in project's `src` folder:
+Configuration depends on your layout of the project. The following most basic setup will suggest from all `css` files in project's `src` folder:
 
 **`.vscode/settings.json`**
 
@@ -103,6 +110,16 @@ Component's [static styles](https://lit.dev/docs/components/styles/) will be ava
 }
 ```
 
+Variable substitution can be used to refer to a related `css` file. If you are working on `my-component.ts` and your `css` is in `my-component-css.ts` then a suitable setup can be:
+
+**`.vscode/settings.json`**
+
+```json
+{
+  "css.styleSheets": ["src/${fileBasenameNoExtension}-css.ts"]
+}
+```
+
 ### [Vue](https://vuejs.org/)
 
 Install your favorite Vue language extension from [Marketplace](https://marketplace.visualstudio.com/search?term=tag%3Avue&target=VSCode&category=All%20categories&sortBy=Relevance) which registers `vue` language id then enable `vue` in global settings and restart VS Code:
@@ -115,6 +132,20 @@ Install your favorite Vue language extension from [Marketplace](https://marketpl
 
 Styles defined in component's `<style>` section will be available for completion in component's `<template>` section.
 
+### [Angular](https://angular.io/)
+
+Variable substitution can be used for Angular development:
+
+**`.vscode/settings.json`**
+
+```json
+{
+  "css.styleSheets": ["app/${fileBasenameNoExtension}.css"]
+}
+```
+
+With this setup, styles defined in e.g. `app.component.css` will be available in `app.component.html`.
+
 ## Go to Definition
 
 Go to definition for `id` and `class` selectors for local style sheets are supported. Selecting `Go to Definition` from context menu (`F12` or `⌘ click`) on a selector will open the local style sheet which the selector is defined.

package-lock.json

@@ -2,7 +2,7 @@
   "name": "vscode-html-css",
   "displayName": "HTML CSS Support",
   "description": "CSS Intellisense for HTML",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "license": "MIT",
   "publisher": "ecmel",
   "author": {
@@ -120,7 +120,7 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/line-column": "^1.0.2",
     "@types/mocha": "^10.0.6",
-    "@types/node": "^20.11.14",
+    "@types/node": "^20.11.16",
     "@types/sinon": "^17.0.3",
     "@types/vscode": "^1.75.0",
     "@vscode/test-electron": "^2.3.9",

package.json

@@ -3,18 +3,28 @@
  * Licensed under the MIT License
  */
 
-import { ConfigurationScope, workspace } from "vscode";
+import Path from "path";
+import { ConfigurationScope, TextDocument, workspace } from "vscode";
 
 export function getEnabledLanguages(): string[] {
   return workspace
     .getConfiguration("css")
     .get<string[]>("enabledLanguages", ["html"]);
 }
 
-export function getStyleSheets(scope: ConfigurationScope): string[] {
+export function getStyleSheets(scope: TextDocument): string[] {
+  const path = Path.parse(scope.fileName);
+
   return workspace
     .getConfiguration("css", scope)
-    .get<string[]>("styleSheets", []);
+    .get<string[]>("styleSheets", [])
+    .map((glob) =>
+      glob.replace(
+        /\$\s*{\s*(fileBasenameNoExtension|fileBasename)\s*}/g,
+        (match, variable) =>
+          variable === "fileBasename" ? path.base : path.name
+      )
+    );
 }
 
 export const enum AutoValidation {