Reject invalid custom and arbitrary variants (#8345)

* WIP

Still need to write error message

* Update error message

first pass at something better

* Detect invalid variant formats returned by functions

* Add proper error message

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

src/lib/generateRules.js

@@ -9,7 +9,7 @@ import * as sharedState from './sharedState'
 import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
 import { asClass } from '../util/nameClass'
 import { normalize } from '../util/dataTypes'
-import { parseVariant } from './setupContextUtils'
+import { isValidVariantFormatString, parseVariant } from './setupContextUtils'
 import isValidArbitraryValue from '../util/isValidArbitraryValue'
 import { splitAtTopLevelOnly } from '../util/splitAtTopLevelOnly.js'
 
@@ -131,6 +131,10 @@ function applyVariant(variant, matches, context) {
   if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
     let selector = normalize(variant.slice(1, -1))
 
+    if (!isValidVariantFormatString(selector)) {
+      return []
+    }
+
     let fn = parseVariant(selector)
 
     let sort = Array.from(context.variantOrder.values()).pop() << 1n

src/lib/setupContextUtils.js

@@ -170,6 +170,10 @@ function withIdentifiers(styles) {
   })
 }
 
+export function isValidVariantFormatString(format) {
+  return format.startsWith('@') || format.includes('&')
+}
+
 export function parseVariant(variant) {
   variant = variant
     .replace(/\n+/g, '')
@@ -221,10 +225,24 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         if (typeof variantFunction !== 'string') {
           // Safelist public API functions
           return ({ modifySelectors, container, separator }) => {
-            return variantFunction({ modifySelectors, container, separator })
+            let result = variantFunction({ modifySelectors, container, separator })
+
+            if (typeof result === 'string' && !isValidVariantFormatString(result)) {
+              throw new Error(
+                `Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`
+              )
+            }
+
+            return result
           }
         }
 
+        if (!isValidVariantFormatString(variantFunction)) {
+          throw new Error(
+            `Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`
+          )
+        }
+
         return parseVariant(variantFunction)
       })