Simplify details for utility completions (#1356)

Fixes #1347

This PR addresses two problems (see screenshots below):
1. Utilities that generate `@property` rules will include the
declarations from `@property` in the completion details.
2. Custom variants that include declarations will include those
declarations in the completion details.

To fix these we are now:
1. Generating details using the "base" utility
2. Dropping any uses of `@property` before calculating the list of
declarations

**Before**
<img width="1197" alt="Screenshot 2025-05-09 at 18 08 57"
src="https://github.com/user-attachments/assets/59193060-7cc7-4d25-ae69-fd60be2899c6"
/>

<img width="1078" alt="Screenshot 2025-05-09 at 18 10 12"
src="https://github.com/user-attachments/assets/b1e97530-cfd0-44db-9bb1-5b7392eacdc6"
/>

**After**
<img width="1031" alt="Screenshot 2025-05-09 at 18 11 36"
src="https://github.com/user-attachments/assets/96405f6e-9e5c-4c6e-a123-b0a42d088521"
/>

<img width="1174" alt="Screenshot 2025-05-09 at 18 12 46"
src="https://github.com/user-attachments/assets/d4a8a9c0-4735-4976-a57a-32f720edfb36"
/>

Note that the "documentation" portion of completion items is unchanged
and shows the full candidate with all the CSS included (for non-color
utilities):

<img width="1075" alt="Screenshot 2025-05-09 at 18 14 53"
src="https://github.com/user-attachments/assets/5e67090d-faea-4de1-9eab-8ee9709b123e"
/>

Author: thecrypticace

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

@@ -2280,24 +2280,37 @@ export async function resolveCompletionItem(
   if (state.v4) {
     if (item.kind === 9) return item
     if (item.detail && item.documentation) return item
+
+    let base = state.designSystem.compile([className])[0]
     let root = state.designSystem.compile([[...variants, className].join(state.separator)])[0]
+
     let rules = root.nodes.filter((node) => node.type === 'rule')
     if (rules.length === 0) return item
 
     if (!item.detail) {
       if (rules.length === 1) {
         let decls: postcss.Declaration[] = []
 
-        root.walkDecls((node) => {
+        // Remove any `@property` rules
+        base = base.clone()
+        base.walkAtRules((rule) => {
+          // Ignore declarations inside `@property` rules
+          if (rule.name === 'property') {
+            rule.remove()
+          }
+
+          // Ignore declarations @supports (-moz-orient: inline)
+          // this is a hack used for `@property` fallbacks in Firefox
+          if (rule.name === 'supports' && rule.params === '(-moz-orient: inline)') {
+            rule.remove()
+          }
+        })
+
+        base.walkDecls((node) => {
           decls.push(node)
         })
 
-        item.detail = await jit.stringifyDecls(
-          state,
-          postcss.rule({
-            nodes: decls,
-          }),
-        )
+        item.detail = await jit.stringifyDecls(state, postcss.rule({ nodes: decls }))
       } else {
         item.detail = `${rules.length} rules`
       }

packages/vscode-tailwindcss/CHANGELOG.md

@@ -11,6 +11,8 @@
 - Fix error when using VSCode < 1.78 ([#1353](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1353))
 - Don’t skip suggesting empty variant implementations ([#1352](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1352))
 - Handle helper function lookups in nested parens ([#1354](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1354))
+- Hide `@property` declarations from completion details ([#1356](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1356))
+- Hide variant-provided declarations from completion details for a utility ([#1356](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1356))
 
 # 0.14.16