diff --git a/README.md b/README.md
index bfd2653..19dc97e 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 > fork from a [ecmel/vscode-html-css](https://github.com/ecmel/vscode-html-css) | [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
 
-HTML id and class attribute "completion" for [coc.nvim](https://github.com/neoclide/coc.nvim).
+HTML `id` and `class` attribute completion for [coc.nvim](https://github.com/neoclide/coc.nvim).
 
 <img width="780" alt="coc-html-css-support-demo" src="https://user-images.githubusercontent.com/188642/116341049-2b5c8880-a81b-11eb-959e-2d03edda61fd.gif">
 
@@ -12,60 +12,179 @@ HTML id and class attribute "completion" for [coc.nvim](https://github.com/neocl
 
 ## Features
 
-- HTML id and class attribute completion.
-- Supports linked and embedded style sheets.
-- Supports template inheritance.
-- Supports additional style sheets.
-- Supports other HTML like languages.
+- HTML `id` and `class` attribute completion
+- Supports completion from in file defined styles
+- Supports specifying remote and local style sheets
+- Supports any language for completion
+- Supports go to definition for selectors
+- Validates class attributes on demand
 - Command to make `html.customData` built-in in `coc-html-css-support` available at the workspace level.
   - Require [coc-html](https://github.com/neoclide/coc-html)
 
-## Configuration options
+## Enable Extension
 
 - `html-css-support.enable`: Enable coc-html-css-support extension, default: `true`
-- `html-css-support.enabledLanguages`: List of languages which suggestions are desired, default: `["html"]`
-- `html-css-support.styleSheets`: List of local or remote style sheets for suggestions, default: `[]`
 
-## Commands
+## Supported Languages
 
-- `html-css-support.dispose`: Clear cache and reload the stylesheet
-- `html-css-support.customDataSetup`: Setup `html.customData` in workspace config. Supported customData are as follows
-  - `Alpine.js`
-  - `petite-vue`
+Supported languages can be configured with the `html-css-support.enabledLanguages` global setting. By default `html` is enabled:
+
+```json
+{
+  "html-css-support.enabledLanguages": ["html"]
+}
+```
+
+Extension can be configured to support any language where it makes sense such as `nunjucks`, `twig`, `mustache`, `vue`, `typescript` etc.
+
+## Specifying Style Sheets
+
+Remote and local style sheets with optional glob patterns and variable substitutions can be specified in VS Code settings per workspace folder in coc-settings.json: and will suggest in all configured languages within that workspace folder.
+
+Glob patterns for local style sheets can have the following syntax:
+
+| Pattern | Matches                                               |
+| ------- | ----------------------------------------------------- |
+| `*`     | zero or more characters in a path segment             |
+| `?`     | one character in a path segment                       |
+| `**`    | any number of path segments, including none           |
+| `{}`    | 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 |
+| `${fileExtname}`             | Current file's extension                  |
+
+## Examples
+
+Configuration depends on your layout of the project. The following most basic setup will suggest from all `css` files in project's `src` folder:
+
+**coc-settings.json:**
+
+```json
+{
+  "html-css-support.styleSheets": ["src/**/*.css"]
+}
+```
+
+### [Bootstrap](https://getbootstrap.com/)
+
+If Bootstrap `npm` module is used with additional `scss` the following can be a starting point:
+
+**coc-settings.json:**
+
+```json
+{
+  "html-css-support.styleSheets": [
+    "node_modules/bootstrap/dist/css/bootstrap.css",
+    "src/**/*.scss"
+  ]
+}
+```
+
+or in case of Bootstrap CDN with additional plain `css`:
+
+**coc-settings.json:**
+
+```json
+{
+  "html-css-support.styleSheets": [
+    "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
+    "src/**/*.css"
+  ]
+}
+```
+
+All of Bootstrap's class selectors with additional user defined styles in the project will be available for completion in `html` files.
 
-## Example settings
+### [Lit](https://lit.dev/)
 
-### Additional Style Sheets (Example)
+Enable `typescript` or `javascript` in global settings depending on your usage:
+
+```json
+{
+  "html-css-support.enabledLanguages": ["html", "typescript"]
+}
+```
+
+Component's [static styles](https://lit.dev/docs/components/styles/) will be available for completion elsewhere in the component. If you need to use some base styles in every component you can specify as follows:
 
 **coc-settings.json:**
 
 ```json
 {
-    "html-css-support.styleSheets": [
-        "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css",
-        "/style.css",
-        "style.css"
-    ]
+  "html-css-support.styleSheets": ["src/base-styles.ts"]
 }
 ```
 
-### Add other HTML like languages (Example)
+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:
 
 **coc-settings.json:**
 
 ```json
 {
-    "html-css-support.enabledLanguages": [
-        "html",
-        "vue",
-        "blade",
-        "htmldjango",
-        "typescriptreact",
-        "javascriptreact"
-    ]
+  "html-css-support.styleSheets": ["**/${fileBasenameNoExtension}-css.ts"]
+}
+```
+
+### [Vue](https://vuejs.org/)
+
+Install your favorite Vue language extension from CocInstall then enable `vue` in global settings:
+
+```json
+{
+  "html-css-support.enabledLanguages": ["html", "vue"]
 }
 ```
 
+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:
+
+**coc-settings.json:**
+
+```json
+{
+  "html-css-support.styleSheets": ["**/${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 (`gd` with the default configuration) on a selector will open the local style sheet which the selector is defined.
+
+## Commands
+
+### Validate class selectors
+
+Validates all `class` selectors in the active editor. Auto validation can be configured in extension settings globally or per workspace.
+
+```
+:CocCommand html-css-support.validate
+```
+
+### Clear style sheets cache
+
+Clears style sheets cache.
+
+```
+:CocCommand html-css-support.clear
+```
+
+### Additional Custom date
+
+- `html-css-support.customDataSetup`: Setup `html.customData` in workspace config. Supported customData are as follows
+  - `Alpine.js`
+  - `petite-vue`
+
 ## What is customData?
 
 You can read more about customData in the following repositories.
diff --git a/esbuild.js b/esbuild.js
index 87b2184..743286a 100644
--- a/esbuild.js
+++ b/esbuild.js
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 async function start(watch) {
   await require('esbuild').build({
-    entryPoints: ['src/index.ts'],
+    entryPoints: ['src/extension.ts'],
     bundle: true,
     watch,
     minify: process.env.NODE_ENV === 'production',
diff --git a/package.json b/package.json
index 18656bd..117d726 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.2",
+    "line-column": "^1.0.2",
     "node-fetch": "^2.6.1",
     "prettier": "^3.1.1",
     "rimraf": "^5.0.1",
@@ -82,12 +83,26 @@
           "type": "array",
           "description": "List of local or remote style sheets for suggestions.",
           "default": []
+        },
+        "html-css-support.autoValidation": {
+          "type": "string",
+          "description": "When to validate class selectors.",
+          "default": "Never",
+          "enum": [
+            "Never",
+            "Save",
+            "Always"
+          ]
         }
       }
     },
     "commands": [
       {
-        "command": "html-css-support.dispose",
+        "command": "html-css-support.validate",
+        "title": "Validate class selectors"
+      },
+      {
+        "command": "html-css-support.clear",
         "title": "Clear cache and reload the stylesheet"
       },
       {
diff --git a/src/completion.ts b/src/completion.ts
deleted file mode 100644
index d599286..0000000
--- a/src/completion.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import {
-  CompletionItem,
-  CompletionItemKind,
-  CompletionItemProvider,
-  Diagnostic,
-  DiagnosticSeverity,
-  Disposable,
-  Position,
-  ProviderResult,
-  Range,
-  TextDocument,
-  Uri,
-  workspace,
-} from 'coc.nvim';
-import { parse, walk } from 'css-tree';
-import fetch from 'node-fetch';
-import { basename, dirname, extname, isAbsolute, join } from 'path';
-
-export type Context = {
-  ids: Map<string, CompletionItem>;
-  classes: Map<string, CompletionItem>;
-};
-
-export class SelectorCompletionItemProvider implements CompletionItemProvider, Disposable {
-  readonly start = Position.create(0, 0);
-  readonly cache = new Map<string, CompletionItem[]>();
-  readonly files = new Map<string, string>();
-  readonly watchers = new Map<string, Disposable>();
-  readonly isRemote = /^https?:\/\//i;
-  readonly canComplete = /(id|class|className)\s*[=:]\s*("|')(?:(?!\2).)*$/is;
-  readonly findLinkRel = /rel\s*=\s*("|')((?:(?!\1).)+)\1/is;
-  readonly findLinkHref = /href\s*=\s*("|')((?:(?!\1).)+)\1/is;
-  readonly findExtended = /(?:{{<|{{>|{%\s*extends|@extends\s*\()\s*("|')?([./A-Za-z_0-9\\\-]+)\1\s*(?:\)|%}|}})/i;
-
-  dispose() {
-    this.watchers.forEach((e) => e.dispose());
-    this.watchers.clear();
-    this.cache.clear();
-    this.files.clear();
-  }
-
-  watchFile(path: string, listener: () => any) {
-    if (this.watchers.has(path)) {
-      return;
-    }
-
-    const watcher = workspace.createFileSystemWatcher(path);
-
-    watcher.onDidCreate(listener);
-    watcher.onDidChange(listener);
-    watcher.onDidDelete(listener);
-
-    this.watchers.set(path, watcher);
-  }
-
-  getStyleSheets(uri: Uri): string[] {
-    return workspace.getConfiguration('html-css-support', uri.toString()).get<string[]>('styleSheets', []);
-  }
-
-  getPath(uri: Uri, path: string, ext?: string): string {
-    const folder = workspace.getWorkspaceFolder(uri.toString());
-    const name = ext ? join(dirname(path), basename(path, ext) + ext) : path;
-
-    return folder ? join(isAbsolute(path) ? folder.uri : dirname(uri.fsPath), name) : join(dirname(uri.fsPath), name);
-  }
-
-  parseTextToItems(path: string, text: string, items: CompletionItem[]) {
-    walk(parse(text), (node) => {
-      let kind: CompletionItemKind;
-
-      switch (node.type) {
-        case 'ClassSelector':
-          kind = CompletionItemKind.Enum;
-          break;
-        case 'IdSelector':
-          kind = CompletionItemKind.Value;
-          break;
-        default:
-          return;
-      }
-
-      const resultCompletionItem: CompletionItem = {
-        label: node.name,
-        kind,
-        detail: 'filename: ' + path,
-      };
-
-      items.push(resultCompletionItem);
-    });
-  }
-
-  async fetchLocal(path: string): Promise<void> {
-    if (this.cache.has(path)) {
-      return;
-    }
-
-    const items: CompletionItem[] = [];
-
-    try {
-      const content = await workspace.readFile(path);
-      this.parseTextToItems(basename(path), content.toString(), items);
-    } catch (error) {}
-
-    this.cache.set(path, items);
-    this.watchFile(path, () => this.cache.delete(path));
-  }
-
-  async fetchRemote(path: string): Promise<void> {
-    if (this.cache.has(path)) {
-      return;
-    }
-
-    const items: CompletionItem[] = [];
-
-    try {
-      const res = await fetch(path);
-
-      if (res.ok) {
-        const text = await res.text();
-        this.parseTextToItems(basename(path), text, items);
-      }
-    } catch (error) {}
-
-    this.cache.set(path, items);
-  }
-
-  async fetch(uri: Uri, path: string): Promise<string> {
-    if (this.isRemote.test(path)) {
-      await this.fetchRemote(path);
-    } else {
-      const base = basename(uri.fsPath, extname(uri.fsPath));
-
-      path = this.getPath(uri, path.replace(/\${\s*fileBasenameNoExtension\s*}/, base));
-      await this.fetchLocal(path);
-    }
-
-    return path;
-  }
-
-  findEmbedded(uri: Uri, keys: Set<string>, text: string) {
-    const key = uri.toString();
-    const items: CompletionItem[] = [];
-    const findStyles = /(?:<style[^>]*>([^<]+)<\/style>|css\s*`([^`]+)`)/gi;
-
-    let style: string[] | null;
-
-    while ((style = findStyles.exec(text)) !== null) {
-      this.parseTextToItems(basename(uri.fsPath), style[1] || style[2], items);
-    }
-
-    this.cache.set(key, items);
-    keys.add(key);
-  }
-
-  async findFixed(uri: Uri, keys: Set<string>): Promise<void> {
-    for (const key of this.getStyleSheets(uri)) {
-      keys.add(await this.fetch(uri, key));
-    }
-  }
-
-  async findLinks(uri: Uri, keys: Set<string>, text: string): Promise<void> {
-    const findLinks = /<link([^>]+)>/gi;
-
-    let link: string[] | null, rel: string[] | null, href: string[] | null;
-
-    while ((link = findLinks.exec(text)) !== null) {
-      rel = this.findLinkRel.exec(link[1]);
-
-      if (rel && rel[2] === 'stylesheet') {
-        href = this.findLinkHref.exec(link[1]);
-
-        if (href) {
-          keys.add(await this.fetch(uri, href[2]));
-        }
-      }
-    }
-  }
-
-  async findInherited(uri: Uri, keys: Set<string>, text: string, level = 0): Promise<void> {
-    const extended = this.findExtended.exec(text);
-
-    if (extended && level < 3) {
-      level++;
-
-      const name = extended[2];
-      const ext = extname(name) || extname(uri.fsPath);
-      const path = this.getPath(uri, name, ext);
-      const file = Uri.file(path);
-
-      let text = this.files.get(path);
-
-      if (!text) {
-        try {
-          text = (await workspace.readFile(file.toString())).toString();
-        } catch (error) {
-          text = 'n/a';
-        }
-
-        this.files.set(path, text);
-        this.watchFile(path, () => this.files.delete(path));
-      }
-
-      this.findEmbedded(file, keys, text);
-
-      await this.findLinks(file, keys, text);
-      await this.findInherited(file, keys, text, level);
-    }
-  }
-
-  async findAll(document: TextDocument): Promise<Context> {
-    const keys = new Set<string>();
-    const uri = document.uri;
-    const text = document.getText();
-
-    this.findEmbedded(Uri.parse(uri), keys, text);
-
-    await this.findFixed(Uri.parse(uri), keys);
-    await this.findLinks(Uri.parse(uri), keys, text);
-    await this.findInherited(Uri.parse(uri), keys, text);
-
-    const ids = new Map<string, CompletionItem>();
-    const classes = new Map<string, CompletionItem>();
-
-    keys.forEach(
-      (key) =>
-        this.cache.get(key)?.forEach((e) => {
-          const res = e.kind === CompletionItemKind.Value ? ids : classes;
-          // ---- custom fix ----
-          e.label = e.label.replace('\\', '');
-          e.insertText = e.label.replace('\\', '');
-          // ---- /custom fix ----
-          res.set(e.label, e);
-        }),
-    );
-
-    return { ids, classes };
-  }
-
-  // MEMO: Not supported by coc-html-css-support.
-  async validate(document: TextDocument): Promise<Diagnostic[]> {
-    const context = await this.findAll(document);
-    const text = document.getText();
-    const diagnostics: Diagnostic[] = [];
-    const findAttribute = /(id|class|className)\s*=\s*("|')(.*?)\2/gis;
-
-    let attribute: string[] | null,
-      offset: number,
-      findSelector: RegExp,
-      value: any[] | null,
-      anchor: number,
-      end: Position,
-      start: Position;
-
-    while ((attribute = findAttribute.exec(text)) !== null) {
-      offset = findAttribute.lastIndex - attribute[3].length + attribute[3].indexOf(attribute[2]);
-
-      findSelector = /([^(\[{}\])\s]+)(?![^(\[{]*[}\])])/gi;
-
-      while ((value = findSelector.exec(attribute[3])) !== null) {
-        if (!(attribute[1] === 'id' ? context.ids : context.classes).has(value[1])) {
-          anchor = findSelector.lastIndex + offset;
-          end = document.positionAt(anchor);
-          start = document.positionAt(anchor - value[1].length);
-
-          diagnostics.push(
-            Diagnostic.create(
-              Range.create(start, end),
-              `CSS selector '${value[1]}' not found.`,
-              DiagnosticSeverity.Information,
-            ),
-          );
-        }
-      }
-    }
-
-    return diagnostics;
-  }
-
-  provideCompletionItems(document: TextDocument, position: Position): ProviderResult<CompletionItem[]> {
-    return new Promise((resolve) => {
-      const range = Range.create(this.start, position);
-      const text = document.getText(range);
-      const canComplete = this.canComplete.exec(text);
-
-      if (canComplete) {
-        this.findAll(document).then((context) =>
-          resolve([...(canComplete[1] === 'id' ? context.ids : context.classes).values()]),
-        );
-      } else {
-        resolve([]);
-      }
-    });
-  }
-}
diff --git a/src/extension.ts b/src/extension.ts
new file mode 100644
index 0000000..9fde263
--- /dev/null
+++ b/src/extension.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 1986-2024 Ecmel Ercan (https://ecmel.dev/)
+ * Licensed under the MIT License
+ */
+
+import { commands, ExtensionContext, languages, TextDocument, window, workspace } from 'coc.nvim';
+import { customDataSetupCommand } from './commands';
+import { AutoValidation, getAutoValidation, getEnabledLanguages } from './settings';
+import { Provider, clear, invalidate } from './provider';
+
+const enabledLanguages = getEnabledLanguages();
+const validations = languages.createDiagnosticCollection();
+const provider = new Provider();
+
+async function validate(document: TextDocument, type: AutoValidation | undefined) {
+  if (enabledLanguages.includes(document.languageId)) {
+    const validation = getAutoValidation(document);
+    if (!type || type === validation) {
+      validations.set(document.uri, await provider.validate(document));
+    } else if (validation !== AutoValidation.ALWAYS) {
+      validations.delete(document.uri);
+    }
+  }
+}
+
+export function activate(context: ExtensionContext) {
+  context.subscriptions.push(
+    languages.registerCompletionItemProvider('html-css-support', 'HCS', enabledLanguages, provider),
+    languages.registerDefinitionProvider(enabledLanguages, provider),
+    workspace.onDidSaveTextDocument(async (document) => {
+      invalidate(document.uri.toString());
+      await validate(document, AutoValidation.SAVE);
+    }),
+    workspace.onDidOpenTextDocument(async (document) => {
+      await validate(document, AutoValidation.ALWAYS);
+    }),
+    workspace.onDidChangeTextDocument(async (event) => {
+      if (event.contentChanges.length > 0) {
+        await validate(workspace.getDocument(event.bufnr).textDocument, AutoValidation.ALWAYS);
+      }
+    }),
+    workspace.onDidCloseTextDocument((document) => {
+      validations.delete(document.uri);
+    }),
+    commands.registerCommand('html-css-support.validate', async (type: AutoValidation | undefined) => {
+      const editor = window.activeTextEditor;
+      if (editor) {
+        await validate(editor.document.textDocument, type);
+      }
+    }),
+    commands.registerCommand('html-css-support.clear', () => clear()),
+  );
+
+  /** MEMO: Custom commands for coc-html-css-support */
+  context.subscriptions.push(
+    commands.registerCommand('html-css-support.customDataSetup', customDataSetupCommand(context)),
+  );
+  return commands.executeCommand<void>('html-css-support.validate', AutoValidation.ALWAYS);
+}
+
+export function deactivate() {}
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index 490566a..0000000
--- a/src/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { commands, ExtensionContext, languages, workspace } from 'coc.nvim';
-import { customDataSetupCommand } from './commands';
-import { SelectorCompletionItemProvider } from './completion';
-
-export async function activate(context: ExtensionContext): Promise<void> {
-  const config = workspace.getConfiguration('html-css-support');
-
-  const isEnable = config.get<boolean>('enable', true);
-  if (!isEnable) {
-    return;
-  }
-
-  const enabledLanguages = config.get<string[]>('enabledLanguages', ['html']);
-  const provider = new SelectorCompletionItemProvider();
-  context.subscriptions.push(
-    commands.registerCommand('html-css-support.dispose', () => provider.dispose()),
-    languages.registerCompletionItemProvider('html-css-support', 'HCS', enabledLanguages, provider),
-    provider,
-  );
-
-  /** MEMO: Custom commands for coc-html-css-support */
-  context.subscriptions.push(
-    commands.registerCommand('html-css-support.customDataSetup', customDataSetupCommand(context)),
-  );
-}
-
-export function deactivate() {}
diff --git a/src/parser.ts b/src/parser.ts
new file mode 100644
index 0000000..25286e9
--- /dev/null
+++ b/src/parser.ts
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 1986-2024 Ecmel Ercan (https://ecmel.dev/)
+ * Licensed under the MIT License
+ */
+
+import lineColumn from 'line-column';
+
+export const enum StyleType {
+  ID = '#',
+  CLASS = '.',
+}
+
+export interface Style {
+  index: number;
+  line: number;
+  col: number;
+  type: StyleType;
+  selector: string;
+  style: string;
+}
+
+export function parse(text: string) {
+  const selector = /([.#])(-?[_a-zA-Z\]+[\\!+_a-zA-Z0-9-]*)(?=[#.,()\s\[\]\^:*"'>=_a-zA-Z0-9-]*{([^}]*)})/g;
+  const styles: Style[] = [];
+  const lc = lineColumn(text, { origin: 0 });
+  let match,
+    lci,
+    index,
+    line = 0,
+    col = 0;
+  while ((match = selector.exec(text))) {
+    index = match.index;
+    lci = lc.fromIndex(index);
+    if (lci) {
+      line = lci.line;
+      col = lci.col + 1;
+    }
+    styles.push({
+      index,
+      line,
+      col,
+      type: match[1] as StyleType,
+      selector: match[2].replaceAll('\\', ''),
+      style: match[3],
+    });
+  }
+  return styles;
+}
diff --git a/src/provider.ts b/src/provider.ts
new file mode 100644
index 0000000..6e2e4c9
--- /dev/null
+++ b/src/provider.ts
@@ -0,0 +1,247 @@
+/*
+ * Copyright (c) 1986-2024 Ecmel Ercan (https://ecmel.dev/)
+ * Licensed under the MIT License
+ */
+
+import {
+  CancellationToken,
+  CompletionContext,
+  CompletionItem,
+  CompletionItemKind,
+  CompletionItemProvider,
+  CompletionList,
+  Definition,
+  DefinitionProvider,
+  Diagnostic,
+  DiagnosticSeverity,
+  Location,
+  LocationLink,
+  Position,
+  ProviderResult,
+  Range,
+  RelativePattern,
+  TextDocument,
+  Uri,
+  window,
+  workspace,
+  WorkspaceFolder,
+} from 'coc.nvim';
+import { getStyleSheets } from './settings';
+import { Style, StyleType, parse } from './parser';
+
+const start = Position.create(0, 0);
+const cache = new Map<string, Style[]>();
+
+export class Provider implements CompletionItemProvider, DefinitionProvider {
+  private get isRemote() {
+    return /^https?:\/\//i;
+  }
+
+  private get wordRange() {
+    return /[_a-zA-Z0-9-]+/;
+  }
+
+  private get canComplete() {
+    return /(id|class|className|[.#])\s*[=:]?\s*(["'])(?:.(?!\2))*$/is;
+  }
+
+  private async fetch(url: string) {
+    try {
+      const res = await fetch(url);
+      if (res.ok) {
+        return res.text();
+      }
+      throw new Error(res.statusText);
+    } catch (error) {
+      window.showErrorMessage(`Fetching ${url} failed. ${error}`);
+    }
+    return '';
+  }
+
+  private async getRemote(name: string) {
+    let styles = cache.get(name);
+    if (!styles) {
+      const content = await this.fetch(name);
+      styles = parse(content);
+      cache.set(name, styles);
+    }
+    return styles;
+  }
+
+  private async getLocal(uri: Uri) {
+    const name = uri.toString();
+    let styles = cache.get(name);
+    if (!styles) {
+      const content = await workspace.readFile(name);
+      styles = parse(content.toString());
+      cache.set(name, styles);
+    }
+    return styles;
+  }
+
+  private getRelativePattern(folder: WorkspaceFolder, glob: string) {
+    return new RelativePattern(folder, glob);
+  }
+
+  private async getStyles(document: TextDocument) {
+    const styles = new Map<string, Style[]>();
+    const folder = workspace.getWorkspaceFolder(document.uri);
+    const globs = getStyleSheets(document);
+
+    for (const glob of globs) {
+      if (this.isRemote.test(glob)) {
+        styles.set(glob, await this.getRemote(glob));
+      } else if (folder) {
+        const files = await workspace.findFiles(this.getRelativePattern(folder, glob));
+        for (const file of files) {
+          styles.set(file.toString(), await this.getLocal(file));
+        }
+      }
+    }
+    styles.set(document.uri.toString(), parse(document.getText()));
+    return styles;
+  }
+
+  private async getCompletionMap(document: TextDocument, type: StyleType) {
+    const map = new Map<string, CompletionItem>();
+    const styles = await this.getStyles(document);
+
+    for (const [key, value] of styles.entries()) {
+      for (const style of value) {
+        if (style.type === type) {
+          const relativeFilePath = workspace.asRelativePath(Uri.parse(key).fsPath);
+          const resultCompletionItem: CompletionItem = {
+            label: style.selector,
+            filterText: style.selector,
+            kind: style.type === StyleType.ID ? CompletionItemKind.Value : CompletionItemKind.Enum,
+            detail: style.type + style.selector,
+            documentation: {
+              kind: 'markdown',
+              value:
+                '```css\n' +
+                style.type +
+                style.selector +
+                ' {' +
+                style.style +
+                '}\n```\n' +
+                relativeFilePath +
+                ':' +
+                style.line,
+            },
+          };
+          map.set(style.selector, resultCompletionItem);
+        }
+      }
+    }
+    return map;
+  }
+
+  private async getCompletionItems(document: TextDocument, position: Position, type: StyleType) {
+    //const range = document.getWordRangeAtPosition(position, this.wordRange);
+    const map = await this.getCompletionMap(document, type);
+    return [...map.values()];
+    // TODO
+    // const items = [];
+
+    // for (const item of map.values()) {
+    //   item.range = range;
+    //   items.push(item);
+    // }
+    // return items;
+  }
+
+  provideCompletionItems(
+    document: TextDocument,
+    position: Position,
+    token: CancellationToken,
+    context: CompletionContext,
+  ): ProviderResult<CompletionItem[] | CompletionList<CompletionItem>> {
+    const range = Range.create(start, position);
+    const text = document.getText(range);
+    const match = this.canComplete.exec(text);
+
+    return new Promise((resolve, reject) =>
+      match && !token.isCancellationRequested
+        ? resolve(this.getCompletionItems(document, position, match[1] === 'id' ? StyleType.ID : StyleType.CLASS))
+        : reject(),
+    );
+  }
+
+  private async getDefinitions(document: TextDocument, position: Position) {
+    const doc = workspace.getDocument(document.uri);
+    const range = doc.getWordRangeAtPosition(position, '_-');
+    const styles = await this.getStyles(document);
+    const selector = document.getText(range);
+    const locations: Location[] = [];
+
+    for (const entry of styles) {
+      if (!this.isRemote.test(entry[0])) {
+        entry[1]
+          .filter((style) => style.selector === selector)
+          .forEach((style) =>
+            locations.push(
+              Location.create(
+                entry[0],
+                Range.create(Position.create(style.line, style.col), Position.create(style.line, style.col)),
+              ),
+            ),
+          );
+      }
+    }
+    return locations;
+  }
+
+  provideDefinition(
+    document: TextDocument,
+    position: Position,
+    token: CancellationToken,
+  ): ProviderResult<Definition | LocationLink[]> {
+    const range = Range.create(start, position);
+    const text = document.getText(range);
+    const match = this.canComplete.exec(text);
+
+    return new Promise((resolve, reject) =>
+      match && !token.isCancellationRequested ? resolve(this.getDefinitions(document, position)) : reject(),
+    );
+  }
+
+  async validate(document: TextDocument) {
+    const findSelector = /([^(\[{}\])\s]+)(?![^(\[{]*[}\])])/gi;
+    const findAttribute = /(class|className)\s*[=:]\s*(["'])(.*?)\2/gis;
+    const diagnostics: Diagnostic[] = [];
+    const map = await this.getCompletionMap(document, StyleType.CLASS);
+    const text = document.getText();
+
+    let attribute, offset, value, anchor, end, start;
+
+    while ((attribute = findAttribute.exec(text))) {
+      offset = findAttribute.lastIndex - attribute[3].length + attribute[3].indexOf(attribute[2]);
+
+      while ((value = findSelector.exec(attribute[3]))) {
+        if (!map.has(value[1])) {
+          anchor = findSelector.lastIndex + offset;
+          end = document.positionAt(anchor);
+          start = document.positionAt(anchor - value[1].length);
+
+          diagnostics.push(
+            Diagnostic.create(
+              Range.create(start, end),
+              `CSS selector '${value[1]}' not found.`,
+              DiagnosticSeverity.Warning,
+            ),
+          );
+        }
+      }
+    }
+    return diagnostics;
+  }
+}
+
+export function clear() {
+  window.showInformationMessage(`Style sheets cache cleared: ${cache.size}`);
+  cache.clear();
+}
+
+export function invalidate(name: string) {
+  cache.delete(name);
+}
diff --git a/src/settings.ts b/src/settings.ts
new file mode 100644
index 0000000..0928480
--- /dev/null
+++ b/src/settings.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 1986-2024 Ecmel Ercan (https://ecmel.dev/)
+ * Licensed under the MIT License
+ */
+
+import Path from 'path';
+import { TextDocument, workspace } from 'coc.nvim';
+
+export function getEnabledLanguages(): string[] {
+  return workspace.getConfiguration('html-css-support').get<string[]>('enabledLanguages', ['html']);
+}
+
+export function getStyleSheets(scope: TextDocument): string[] {
+  const path = Path.parse(scope.uri ?? '');
+
+  return workspace
+    .getConfiguration('html-css-support', scope)
+    .get<string[]>('styleSheets', [])
+    .map((glob) =>
+      glob.replace(/\$\s*{\s*(fileBasenameNoExtension|fileBasename|fileExtname)\s*}/g, (match, variable) =>
+        variable === 'fileBasename' ? path.base : variable === 'fileExtname' ? path.ext : path.name,
+      ),
+    );
+}
+
+export const enum AutoValidation {
+  NEVER = 'Never',
+  SAVE = 'Save',
+  ALWAYS = 'Always',
+}
+
+export function getAutoValidation(scope: TextDocument): AutoValidation {
+  return workspace.getConfiguration('html-css-support', scope).get<AutoValidation>('autoValidation', AutoValidation.NEVER);
+}
diff --git a/yarn.lock b/yarn.lock
index 79fd140..330467e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1071,11 +1071,23 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@1.0.0, isarray@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==
+  dependencies:
+    isarray "1.0.0"
+
 jackspeak@^2.3.5:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
@@ -1110,6 +1122,14 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+line-column@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
+  integrity sha512-Ktrjk5noGYlHsVnYWh62FLVs4hTb8A3e+vucNZMgPeAOITdshMSgv4cCZQeRDjm7+goqmo6+liZwTXo+U3sVww==
+  dependencies:
+    isarray "^1.0.0"
+    isobject "^2.0.0"
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"