Merge pull request vunguyentuan#47 from vunguyentuan/improve-ux

Improve ux

Author: vunguyentuan

.changeset/six-wolves-admire.md

@@ -0,0 +1,5 @@
+---
+"css-variables-language-server": patch
+---
+
+remove commit characters as it confuse some users

.changeset/sweet-tables-happen.md

@@ -0,0 +1,5 @@
+---
+"vscode-css-variables": patch
+---
+
+update activated documents, avoid trigger autocomplete on irrelevant files

.gitignore

@@ -5,4 +5,6 @@ node_modules
 .turbo
 dist
 out
-.DS_Store
+.DS_Store
+
+./packages/vscode-css-variables/README.md

README.md

@@ -54,5 +54,33 @@ You can easily knows where the variable coming from by hold Alt/Cmd and click to
 
 <img src="https://github.com/vunguyentuan/vscode-css-variables/raw/master/demo/goto-definition-trim.gif" alt="" />
 
+## FAQ
+### I want to add files in `node_modules` folder
+*.vscode/settings.json*
+```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*
+```css
+@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/tailwind-colors/dist/css/colors.min.css';
+
+body {
+  color: var(--indigo-50);
+}
+
+...
+```
+
+### Example source code https://github.com/vunguyentuan/test-css-var
 ## Full demo
 ![Demo](https://github.com/vunguyentuan/vscode-css-variables/raw/master/demo/demo.v2.3.0.gif)

package.json

@@ -12,7 +12,7 @@
 		"dev": "turbo run dev",
 		"package": "turbo run package",
 		"deploy": "turbo run deploy",
-		"release": "npm run build && changeset publish"
+		"release": "cp README.md packages/vscode-css-variables/README.md && npm run build && changeset publish"
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.24.3",

packages/css-variables-language-server/src/index.ts

@@ -192,7 +192,6 @@ connection.onCompletion(
         label: varSymbol.name,
         detail: varSymbol.value,
         documentation: varSymbol.value,
-        commitCharacters: [' ', ';', '{', '}'],
         insertText,
         kind: isColor(varSymbol.value)
           ? CompletionItemKind.Color

packages/vscode-css-variables/README.md

@@ -17,9 +17,7 @@ let client: LanguageClient;
 
 export function activate(context: ExtensionContext) {
   // The server is implemented in node
-  const serverModule = context.asAbsolutePath(
-    path.join('dist', 'server.js'),
-  );
+  const serverModule = context.asAbsolutePath(path.join('dist', 'server.js'));
 
   // The debug options for the server
   // --inspect=6009: runs the server in Node's Inspector mode so VS Code can attach to the server for debugging
@@ -38,7 +36,26 @@ export function activate(context: ExtensionContext) {
 
   // Options to control the language client
   const clientOptions: LanguageClientOptions = {
-    documentSelector: [{ scheme: 'file' }, { scheme: 'untitled' }],
+    documentSelector: [
+      'onLanguage:astro',
+      'onLanguage:svelte',
+      'onLanguage:vue',
+      'onLanguage:vue-html',
+      'onLanguage:vue-postcss',
+      'onLanguage:scss',
+      'onLanguage:postcss',
+      'onLanguage:less',
+      'onLanguage:css',
+      'onLanguage:html',
+      'onLanguage:javascript',
+      'onLanguage:javascriptreact',
+      'onLanguage:typescript',
+      'onLanguage:typescriptreact',
+      'onLanguage:source.css.styled',
+    ].map((event) => ({
+      scheme: 'file',
+      language: event.split(':')[1],
+    })),
     synchronize: {
       fileEvents: [
         workspace.createFileSystemWatcher('**/*.css'),
@@ -54,7 +71,7 @@ export function activate(context: ExtensionContext) {
     'cssVariables',
     'CSS Variables Language Server',
     serverOptions,
-    clientOptions,
+    clientOptions
   );
 
   // Start the client. This will also launch the server