fix: #99 merge extension and languageIds into one single settings property

Author: phoenisx

docs/customize-extension.md

@@ -20,6 +20,11 @@ The following list of source file extensions does not need any customization.
 > __*JS/TS source file parsing try*__
 > __*using [postcss-css-in-js][css-in-js] parser,*__
 > __*as described in the [following section](#example-ii)*__.
+>
+
+> **NOTE:** Customization might not always work, because the way these syntax parsers work are different
+> for different css extensions. Thus if you find an extension is not working properly, do raise an issue
+> and appreciate a PR for the same.
 
 <br><br>
 

examples/custom-extension/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+   "cssvar.files": ["*.styl"],
+   "cssvar.extensions": ["styl"],
+   "cssvar.postcssSyntax": {
+      // [npm package name]: ["file extension list to use this syntax parser for"]
+      "postcss-styl": ["styl"]
+    }
+}

examples/custom-extension/README.md

@@ -0,0 +1,8 @@
+## Stylus CSS extension
+
+This extension uses and creates a very different AST using postcss, which is incompatible with
+`cssvar` vscode extension.
+
+To fully support this CSS extension, I will have to either provide in-built support for this
+CSS extension or ignore it for now.
+I am ignoring it for now.

examples/custom-extension/index.styl

@@ -0,0 +1,11 @@
+border-radius()
+  -webkit-border-radius: arguments
+  -moz-border-radius: arguments
+  border-radius: arguments
+
+body
+  font: 12px Helvetica, Arial, sans-serif
+  color: --c
+
+a.button
+  border-radius: 5px

examples/custom-extension/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "custom-extension",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "postcss": "^8.4.21",
+    "postcss-styl": "^0.12.3"
+  }
+}

examples/custom-extension/pnpm-lock.yaml

@@ -0,0 +1,7 @@
+color-variables()
+  --color-1: red;
+  --color-2: blue;
+
+:root {
+   color-variables();
+}

examples/custom-extension/variables.styl

@@ -138,8 +138,11 @@
 							"sass",
 							"less",
 							"postcss",
+							"pcss",
 							"stylus",
+							"styl",
 							"sugarss",
+							"sss",
 							"tailwindcss",
 							"vue",
 							"svelte",
@@ -150,16 +153,22 @@
 							"GoHTML",
 							"gohtmltmpl",
 							"handlebars",
+							"hbs",
 							"html",
 							"jade",
+							"pug",
 							"ts",
 							"tsx",
 							"jsx",
 							"js",
+							"typescript",
+							"typescriptreact",
+							"javascriptreact",
+							"javascript",
 							"coffeescript"
 						]
 					},
-					"markdownDescription": "File extensions for which IntelliSense will be enabled",
+					"markdownDescription": "File extensions or VSCode language ids for which IntelliSense will be enabled. Details on [VSCode Language Ids can be found here](https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers)",
 					"scope": "resource",
 					"examples": [
 						[

package.json

@@ -19,17 +19,23 @@ export const CSS_IDS = [
 ] as const;
 export const SUPPORTED_LANGUAGE_IDS = [...CSS_IDS, ...JS_IDS] as const;
 export type SupportedLanguageIds = typeof SUPPORTED_LANGUAGE_IDS[number];
+export type ExtendedLanguageIds = "stylus" | "sugarss" | "handlebars";
 export type CssExtensions = Exclude<
   typeof CSS_IDS[number],
   "vue" | "svelte" | "astro"
 >;
 
+/**
+ * This should always be a combination of extension and language ids
+ * to simplify user experience.
+ */
 export type SupportedExtensionNames =
   | "css"
   | "scss"
   | "sass"
   | "less"
   | "postcss"
+  | "pcss"
   | "vue"
   | "svelte"
   | "astro"
@@ -42,6 +48,12 @@ export type SupportedExtensionNames =
   | "javascript"
   | "javascriptreact";
 
+export type ExtendedExtensionNames =
+  | ExtendedLanguageIds
+  | "styl"
+  | "sss"
+  | "hbs";
+
 export type JsExtensions = Extract<
   SupportedExtensionNames,
   "js" | "jsx" | "ts" | "tsx"
@@ -65,7 +77,7 @@ export interface Config {
   // Ignore could be a glob as well.
   ignore: string[];
   enable: boolean;
-  extensions: SupportedExtensionNames[];
+  extensions: (SupportedExtensionNames | ExtendedExtensionNames)[];
   themes: string[];
   mode: [LintingSeverity, { ignore?: RegExp | null }];
   postcssPlugins: [string, Record<string, any>][];
@@ -109,8 +121,8 @@ export const DEFAULT_CONFIG: WorkspaceConfig = {
 };
 
 export const mapShortToFullExtension = (
-  ext: SupportedExtensionNames
-): SupportedLanguageIds => {
+  ext: SupportedExtensionNames | ExtendedExtensionNames
+): SupportedLanguageIds | ExtendedLanguageIds => {
   switch (ext) {
     case "ts":
       return "typescript";
@@ -120,6 +132,14 @@ export const mapShortToFullExtension = (
       return "javascript";
     case "jsx":
       return "javascriptreact";
+    case "pcss":
+      return "postcss";
+    case "styl":
+      return "stylus";
+    case "sss":
+      return "sugarss";
+    case "hbs":
+      return "handlebars";
     default:
       return ext;
   }

src/constants.ts

@@ -15,6 +15,7 @@ import {
   CSSVarLocation,
   CSSVarRecord,
   DEFAULT_CONFIG,
+  ExtendedExtensionNames,
   EXTENSION_NAME,
   mapShortToFullExtension,
   SUFFIX,
@@ -116,7 +117,9 @@ export async function setup(): Promise<{
             const value = getConfigValue(_config, key);
             config[fsPathKey][key] = value.map(ext => {
               const _ext = ext.startsWith(".")
-                ? (ext.substring(1) as SupportedExtensionNames)
+                ? (ext.substring(1) as
+                    | SupportedExtensionNames
+                    | ExtendedExtensionNames)
                 : ext;
               return mapShortToFullExtension(_ext);
             });