From 037396b4a602b24b28a9bef570a34d2ba47af9e8 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Sun, 12 Jun 2022 10:50:41 -0400
Subject: [PATCH] Ignore PostCSS nodes returned by `addVariant` (#8608)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix issue with returning postcss nodes in addVariant

It’s not a supported use case but it didn’t use to break so let’s just fail silently

* Update changelog
---
 CHANGELOG.md                 |  1 +
 src/lib/setupContextUtils.js |  7 +++--
 tests/variants.test.js       | 51 ++++++++++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c065711e6d9..f379785715dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix extraction of multi-word utilities with arbitrary values and quotes ([#8604](https://github.com/tailwindlabs/tailwindcss/pull/8604))
 - Fix casing of import of `corePluginList` type definition ([#8587](https://github.com/tailwindlabs/tailwindcss/pull/8587))
+- Ignore PostCSS nodes returned by `addVariant` ([#8608](https://github.com/tailwindlabs/tailwindcss/pull/8608))
 
 ## [3.1.2] - 2022-06-10
 
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index dc7643da0182..bd28ce4307b3 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -465,11 +465,14 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             }
 
             if (Array.isArray(result)) {
-              return result.map((variant) => parseVariant(variant))
+              return result
+                .filter((variant) => typeof variant === 'string')
+                .map((variant) => parseVariant(variant))
             }
 
             // result may be undefined with legacy variants that use APIs like `modifySelectors`
-            return result && parseVariant(result)(api)
+            // result may also be a postcss node if someone was returning the result from `modifySelectors`
+            return result && typeof result === 'string' && parseVariant(result)(api)
           }
         }
 
diff --git a/tests/variants.test.js b/tests/variants.test.js
index 9959073f833d..d7ab82b81ada 100644
--- a/tests/variants.test.js
+++ b/tests/variants.test.js
@@ -461,6 +461,57 @@ test('before and after variants are a bit special, and forced to the end (2)', (
   })
 })
 
+test('returning non-strings and non-selectors in addVariant', () => {
+  /** @type {import('../types/config').Config} */
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="peer-aria-expanded:text-center"></div>
+          <div class="peer-aria-expanded-2:text-center"></div>
+        `,
+      },
+    ],
+    plugins: [
+      function ({ addVariant, e }) {
+        addVariant('peer-aria-expanded', ({ modifySelectors, separator }) =>
+          // Returning anything other string | string[] | undefined here is not supported
+          // But we're trying to be lenient here and just throw it out
+          modifySelectors(
+            ({ className }) =>
+              `.peer[aria-expanded="true"] ~ .${e(`peer-aria-expanded${separator}${className}`)}`
+          )
+        )
+
+        addVariant('peer-aria-expanded-2', ({ modifySelectors, separator }) => {
+          let nodes = modifySelectors(
+            ({ className }) =>
+              `.peer[aria-expanded="false"] ~ .${e(`peer-aria-expanded${separator}${className}`)}`
+          )
+
+          return [
+            // Returning anything other than strings here is not supported
+            // But we're trying to be lenient here and just throw it out
+            nodes,
+            '.peer[aria-expanded="false"] ~ &',
+          ]
+        })
+      },
+    ],
+  }
+
+  return run('@tailwind components;@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .peer[aria-expanded='true'] ~ .peer-aria-expanded\:text-center {
+        text-align: center;
+      }
+      .peer[aria-expanded='false'] ~ .peer-aria-expanded-2\:text-center {
+        text-align: center;
+      }
+    `)
+  })
+})
+
 it('should not generate variants of user css if it is not inside a layer', () => {
   let config = {
     content: [{ raw: html`<div class="hover:foo"></div>` }],