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).
@@ -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 `` section will be available for completion in component's `` 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;
- classes: Map;
-};
-
-export class SelectorCompletionItemProvider implements CompletionItemProvider, Disposable {
- readonly start = Position.create(0, 0);
- readonly cache = new Map();
- readonly files = new Map();
- readonly watchers = new Map();
- 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('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 {
- 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 {
- 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 {
- 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, text: string) {
- const key = uri.toString();
- const items: CompletionItem[] = [];
- const findStyles = /(?:]*>([^<]+)<\/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): Promise {
- for (const key of this.getStyleSheets(uri)) {
- keys.add(await this.fetch(uri, key));
- }
- }
-
- async findLinks(uri: Uri, keys: Set, text: string): Promise {
- const findLinks = /]+)>/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, text: string, level = 0): Promise {
- 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 {
- const keys = new Set();
- 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();
- const classes = new Map();
-
- 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 {
- 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 {
- 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('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 {
- const config = workspace.getConfiguration('html-css-support');
-
- const isEnable = config.get('enable', true);
- if (!isEnable) {
- return;
- }
-
- const enabledLanguages = config.get('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();
+
+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();
+ 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();
+ 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> {
+ 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 {
+ 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('enabledLanguages', ['html']);
+}
+
+export function getStyleSheets(scope: TextDocument): string[] {
+ const path = Path.parse(scope.uri ?? '');
+
+ return workspace
+ .getConfiguration('html-css-support', scope)
+ .get('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.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"