Remove declarations from @property in completion details

Author: thecrypticace

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

@@ -2285,13 +2285,29 @@ export async function resolveCompletionItem(
 
     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[] = []
 
+        // 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)
         })