Fix suggestion of utilities with slashes in them in v4 (#1182)

All utilities implicitly have at least `modifiers: []` in the class list
when no modifiers are present. We should only change the completion list
when there are actually modifiers to show in case an existing utility
with a slash in it (e.g. `w-1/2`) is “close” to what the user has typed.

This is the other half to fix #1178 b/c while the completions show up
but as soon as you type `/` they disappear which is an awful experience.

Author: thecrypticace

packages/tailwindcss-language-service/src/completionProvider.ts

@@ -91,10 +91,11 @@ export function completionsFromClassList(
       let beforeSlash = partialClassName.split('/').slice(0, -1).join('/')
 
       let baseClassName = beforeSlash.slice(offset)
-      modifiers = state.classList.find((cls) => Array.isArray(cls) && cls[0] === baseClassName)?.[1]
-        ?.modifiers
+      modifiers =
+        state.classList.find((cls) => Array.isArray(cls) && cls[0] === baseClassName)?.[1]
+          ?.modifiers ?? []
 
-      if (modifiers) {
+      if (modifiers.length > 0) {
         return withDefaults(
           {
             isIncomplete: false,

packages/vscode-tailwindcss/CHANGELOG.md

@@ -8,6 +8,7 @@
 - Add details about theme options when hovering ([#1176](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1176))
 - Fix parsing of `@custom-variant` shorthand in Tailwind CSS language mode ([#1183](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1183))
 - Make sure custom regexes apply in Vue `<script>` blocks  ([#1177](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1177))
+- Fix suggestion of utilities with slashes in them in v4 ([#1182](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1182))
 
 ## 0.14.3