Add ::-webkit-details-marker’ pseudo to marker variant

Author: thecrypticace

packages/tailwindcss/src/variants.test.ts

@@ -50,6 +50,14 @@ test('marker', async () => {
 
     .marker\\:flex::marker {
       display: flex;
+    }
+
+    .marker\\:flex ::-webkit-details-marker {
+      display: flex;
+    }
+
+    .marker\\:flex::-webkit-details-marker {
+      display: flex;
     }"
   `)
   expect(await run(['marker/foo:flex'])).toEqual('')
@@ -2255,6 +2263,14 @@ test('variant order', async () => {
       display: flex;
     }
 
+    .marker\\:flex ::-webkit-details-marker {
+      display: flex;
+    }
+
+    .marker\\:flex::-webkit-details-marker {
+      display: flex;
+    }
+
     .selection\\:flex ::selection {
       display: flex;
     }

packages/tailwindcss/src/variants.ts

@@ -623,7 +623,12 @@ export function createVariants(theme: Theme): Variants {
   staticVariant('first-line', ['&::first-line'])
 
   // TODO: Remove alpha vars or no?
-  staticVariant('marker', ['& *::marker', '&::marker'])
+  staticVariant('marker', [
+    '& *::marker',
+    '&::marker',
+    '& *::-webkit-details-marker',
+    '&::-webkit-details-marker',
+  ])
 
   staticVariant('selection', ['& *::selection', '&::selection'])
   staticVariant('file', ['&::file-selector-button'])