Display color swatches when using before/after variants (#1374)

Fixes #1370

Turns out *all* color swatches for `before:{utility}` and
`after:{utility}` were broken. This fixes that so utilities using these
variants show color swatches.

Author: thecrypticace

packages/tailwindcss-language-service/src/util/color.ts

@@ -79,11 +79,16 @@ function getColorFromDecls(
 ): culori.Color | KeywordColor | null {
   let props = Object.keys(decls).filter((prop) => {
     // ignore content: "";
-    if (
-      prop === 'content' &&
-      (decls[prop] === '""' || decls[prop] === "''" || decls[prop] === 'var(--tw-content)')
-    ) {
-      return false
+    if (prop === 'content') {
+      let value = decls[prop]
+
+      if (Array.isArray(value) && value.length === 1) {
+        value = value[0]
+      }
+
+      if (value === '""' || value === "''" || value === 'var(--tw-content)') {
+        return false
+      }
     }
 
     // ignore mask-image & mask-composite

packages/vscode-tailwindcss/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Display color swatches when using `before`/`after` variants ([#1374](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1374))
 
 # 0.14.17