From 611fffbb4ed544c1d8ab9322d9747602f4f9adb3 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 25 Jun 2021 14:45:58 -0400
Subject: [PATCH] Support before/after

---
 src/jit/lib/generateRules.js       |  2 +-
 src/jit/lib/setupContextUtils.js   | 18 ++++++++--
 tests/jit/filter-utilities.test.js | 56 ++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/src/jit/lib/generateRules.js b/src/jit/lib/generateRules.js
index 6585b05b3..7c738d340 100644
--- a/src/jit/lib/generateRules.js
+++ b/src/jit/lib/generateRules.js
@@ -231,7 +231,7 @@ function* resolveMatches(candidate, context) {
 
     for (let [sort, plugin] of plugins) {
       if (typeof plugin === 'function') {
-        for (let ruleSet of [].concat(plugin(modifier, { candidate }))) {
+        for (let ruleSet of [].concat(plugin(modifier, { candidate, variants }))) {
           let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
           for (let rule of rules) {
             matches.push([{ ...sort, options: { ...sort.options, ...options } }, rule])
diff --git a/src/jit/lib/setupContextUtils.js b/src/jit/lib/setupContextUtils.js
index 92d834dfa..aa886bdd3 100644
--- a/src/jit/lib/setupContextUtils.js
+++ b/src/jit/lib/setupContextUtils.js
@@ -125,6 +125,20 @@ function withIdentifiers(styles) {
   })
 }
 
+function buildElementSelector(candidate, variants) {
+  let escaped = `.${escapeClassName(candidate)}`
+
+  if (variants.includes('before')) {
+    return escaped + '::before'
+  }
+
+  if (variants.includes('after')) {
+    return escaped + '::after'
+  }
+
+  return escaped
+}
+
 function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets }) {
   function getConfigValue(path, defaultValue) {
     return path ? dlv(tailwindConfig, path, defaultValue) : tailwindConfig
@@ -265,7 +279,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         let prefixedIdentifier = prefixIdentifier(identifier, options)
         let rule = utilities[identifier]
 
-        function wrapped(modifier, { candidate }) {
+        function wrapped(modifier, { candidate, variants }) {
           let { type = 'any' } = options
           type = [].concat(type)
           let [value, coercedType] = coerceValue(type, modifier, options.values, tailwindConfig)
@@ -278,7 +292,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           let ruleSets = []
             .concat(
               rule(value, {
-                selector: `.${escapeClassName(candidate)}`,
+                selector: buildElementSelector(candidate, variants),
                 includeRules(rules) {
                   includedRules.push(...rules)
                 },
diff --git a/tests/jit/filter-utilities.test.js b/tests/jit/filter-utilities.test.js
index 7cd30f633..bb1f4fc75 100644
--- a/tests/jit/filter-utilities.test.js
+++ b/tests/jit/filter-utilities.test.js
@@ -209,6 +209,62 @@ test('with variants', async () => {
   })
 })
 
+test('with pseudo-element variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="before:brightness-100 after:brightness-100 lg:hover:after:brightness-100',
+      },
+    ],
+    corePlugins: ['filter', 'brightness', 'contrast'],
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind base;
+    @tailwind utilities
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .before\\:brightness-100::before,
+      .after\\:brightness-100::after,
+      .lg\\:hover\\:after\\:brightness-100::after {
+        --tw-blur: var(--tw-empty, /*!*/ /*!*/);
+        --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
+        --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
+        --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
+        --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
+        --tw-invert: var(--tw-empty, /*!*/ /*!*/);
+        --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
+        --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
+        --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
+        --tw-filter: 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);
+      }
+      .before\\:brightness-100::before {
+        content: "";
+        --tw-brightness: brightness(1);
+        filter: var(--tw-filter);
+      }
+      .after\\:brightness-100::after {
+        content: "";
+        --tw-brightness: brightness(1);
+        filter: var(--tw-filter);
+      }
+      @media (min-width: 1024px) {
+        .lg\\:hover\\:after\\:brightness-100:hover::after {
+          content: "";
+          --tw-brightness: brightness(1);
+          filter: var(--tw-filter);
+        }
+      }
+    `)
+  })
+})
+
 test('without any filter classes', async () => {
   let config = {
     mode: 'jit',