Fix crash when class regex matches an empty string (#897)

* Add tests

* Update TS configs

* Refactor

* Use `d` flag from RegExp

This means we no longer need an external package for this too!

* Refactor

* Remove dependency

* Don’t crash when regex is missing a capture group

* Update lockfile

* Update changelog

Author: thecrypticace

package-lock.json

@@ -992,21 +992,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 ================================================================================
 
-becke-ch--regex--s0-0-v1--base--pl--lib@1.4.0
-
-Copyright 2017 becke.ch - All Rights Reserved
-This file is part of becke-ch--regex--s0-v1
-
-becke.ch (MIT-style) License for the becke-ch--regex--s0-v1 Software
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-================================================================================
-
 css.escape@1.5.1
 
 Copyright Mathias Bynens <https://mathiasbynens.be/>

packages/tailwindcss-language-server/ThirdPartyNotices.txt

@@ -71,8 +71,8 @@
     "stack-trace": "0.0.10",
     "tailwindcss": "3.4.1",
     "@tailwindcss/language-service": "*",
-    "typescript": "4.6.4",
-    "vitest": "0.34.2",
+    "typescript": "5.3.3",
+    "vitest": "^1.1.2",
     "vscode-css-languageservice": "6.2.9",
     "vscode-jsonrpc": "8.1.0",
     "vscode-languageserver": "8.0.2",

packages/tailwindcss-language-server/package.json

@@ -84,6 +84,19 @@ withFixture('basic', (c) => {
     })
   })
 
+  test.concurrent('classRegex simple (no matches)', async () => {
+    let result = await completion({
+      text: 'tron ',
+      position: {
+        line: 0,
+        character: 5,
+      },
+      settings: { tailwindCSS: { experimental: { classRegex: ['test (\\S*)'] } } },
+    })
+
+    expect(result).toBe(null)
+  })
+
   test.concurrent('classRegex nested', async () => {
     await expectCompletions({
       text: 'test ""',
@@ -97,6 +110,68 @@ withFixture('basic', (c) => {
     })
   })
 
+  test.concurrent('classRegex nested (no matches, container)', async () => {
+    let result = await completion({
+      text: 'tron ""',
+      position: {
+        line: 0,
+        character: 6,
+      },
+      settings: {
+        tailwindCSS: { experimental: { classRegex: [['test (\\S*)', '"([^"]*)"']] } },
+      },
+    })
+
+    expect(result).toBe(null)
+  })
+
+  test.concurrent('classRegex nested (no matches, class)', async () => {
+    let result = await completion({
+      text: 'test ``',
+      position: {
+        line: 0,
+        character: 6,
+      },
+      settings: {
+        tailwindCSS: { experimental: { classRegex: [['test (\\S*)', '"([^"]*)"']] } },
+      },
+    })
+
+    expect(result).toBe(null)
+  })
+
+  test('classRegex matching empty string', async () => {
+    try {
+      let result = await completion({
+        text: "let _ = ''",
+        position: {
+          line: 0,
+          character: 18,
+        },
+        settings: {
+          tailwindCSS: { experimental: { classRegex: [["(?<=')(\\w*)(?=')"]] } },
+        },
+      })
+      expect(result).toBe(null)
+    } catch (err) {
+      console.log(err.toJson())
+      throw err
+    }
+
+    let result2 = await completion({
+      text: "let _ = ''; let _2 = 'text-",
+      position: {
+        line: 0,
+        character: 27,
+      },
+      settings: {
+        tailwindCSS: { experimental: { classRegex: [["(?<=')(\\w*)(?=')"]] } },
+      },
+    })
+
+    expect(result2).toBe(null)
+  })
+
   test.concurrent('resolve', async () => {
     let result = await completion({
       text: '<div class="">',

packages/tailwindcss-language-server/tests/completions/completions.test.js

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es6",
-    "lib": ["ES2020"],
+    "lib": ["ES2022"],
     "rootDir": "..",
     "sourceMap": true,
     "moduleResolution": "node",

packages/tailwindcss-language-server/tsconfig.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"
   }
 }

packages/tailwindcss-language-service/package.json

@@ -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<CompletionList> {
   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<Regex['exec']>
-
-      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<Regex['exec']>
-
-            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