Move common, trailing pseudo elements when generating selectors (#281)

* Move common, trailing pseudo elements when generating selectors * Fix CS * Update dependencies * Update lockfile
tailwindlabs · Aug 17, 2022 · c1f01be · c1f01be · vercel · Aug 17, 2022
1 parent 23e04c6
commit c1f01be
Show file tree

Hide file tree

Showing 5 changed files with 279 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,8 @@
   "dependencies": {
     "lodash.castarray": "^4.4.0",
     "lodash.isplainobject": "^4.0.6",
-    "lodash.merge": "^4.6.2"
+    "lodash.merge": "^4.6.2",
+    "postcss-selector-parser": "6.0.10"
   },
   "jest": {
     "setupFilesAfterEnv": [

diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@ const plugin = require('tailwindcss/plugin')
 const merge = require('lodash.merge')
 const castArray = require('lodash.castarray')
 const styles = require('./styles')
+const { commonTrailingPseudos } = require('./utils')
 
 const computed = {
   // Reserved for future "magic properties", for example:
@@ -12,25 +13,11 @@ function inWhere(selector, { className, prefix }) {
   let prefixedNot = prefix(`.not-${className}`).slice(1)
   let selectorPrefix = selector.startsWith('>') ? `.${className} ` : ''
 
-  if (selector.endsWith('::before')) {
-    return `:where(${selectorPrefix}${selector.slice(
-      0,
-      -8
-    )}):not(:where([class~="${prefixedNot}"] *))::before`
-  }
-
-  if (selector.endsWith('::after')) {
-    return `:where(${selectorPrefix}${selector.slice(
-      0,
-      -7
-    )}):not(:where([class~="${prefixedNot}"] *))::after`
-  }
+  // Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
+  let [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector)
 
-  if (selector.endsWith('::marker')) {
-    return `:where(${selectorPrefix}${selector.slice(
-      0,
-      -8
-    )}):not(:where([class~="${prefixedNot}"] *))::marker`
+  if (trailingPseudo) {
+    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"] *))${trailingPseudo}`
   }
 
   return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"] *))`
@@ -118,11 +105,13 @@ module.exports = plugin.withOptions(
       ]) {
         selectors = selectors.length === 0 ? [name] : selectors
 
-        let selector = target === 'legacy'
-          ? selectors.map(selector => `& ${selector}`)
-          : selectors.join(', ')
+        let selector =
+          target === 'legacy' ? selectors.map((selector) => `& ${selector}`) : selectors.join(', ')
 
-        addVariant(`${className}-${name}`, target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`)
+        addVariant(
+          `${className}-${name}`,
+          target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`
+        )
       }
 
       addComponents(

diff --git a/src/index.test.js b/src/index.test.js
@@ -335,7 +335,9 @@ test('modifiers', async () => {
 test('legacy target', async () => {
   let config = {
     plugins: [typographyPlugin({ target: 'legacy' })],
-    content: [{ raw: html`<div class="prose prose-h1:text-center prose-headings:text-ellipsis"></div>` }],
+    content: [
+      { raw: html`<div class="prose prose-h1:text-center prose-headings:text-ellipsis"></div>` },
+    ],
     theme: {
       typography: {
         DEFAULT: {
@@ -712,7 +714,7 @@ test('element variants', async () => {
         .prose-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-prose'] *))) {
           border-top-width: 2px;
         }
-        .prose-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-prose"] *))) {
+        .prose-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-prose'] *))) {
           font-style: italic;
         }
       `
@@ -886,7 +888,7 @@ test('element variants with custom class name', async () => {
         .markdown-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-markdown'] *))) {
           border-top-width: 2px;
         }
-        .markdown-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-markdown"] *))) {
+        .markdown-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-markdown'] *))) {
           font-style: italic;
         }
       `
@@ -1000,3 +1002,198 @@ it('should be possible to specify custom h5 and h6 styles', () => {
     `)
   })
 })
+
+it('should not break with multiple selectors with pseudo elements using variants', () => {
+  let config = {
+    darkMode: 'class',
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="dark:prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            'ol li::before, ul li::before': {
+              color: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before {
+        color: red;
+      }
+    `)
+  })
+})
+
+it('lifts all common, trailing pseudo elements when the same across all selectors', () => {
+  let config = {
+    darkMode: 'class',
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose dark:prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            'ol li::marker::before, ul li::marker::before': {
+              color: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::marker::before {
+        color: red;
+      }
+    `)
+
+    // TODO: The output here is a bug in tailwindcss variant selector rewriting
+    // IT should be ::marker::before
+    expect(result.css).toIncludeCss(css`
+      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before::marker {
+        color: red;
+      }
+    `)
+  })
+})
+
+it('does not modify selectors with differing pseudo elements', () => {
+  let config = {
+    darkMode: 'class',
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose dark:prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            'ol li::before, ul li::after': {
+              color: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose :where(ol li::before, ul li::after):not(:where([class~='not-prose'] *)) {
+        color: red;
+      }
+    `)
+
+    // TODO: The output here is a bug in tailwindcss variant selector rewriting
+    expect(result.css).toIncludeCss(css`
+      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before,
+      ::after {
+        color: red;
+      }
+    `)
+  })
+})
+
+it('lifts only the common, trailing pseudo elements from selectors', () => {
+  let config = {
+    darkMode: 'class',
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose dark:prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            'ol li::scroll-thumb::before, ul li::scroll-track::before': {
+              color: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose
+        :where(ol li::scroll-thumb, ul li::scroll-track):not(:where([class~='not-prose']
+            *))::before {
+        color: red;
+      }
+    `)
+
+    // TODO: The output here is a bug in tailwindcss variant selector rewriting
+    expect(result.css).toIncludeCss(css`
+      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::scroll-thumb,
+      ::scroll-track,
+      ::before {
+        color: red;
+      }
+    `)
+  })
+})
+
+it('ignores common non-trailing pseudo-elements in selectors', () => {
+  let config = {
+    darkMode: 'class',
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose dark:prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            'ol li::before::scroll-thumb, ul li::before::scroll-track': {
+              color: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose
+        :where(ol li::before::scroll-thumb, ul
+          li::before::scroll-track):not(:where([class~='not-prose'] *)) {
+        color: red;
+      }
+    `)
+
+    // TODO: The output here is a bug in tailwindcss variant selector rewriting
+    expect(result.css).toIncludeCss(css`
+      .dark
+        .dark\:prose
+        :where(ol li::scroll-thumb, ul li::scroll-track):not(:where([class~='not-prose']
+            *))::before,
+      ::before {
+        color: red;
+      }
+    `)
+  })
+})