WIP

tailwindlabs · Mar 21, 2023 · 2fe08b3 · 2fe08b3
1 parent f339739
commit 2fe08b3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/tests/format-variant-selector.test.js b/tests/format-variant-selector.test.js
@@ -348,6 +348,8 @@ crosscheck(() => {
       ${'.parent::before &:hover'}                             | ${'.parent &:hover::before'}
       ${':where(&::before) :is(h1, h2, h3, h4)'}               | ${':where(&) :is(h1, h2, h3, h4)::before'}
       ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} | ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'}
+      ${'#app :is(.dark &::before)'}                           | ${'#app :is(.dark &)::before'}
+      ${'#app :is(:is(.dark &)::before)'}                      | ${'#app :is(:is(.dark &))::before'}
     `('should translate "$before" into "$after"', ({ before, after }) => {
       let result = finalizeSelector('.a', [{ format: before, isArbitraryVariant: false }], {
         candidate: 'a',

diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js
@@ -1,6 +1,6 @@
 import { crosscheck, run, html, css, defaults } from './util/run'
 
-crosscheck(() => {
+crosscheck(({ stable, oxide }) => {
   test('important selector', () => {
     let config = {
       important: '#app',
@@ -20,6 +20,7 @@ crosscheck(() => {
             <div class="dark:focus:text-left"></div>
             <div class="group-hover:focus-within:text-left"></div>
             <div class="rtl:active:text-center"></div>
+            <div class="dark:before:bg-black"></div>
           `,
         },
       ],
@@ -153,4 +154,42 @@ crosscheck(() => {
       `)
     })
   })
+
+  test('pseudo-elements are appended after the `:is()`', () => {
+    let config = {
+      important: '#app',
+      darkMode: 'class',
+      content: [
+        {
+          raw: html` <div class="dark:before:bg-black"></div> `,
+        },
+      ],
+      corePlugins: { preflight: false },
+    }
+
+    let input = css`
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+    `
+
+    return run(input, config).then((result) => {
+      console.log(result.css)
+      stable.expect(result.css).toMatchFormattedCss(css`
+        ${defaults}
+        #app :is(.dark .dark\:before\:bg-black)::before {
+          content: var(--tw-content);
+          --tw-bg-opacity: 1;
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+        }
+      `)
+      oxide.expect(result.css).toMatchFormattedCss(css`
+        ${defaults}
+        #app :is(.dark .dark\:before\:bg-black)::before {
+          content: var(--tw-content);
+          background-color: #000;
+        }
+      `)
+    })
+  })
 })