add more variant tests for the new API

Author: RobinMalfait

tests/variants.test.js

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 
-import { run, css } from './util/run'
+import { run, css, html } from './util/run'
 
 test('variants', () => {
   let config = {
@@ -24,6 +24,124 @@ test('variants', () => {
   })
 })
 
+test('order matters and produces different behaviour', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="hover:file:bg-pink-600"></div>
+          <div class="file:hover:bg-pink-600"></div>
+        `,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .hover\\:file\\:bg-pink-600::file-selector-button:hover {
+        --tw-bg-opacity: 1;
+        background-color: rgb(219 39 119 / var(--tw-bg-opacity));
+      }
+
+      .file\\:hover\\:bg-pink-600:hover::file-selector-button {
+        --tw-bg-opacity: 1;
+        background-color: rgb(219 39 119 / var(--tw-bg-opacity));
+      }
+    `)
+  })
+})
+
+describe('custom advanced variants', () => {
+  test('prose-headings usage on its own', () => {
+    let config = {
+      content: [
+        {
+          raw: html` <div class="prose-headings:text-center"></div> `,
+        },
+      ],
+      plugins: [
+        function ({ addVariant }) {
+          addVariant('prose-headings', ({ format }) => {
+            return format(':where(&) :is(h1, h2, h3, h4)')
+          })
+        },
+      ],
+    }
+
+    return run('@tailwind components;@tailwind utilities', config).then((result) => {
+      return expect(result.css).toMatchFormattedCss(css`
+        :where(.prose-headings\\:text-center) :is(h1, h2, h3, h4) {
+          text-align: center;
+        }
+      `)
+    })
+  })
+
+  test('prose-headings with another "simple" variant', () => {
+    let config = {
+      content: [
+        {
+          raw: html`
+            <div class="hover:prose-headings:text-center"></div>
+            <div class="prose-headings:hover:text-center"></div>
+          `,
+        },
+      ],
+      plugins: [
+        function ({ addVariant }) {
+          addVariant('prose-headings', ({ format }) => {
+            return format(':where(&) :is(h1, h2, h3, h4)')
+          })
+        },
+      ],
+    }
+
+    return run('@tailwind components;@tailwind utilities', config).then((result) => {
+      return expect(result.css).toMatchFormattedCss(css`
+        :where(.hover\\:prose-headings\\:text-center) :is(h1, h2, h3, h4):hover {
+          text-align: center;
+        }
+
+        :where(.prose-headings\\:hover\\:text-center:hover) :is(h1, h2, h3, h4) {
+          text-align: center;
+        }
+      `)
+    })
+  })
+
+  test('prose-headings with another "complex" variant', () => {
+    let config = {
+      content: [
+        {
+          raw: html`
+            <div class="group-hover:prose-headings:text-center"></div>
+            <div class="prose-headings:group-hover:text-center"></div>
+          `,
+        },
+      ],
+      plugins: [
+        function ({ addVariant }) {
+          addVariant('prose-headings', ({ format }) => {
+            return format(':where(&) :is(h1, h2, h3, h4)')
+          })
+        },
+      ],
+    }
+
+    return run('@tailwind utilities', config).then((result) => {
+      return expect(result.css).toMatchFormattedCss(css`
+        .group:hover :where(.group-hover\\:prose-headings\\:text-center) :is(h1, h2, h3, h4) {
+          text-align: center;
+        }
+
+        :where(.group:hover .prose-headings\\:group-hover\\:text-center) :is(h1, h2, h3, h4) {
+          text-align: center;
+        }
+      `)
+    })
+  })
+})
+
 test('stacked peer variants', async () => {
   let config = {
     content: [{ raw: 'peer-disabled:peer-focus:peer-hover:border-blue-500' }],