',
diff --git a/packages/tailwindcss-language-server/tsconfig.json b/packages/tailwindcss-language-server/tsconfig.json
index f8858fbe..5bdc89a7 100755
--- a/packages/tailwindcss-language-server/tsconfig.json
+++ b/packages/tailwindcss-language-server/tsconfig.json
@@ -2,7 +2,7 @@
"compilerOptions": {
"module": "commonjs",
"target": "es6",
- "lib": ["ES2020"],
+ "lib": ["ES2022"],
"rootDir": "..",
"sourceMap": true,
"moduleResolution": "node",
diff --git a/packages/tailwindcss-language-service/package.json b/packages/tailwindcss-language-service/package.json
index b42477e3..ad8f92ca 100644
--- a/packages/tailwindcss-language-service/package.json
+++ b/packages/tailwindcss-language-service/package.json
@@ -9,7 +9,8 @@
"scripts": {
"start": "node ./scripts/build.mjs --watch",
"build": "node ./scripts/build.mjs",
- "prepublishOnly": "npm run build"
+ "prepublishOnly": "npm run build",
+ "test": "vitest"
},
"dependencies": {
"@csstools/css-parser-algorithms": "2.1.1",
@@ -18,7 +19,6 @@
"@types/culori": "^2.0.0",
"@types/moo": "0.5.3",
"@types/semver": "7.3.10",
- "becke-ch--regex--s0-0-v1--base--pl--lib": "1.4.0",
"color-name": "1.1.4",
"css.escape": "1.5.1",
"culori": "0.20.1",
@@ -43,6 +43,7 @@
"esbuild-node-externals": "^1.9.0",
"prettier": "2.3.0",
"tslib": "2.2.0",
- "typescript": "^5.2"
+ "typescript": "^5.3.3",
+ "vitest": "^1.1.2"
}
}
diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 6468b93a..a8c39341 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -31,11 +31,11 @@ import { flagEnabled } from './util/flagEnabled'
import * as jit from './util/jit'
import { getVariantsFromClassName } from './util/getVariantsFromClassName'
import * as culori from 'culori'
-import Regex from 'becke-ch--regex--s0-0-v1--base--pl--lib'
import {
addPixelEquivalentsToMediaQuery,
addPixelEquivalentsToValue,
} from './util/pixelEquivalents'
+import { customClassesIn } from './util/classes'
let isUtil = (className) =>
Array.isArray(className.__info)
@@ -503,71 +503,32 @@ async function provideCustomClassNameCompletions(
context?: CompletionContext
): Promise
{
const settings = await state.editor.getConfiguration(document.uri)
- const regexes = settings.tailwindCSS.experimental.classRegex
- if (regexes.length === 0) return null
+ const filters = settings.tailwindCSS.experimental.classRegex
+ if (filters.length === 0) return null
- const positionOffset = document.offsetAt(position)
+ const cursor = document.offsetAt(position)
- const searchRange: Range = {
+ let text = document.getText({
start: document.positionAt(0),
- end: document.positionAt(positionOffset + 2000),
- }
-
- let str = document.getText(searchRange)
-
- for (let i = 0; i < regexes.length; i++) {
- try {
- let [containerRegexString, classRegexString] = Array.isArray(regexes[i])
- ? regexes[i]
- : [regexes[i]]
-
- let containerRegex = new Regex(containerRegexString, 'g')
- let containerMatch: ReturnType
-
- while ((containerMatch = containerRegex.exec(str)) !== null) {
- const searchStart = document.offsetAt(searchRange.start)
- const matchStart = searchStart + containerMatch.index[1]
- const matchEnd = matchStart + containerMatch[1].length
- const cursor = document.offsetAt(position)
- if (cursor >= matchStart && cursor <= matchEnd) {
- let classList: string
-
- if (classRegexString) {
- let classRegex = new Regex(classRegexString, 'g')
- let classMatch: ReturnType
-
- while ((classMatch = classRegex.exec(containerMatch[1])) !== null) {
- const classMatchStart = matchStart + classMatch.index[1]
- const classMatchEnd = classMatchStart + classMatch[1].length
- if (cursor >= classMatchStart && cursor <= classMatchEnd) {
- classList = classMatch[1].substr(0, cursor - classMatchStart)
- }
- }
-
- if (typeof classList === 'undefined') {
- throw Error()
- }
- } else {
- classList = containerMatch[1].substr(0, cursor - matchStart)
- }
+ end: document.positionAt(cursor + 2000),
+ })
- return completionsFromClassList(
- state,
- classList,
- {
- start: {
- line: position.line,
- character: position.character - classList.length,
- },
- end: position,
- },
- settings.tailwindCSS.rootFontSize,
- undefined,
- context
- )
- }
- }
- } catch (_) {}
+ // Get completions from the first matching regex or regex pair
+ for (let match of customClassesIn({ text, cursor, filters })) {
+ return completionsFromClassList(
+ state,
+ match.classList,
+ {
+ start: {
+ line: position.line,
+ character: position.character - match.classList.length,
+ },
+ end: position,
+ },
+ settings.tailwindCSS.rootFontSize,
+ undefined,
+ context
+ )
}
return null
diff --git a/packages/tailwindcss-language-service/src/util/classes.test.ts b/packages/tailwindcss-language-service/src/util/classes.test.ts
new file mode 100644
index 00000000..2c7f117c
--- /dev/null
+++ b/packages/tailwindcss-language-service/src/util/classes.test.ts
@@ -0,0 +1,213 @@
+import { expect, test } from 'vitest'
+import { ClassMatch, ClassRegexFilter, customClassesIn } from './classes'
+
+interface TestRecord {
+ name: string,
+ text: string,
+ cursor: number | null,
+ filters: ClassRegexFilter[],
+ expected: ClassMatch[]
+}
+
+let table: TestRecord[] = [
+ {
+ name: 'empty',
+ text: 'test ',
+ cursor: 0,
+ filters: [],
+ expected: [],
+ },
+
+ // Container regex only
+ {
+ name: 'simple (single, matches: yes)',
+ text: 'test ""',
+ cursor: 5,
+ filters: [['test (\\S*)']],
+ expected: [{ classList: '', range: [5, 7] }],
+ },
+
+ {
+ name: 'simple (single, matches: no)',
+ text: 'tron ""',
+ cursor: 5,
+ filters: [['test (\\S*)']],
+ expected: []
+ },
+
+ {
+ name: 'simple (multiple, matches: yes)',
+ text: 'tron ""',
+ cursor: 5,
+ filters: [['test (\\S*)'], ['tron (\\S*)']],
+ expected: [{ classList: '', range: [5, 7] }],
+ },
+
+ {
+ name: 'simple (multiple, matches: no)',
+ text: 'nope ""',
+ cursor: 5,
+ filters: [['test (\\S*)'], ['tron (\\S*)']],
+ expected: []
+ },
+
+ // Container + class regex
+ {
+ name: 'nested (single, matches: yes)',
+ text: 'test ""',
+ cursor: 6,
+ filters: [['test (\\S*)', '"([^"]*)"']],
+ expected: [{ classList: '', range: [6, 6] }],
+ },
+
+ {
+ name: 'nested (single, matches: no)',
+ text: 'tron ""',
+ cursor: 6,
+ filters: [['test (\\S*)', '"([^"]*)"']],
+ expected: []
+ },
+
+ {
+ name: 'nested (multiple, matches: yes)',
+ text: 'tron ""',
+ cursor: 6,
+ filters: [['test (\\S*)', '"([^"]*)"'], ['tron (\\S*)', '"([^"]*)"']],
+ expected: [{ classList: '', range: [6, 6] }],
+ },
+
+ {
+ name: 'nested (multiple, matches: no)',
+ text: 'nope ""',
+ cursor: 6,
+ filters: [['test (\\S*)', '"([^"]*)"'], ['tron (\\S*)', '"([^"]*)"']],
+ expected: []
+ },
+
+ // Cursor position validation
+ {
+ name: 'cursor, container: inside #1',
+ text: ` `,
+ cursor: 17,
+ filters: [['class="([^"]*)"']],
+ expected: [{ classList: 'text-', range: [12, 17] }],
+ },
+
+ {
+ name: 'cursor, container: inside #2',
+ text: ` `,
+ cursor: 37,
+ filters: [['class="([^"]*)"']],
+ expected: [{ classList: 'bg-', range: [34, 37] }],
+ },
+
+ {
+ name: 'cursor, container: outside',
+ text: ` `,
+ cursor: 11,
+ filters: [['class="([^"]*)"']],
+ expected: []
+ },
+
+ {
+ name: 'cursor, container: inside #1, class: inside #1',
+ text: ` `,
+ cursor: 23,
+ filters: [['clsx\\(([^)]*)\\)', '"([^"]*)"']],
+ expected: [{ classList: 'text-', range: [18, 23] }],
+ },
+
+ {
+ name: 'cursor, container: inside #1, class: inside #2',
+ text: ` `,
+ cursor: 38,
+ filters: [['clsx\\(([^)]*)\\)', '"([^"]*)"']],
+ expected: [{ classList: 'decoration-', range: [27, 38] }],
+ },
+
+ {
+ name: 'cursor, container: inside #2, class: inside #1',
+ text: ` `,
+ cursor: 66,
+ filters: [['clsx\\(([^)]*)\\)', '"([^"]*)"']],
+ expected: [{ classList: 'bg-', range: [63, 66] }],
+ },
+
+ {
+ name: 'cursor, container: inside #1, class: outside',
+ text: ` `,
+ cursor: 17,
+ filters: [['clsx\\(([^)]*)\\)', '"([^"]*)"']],
+ expected: [],
+ },
+
+ {
+ name: 'cursor, container: inside #2, class: outside',
+ text: ` `,
+ cursor: 62,
+ filters: [['clsx\\(([^)]*)\\)', '"([^"]*)"']],
+ expected: [],
+ },
+
+ // No cursor = multiple results
+ {
+ name: 'cursor, container: inside #1',
+ text: ` `,
+ cursor: null,
+ filters: [['class="([^"]*)"']],
+ expected: [{ classList: 'text-', range: [12, 17] }, { classList: 'bg-', range: [34, 37] }],
+ },
+
+ // Edge cases
+ {
+ name: 'container regex matches empty string',
+ text: `let _ = ""`,
+ cursor: 9,
+ filters: [['(?<=")(\\w*)(?=")']],
+ expected: [{ classList: '', range: [9, 9] }],
+ },
+
+ {
+ name: 'container regex matches empty string (no cursor)',
+ text: `let _ = ""`,
+ cursor: null,
+ filters: [['(?<=")(\\w*)(?=")']],
+ expected: [{ classList: '', range: [9, 9] }],
+ },
+
+ {
+ name: 'class regex matches empty string',
+ text: `let _ = clsx("")`,
+ cursor: 14,
+ filters: [['clsx\\(([^)]*)\\)', '(?<=")([^"]*)(?<=")']],
+ expected: [{ classList: '', range: [14, 14] }],
+ },
+
+ {
+ name: 'class regex matches empty string (no cursor)',
+ text: `let _ = clsx("")`,
+ cursor: null,
+ filters: [['clsx\\(([^)]*)\\)', '(?<=")([^"]*)(?<=")']],
+ expected: [{ classList: '', range: [14, 14] }, { classList: '', range: [15, 15] }],
+ },
+
+ {
+ name: 'container regex is missing a capture group',
+ text: `let _ = ""`,
+ cursor: null,
+ filters: [['(?<=")\\w*(?=")']],
+ expected: [],
+ },
+
+ {
+ name: 'class regex is missing a capture group',
+ text: `let _ = clsx("")`,
+ cursor: null,
+ filters: [['clsx\\(([^)]*)\\)', '"[^"]*"']],
+ expected: [],
+ },
+]
+
+test.each(table)('customClassesIn: $name', ({ text, cursor, filters, expected }) => {
+ expect(Array.from(customClassesIn({ text, filters, cursor }))).toStrictEqual(expected)
+})
diff --git a/packages/tailwindcss-language-service/src/util/classes.ts b/packages/tailwindcss-language-service/src/util/classes.ts
new file mode 100644
index 00000000..0bdbd397
--- /dev/null
+++ b/packages/tailwindcss-language-service/src/util/classes.ts
@@ -0,0 +1,85 @@
+export type ClassRegexFilter = string | [string] | [string, string]
+export interface ClassMatch {
+ classList: string
+ range: [start: number, end: number]
+}
+
+export function *customClassesIn({
+ text,
+ filters,
+ cursor = null,
+} : {
+ text: string,
+ filters: ClassRegexFilter[],
+ cursor?: number | null,
+}): Iterable {
+ for (let filter of filters) {
+ let [containerPattern, classPattern] = Array.isArray(filter)
+ ? filter
+ : [filter]
+
+ let containerRegex = new RegExp(containerPattern, 'gd')
+ let classRegex = classPattern ? new RegExp(classPattern, 'gd') : undefined
+
+ for (let match of matchesIn(text, containerRegex, classRegex, cursor)) {
+ yield match
+ }
+ }
+}
+
+function *matchesIn(
+ text: string,
+ containerRegex: RegExp,
+ classRegex: RegExp | undefined,
+ cursor: number | null,
+): Iterable {
+ for (let containerMatch of text.matchAll(containerRegex)) {
+ // Don't crash when there's no capture group
+ if (containerMatch[1] === undefined) {
+ console.warn(`Regex /${containerRegex.source}/ must have exactly one capture group`)
+ continue
+ }
+
+ const matchStart = containerMatch.indices[1][0]
+ const matchEnd = matchStart + containerMatch[1].length
+
+ // Cursor is outside of the match
+ if (cursor !== null && (cursor < matchStart || cursor > matchEnd)) {
+ continue
+ }
+
+ if (! classRegex) {
+ yield {
+ classList: cursor !== null
+ ? containerMatch[1].slice(0, cursor - matchStart)
+ : containerMatch[1],
+ range: [matchStart, matchEnd],
+ }
+ continue
+ }
+
+ // Handle class matches inside the "container"
+ for (let classMatch of containerMatch[1].matchAll(classRegex)) {
+ // Don't crash when there's no capture group
+ if (classMatch[1] === undefined) {
+ console.warn(`Regex /${classRegex.source}/ must have exactly one capture group`)
+ continue
+ }
+
+ const classMatchStart = matchStart + classMatch.indices[1][0]
+ const classMatchEnd = classMatchStart + classMatch[1].length
+
+ // Cursor is outside of the match
+ if (cursor !== null && (cursor < classMatchStart || cursor > classMatchEnd)) {
+ continue
+ }
+
+ yield {
+ classList: cursor !== null
+ ? classMatch[1].slice(0, cursor - classMatchStart)
+ : classMatch[1],
+ range: [classMatchStart, classMatchEnd],
+ }
+ }
+ }
+}
diff --git a/packages/tailwindcss-language-service/src/util/find.ts b/packages/tailwindcss-language-service/src/util/find.ts
index 5dfc7e71..692c6106 100644
--- a/packages/tailwindcss-language-service/src/util/find.ts
+++ b/packages/tailwindcss-language-service/src/util/find.ts
@@ -10,9 +10,9 @@ import { dedupeByRange, flatten } from './array'
import { getClassAttributeLexer, getComputedClassAttributeLexer } from './lexers'
import { getLanguageBoundaries } from './getLanguageBoundaries'
import { resolveRange } from './resolveRange'
-import Regex from 'becke-ch--regex--s0-0-v1--base--pl--lib'
import { getTextWithoutComments } from './doc'
import { isSemicolonlessCssLanguage } from './languages'
+import { customClassesIn } from './classes'
export function findAll(re: RegExp, str: string): RegExpMatchArray[] {
let match: RegExpMatchArray
@@ -132,52 +132,24 @@ async function findCustomClassLists(
): Promise {
const settings = await state.editor.getConfiguration(doc.uri)
const regexes = settings.tailwindCSS.experimental.classRegex
-
if (!Array.isArray(regexes) || regexes.length === 0) return []
const text = doc.getText(range ? { ...range, start: doc.positionAt(0) } : undefined)
const result: DocumentClassList[] = []
- for (let i = 0; i < regexes.length; i++) {
- try {
- let [containerRegexString, classRegexString] = Array.isArray(regexes[i])
- ? regexes[i]
- : [regexes[i]]
-
- let containerRegex = new Regex(containerRegexString, 'g')
- let containerMatch: ReturnType
-
- while ((containerMatch = containerRegex.exec(text)) !== null) {
- const searchStart = doc.offsetAt({ line: 0, character: 0 })
- const matchStart = searchStart + containerMatch.index[1]
- const matchEnd = matchStart + containerMatch[1].length
-
- if (classRegexString) {
- let classRegex = new Regex(classRegexString, 'g')
- let classMatch: ReturnType
-
- while ((classMatch = classRegex.exec(containerMatch[1])) !== null) {
- const classMatchStart = matchStart + classMatch.index[1]
- const classMatchEnd = classMatchStart + classMatch[1].length
- result.push({
- classList: classMatch[1],
- range: {
- start: doc.positionAt(classMatchStart),
- end: doc.positionAt(classMatchEnd),
- },
- })
- }
- } else {
- result.push({
- classList: containerMatch[1],
- range: {
- start: doc.positionAt(matchStart),
- end: doc.positionAt(matchEnd),
- },
- })
- }
- }
- } catch (_) {}
+ try {
+ for (let match of customClassesIn({ text, filters: regexes })) {
+ result.push({
+ classList: match.classList,
+ range: {
+ start: doc.positionAt(match.range[0]),
+ end: doc.positionAt(match.range[1]),
+ },
+ })
+ }
+ } catch (err) {
+ console.log(JSON.stringify({ text, filters: regexes }))
+ throw new Error('Failed to parse custom class regex')
}
return result
diff --git a/packages/tailwindcss-language-service/tsconfig.json b/packages/tailwindcss-language-service/tsconfig.json
index e089ae94..605ece3c 100644
--- a/packages/tailwindcss-language-service/tsconfig.json
+++ b/packages/tailwindcss-language-service/tsconfig.json
@@ -1,9 +1,10 @@
{
"include": ["src", "../../types"],
+ "exclude": ["src/**/*.test.ts"],
"compilerOptions": {
"module": "NodeNext",
- "lib": ["ES2020"],
- "target": "ES2020",
+ "lib": ["ES2022"],
+ "target": "ES2022",
"importHelpers": true,
"declaration": true,
"sourceMap": true,
diff --git a/packages/tailwindcss-language-service/vitest.config.ts b/packages/tailwindcss-language-service/vitest.config.ts
new file mode 100644
index 00000000..a079f2e6
--- /dev/null
+++ b/packages/tailwindcss-language-service/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+ test: {
+ testTimeout: 15000,
+ },
+})
diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
index 5dd89fd6..622e105d 100644
--- a/packages/vscode-tailwindcss/CHANGELOG.md
+++ b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -2,7 +2,7 @@
## 0.11.x (Pre-Release)
-- Nothing yet!
+- Fix crash when class regex matches an empty string (#897)
## 0.10.5
diff --git a/packages/vscode-tailwindcss/package.json b/packages/vscode-tailwindcss/package.json
index 418af822..2a8efe4e 100755
--- a/packages/vscode-tailwindcss/package.json
+++ b/packages/vscode-tailwindcss/package.json
@@ -341,6 +341,7 @@
"@types/braces": "3.0.1",
"@types/vscode": "1.65.0",
"@vscode/vsce": "2.21.1",
+ "typescript": "5.3.3",
"braces": "3.0.2",
"color-name": "1.1.4",
"concurrently": "7.0.0",
diff --git a/packages/vscode-tailwindcss/tsconfig.json b/packages/vscode-tailwindcss/tsconfig.json
index 24a8d1ce..0fcbc55c 100755
--- a/packages/vscode-tailwindcss/tsconfig.json
+++ b/packages/vscode-tailwindcss/tsconfig.json
@@ -2,7 +2,7 @@
"compilerOptions": {
"module": "commonjs",
"target": "es6",
- "lib": ["ES2020"],
+ "lib": ["ES2022"],
"rootDir": "..",
"sourceMap": true,
"moduleResolution": "node",
diff --git a/types/becke-ch--regex--s0-0-v1--base--pl--lib.d.ts b/types/becke-ch--regex--s0-0-v1--base--pl--lib.d.ts
deleted file mode 100644
index 607dc979..00000000
--- a/types/becke-ch--regex--s0-0-v1--base--pl--lib.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module 'becke-ch--regex--s0-0-v1--base--pl--lib' {
- export default class Regex {
- constructor(regex: string, modifiers?: string)
- exec(str: string): null | (string[] & { index: number[] })
- }
-}