Hide uncnessary decls in details

Author: thecrypticace

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

@@ -1004,6 +1004,35 @@ defineTest({
     let map = {
       'border-0': 'border-width: 0px;',
       'outline-0': 'outline-width: 0px;',
+      'leading-0': 'line-height: 0rem /* 0px */;',
+      'duration-1000': 'transition-duration: 1000ms;',
+      'font-bold': 'font-weight: 700;',
+      'ease-linear': 'transition-timing-function: linear;',
+      'ease-initial': '--tw-ease: initial;',
+
+      'space-x-0':
+        'margin-inline-start: calc(0rem /* 0px */ * var(--tw-space-x-reverse)); margin-inline-end: calc(0rem /* 0px */ * calc(1 - var(--tw-space-x-reverse)));',
+      'space-y-0':
+        'margin-block-start: calc(0rem /* 0px */ * var(--tw-space-y-reverse)); margin-block-end: calc(0rem /* 0px */ * calc(1 - var(--tw-space-y-reverse)));',
+      'divide-x-0':
+        'border-inline-start-width: calc(0px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));',
+      'divide-y-0':
+        'border-top-width: calc(0px * var(--tw-divide-y-reverse)); border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));',
+
+      'tracking-wide': 'letter-spacing: 0.025em;',
+
+      'from-red-500': '--tw-gradient-from: oklch(63.7% 0.237 25.331);',
+      'via-red-500': '--tw-gradient-via: oklch(63.7% 0.237 25.331);',
+      'to-red-500': '--tw-gradient-to: oklch(63.7% 0.237 25.331);',
+
+      'scale-100': '--tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%;',
+      'scale-z-100': '--tw-scale-z: 100%;',
+
+      'translate-1': '--tw-translate-x: 0.25rem /* 4px */; --tw-translate-y: 0.25rem /* 4px */;',
+      'translate-z-1': '--tw-translate-z: 0.25rem /* 4px */;',
+
+      'bg-conic-0':
+        '--tw-gradient-position: from 0deg in oklab; background-image: conic-gradient(var(--tw-gradient-stops));',
     }
 
     let requests = await Promise.all(

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

@@ -2304,11 +2304,33 @@ export async function resolveCompletionItem(
           if (rule.name === 'supports' && rule.params === '(-moz-orient: inline)') {
             rule.remove()
           }
+
+          if (
+            rule.name === 'supports' &&
+            rule.params === '(background-image: linear-gradient(in lab, red, red))'
+          ) {
+            rule.remove()
+          }
         })
 
         let ignoredValues = new Set([
           'var(--tw-border-style)',
           'var(--tw-outline-style)',
+          'var(--tw-translate-x) var(--tw-translate-y)',
+          'var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z)',
+          'var(--tw-scale-x) var(--tw-scale-y)',
+          'var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z)',
+
+          // 'var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y)',
+          // 'var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)',
+
+          // 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+          // 'var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)',
+          // 'var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)',
+
+          // 'linear-gradient(var(--tw-gradient-stops))',
+          // 'radial-gradient(var(--tw-gradient-stops))',
+          // 'conic-gradient(var(--tw-gradient-stops))',
         ])
 
         base.walkDecls((node) => {
@@ -2317,6 +2339,29 @@ export async function resolveCompletionItem(
           decls.push(node)
         })
 
+        // TODO: Hardcoding this list is really unfortunate. We should be able
+        // to handle this in Tailwind CSS itself.
+        function isOtherDecl(node: postcss.Declaration) {
+          if (node.prop === '--tw-leading') return false
+          if (node.prop === '--tw-duration') return false
+          if (node.prop === '--tw-ease') return false
+          if (node.prop === '--tw-font-weight') return false
+          if (node.prop === '--tw-gradient-via-stops') return false
+          if (node.prop === '--tw-gradient-stops') return false
+          if (node.prop === '--tw-tracking') return false
+          if (node.prop === '--tw-space-x-reverse' && node.value === '0') return false
+          if (node.prop === '--tw-space-y-reverse' && node.value === '0') return false
+          if (node.prop === '--tw-divide-x-reverse' && node.value === '0') return false
+          if (node.prop === '--tw-divide-y-reverse' && node.value === '0') return false
+
+          return true
+        }
+
+        // We want to remove these decls from details *as long as they're not the only one*
+        if (decls.some(isOtherDecl)) {
+          decls = decls.filter(isOtherDecl)
+        }
+
         item.detail = await jit.stringifyDecls(state, postcss.rule({ nodes: decls }))
       } else {
         item.detail = `${rules.length} rules`