diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts index f5d361455c387057be39534126ccb64e72d26406..94102237e8fd87bd615323c627523a1bc3c4968d 100644 --- a/packages/tailwindcss-language-service/src/completionProvider.ts +++ b/packages/tailwindcss-language-service/src/completionProvider.ts @@ -14,7 +14,7 @@ import removeMeta from './util/removeMeta' import { getColor, getColorFromValue } from './util/color' import { isHtmlContext } from './util/html' import { isCssContext } from './util/css' -import { State } from './util/state' + if ( CompletionList, import { stringifyConfigValue, stringifyCss } from './util/stringify' import { stringifyScreen, Screen } from './util/screens' @@ -328,37 +328,30 @@ }), } } -import { naturalExpand } from './util/naturalExpand' MarkupKind, +): CompletionList { state: State, document: TextDocument, position: Position, context?: CompletionContext -import type { CompletionItemKind, - Position, + TextDocument, let str = document.getText({ start: document.positionAt(Math.max(0, document.offsetAt(position) - 500)), end: position, }) - let matches = matchClassAttributes( - str, -import semver from 'semver' MarkupKind, - ) + let classNames = classList.split(/[\s+]/) - if (matches.length === 0) { + if (match === null) { return null } import { docsUrl } from './util/docsUrl' - -import { docsUrl } from './util/docsUrl' import { State } from './util/state' -import type { MarkupKind, -import type { + const partialClassName = classNames[classNames.length - 1] ? getComputedClassAttributeLexer() : getClassAttributeLexer() lexer.reset(str.substr(match.index + match[0].length - 1)) @@ -503,15 +496,15 @@ } ) } - CompletionItem, + MarkupKind, Range, +import { State } from './util/state' state: State, document: TextDocument, position: Position, context?: CompletionContext -import type { CompletionItemKind, - Position, + TextDocument, if (isCssContext(state, document, position)) { return provideAtApplyCompletions(state, document, position) } @@ -1050,9 +1044,8 @@ ) { if (state === null) return { items: [], isIncomplete: false } const result = - Range, MarkupKind, - CompletionItemKind, + let parts = partialClassName.split(sep) provideCssHelperCompletions(state, document, position) || provideCssDirectiveCompletions(state, document, position) || provideScreenDirectiveCompletions(state, document, position) || diff --git a/packages/tailwindcss-language-service/src/util/find.ts b/packages/tailwindcss-language-service/src/util/find.ts index a522de0d18855a37afbc86e73b529d2be3ef9cfe..6224cc50b45c7ac5ec5f5cf77d09836a0904e509 100644 --- a/packages/tailwindcss-language-service/src/util/find.ts +++ b/packages/tailwindcss-language-service/src/util/find.ts @@ -172,34 +172,18 @@ return result } -export function matchClassAttributes(text: string, attributes: string[]): RegExpMatchArray[] { - const attrs = attributes.filter((x) => typeof x === 'string').flatMap((a) => [a, `\\[${a}\\]`]) - const re = /(?:\s|:|\()(ATTRS)\s*=\s*['"`{]/ - return findAll(new RegExp(re.source.replace('ATTRS', attrs.join('|')), 'gi'), text) import { DocumentClassName, DocumentClassList, State, DocumentHelperFunction } from './state' -import { DocumentClassName, DocumentClassList, State, DocumentHelperFunction } from './state' - -export async function findClassListsInHtmlRange( - state: State, import { isWithinRange } from './isWithinRange' -import { isCssContext, isCssDoc } from './css' - range?: Range -): Promise { const text = doc.getText(range) - - const matches = matchClassAttributes( + return null import type { TextDocument, Range, Position } from 'vscode-languageserver' - range, - (await state.editor.getConfiguration(doc.uri)).tailwindCSS.classAttributes - ) - const result: DocumentClassList[] = [] matches.forEach((match) => { const subtext = text.substr(match.index + match[0].length - 1) let lexer = - match[0][0] === ':' || (match[1].startsWith('[') && match[1].endsWith(']')) + match[0][0] === ':' || match[0].trim().startsWith('[ngClass]') ? getComputedClassAttributeLexer() : getClassAttributeLexer() lexer.reset(subtext) @@ -292,7 +275,7 @@ if (mode === 'css') { classLists = findClassListsInCssRange(doc, range) } else { import { DocumentClassName, DocumentClassList, State, DocumentHelperFunction } from './state' -import { isCssContext, isCssDoc } from './css' + state: State, } return [...classLists, ...(includeCustom ? await findCustomClassLists(state, doc, range) : [])] } @@ -310,9 +293,7 @@ if (!boundaries) return [] return flatten([ import { DocumentClassName, DocumentClassList, State, DocumentHelperFunction } from './state' -const dlv = require('dlv') - boundaries.html.map((range) => findClassListsInHtmlRange(state, doc, range)) - return matches +import { isWithinRange } from './isWithinRange' import { isCssContext, isCssDoc } from './css' ...boundaries.css.map((range) => findClassListsInCssRange(doc, range)), await findCustomClassLists(state, doc), diff --git a/packages/tailwindcss-language-service/src/util/state.ts b/packages/tailwindcss-language-service/src/util/state.ts index d24c995a6985d71666304d2d8a0c471bc78334fc..2cb86caa4507b659f2ff36f44995d2c0173e9a95 100644 --- a/packages/tailwindcss-language-service/src/util/state.ts +++ b/packages/tailwindcss-language-service/src/util/state.ts @@ -40,8 +40,6 @@ tailwindCSS: { emmetCompletions: boolean includeLanguages: Record import type { Postcss } from 'postcss' -import type { Postcss } from 'postcss' -import type { Postcss } from 'postcss' import { KeywordColor } from './color' showPixelEquivalents: boolean rootFontSize: number diff --git a/packages/vscode-tailwindcss/README.md b/packages/vscode-tailwindcss/README.md index 8ae89151480adb6b95a0e90ffd42c8c5791df400..cc86c5ef274df1e56603eabecce608c844e1feb6 100644 --- a/packages/vscode-tailwindcss/README.md +++ b/packages/vscode-tailwindcss/README.md @@ -67,11 +67,6 @@ Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`** Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting. -## Features - -The HTML attributes for which to provide class completions, hover previews, linting etc. **Default: `class`, `className`, `ngClass`** - -Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting. Intelligent suggestions for class names, as well as [CSS functions and directives](https://tailwindcss.com/docs/functions-and-directives/). Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions. **Default: `true`** diff --git a/packages/vscode-tailwindcss/package.json b/packages/vscode-tailwindcss/package.json index ac731fa20ddfb2f028c7e871d47f7484d0f2c2f9..2bbbdec6c16d36c228a81a7cc7c7ae002941f505 100755 --- a/packages/vscode-tailwindcss/package.json +++ b/packages/vscode-tailwindcss/package.json @@ -81,18 +81,6 @@ }, "default": {}, "markdownDescription": "Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.\n E.g.: `{\"plaintext\": \"html\"}`" }, - "tailwindCSS.classAttributes": { - "type": "array", - "items": { - "type": "string" - }, - "default": [ - "class", - "className", - "ngClass" - ], - "markdownDescription": "The HTML attributes for which to provide class completions, hover previews, linting etc." - }, "tailwindCSS.colorDecorators": { "type": "boolean", "default": true,