fix(preset-typography): generate correct selector (#4931)

zyyv · autofix-ci[bot] · web-flow · commit d88b8f8e02f4 · 2025-10-14T11:02:31.000+08:00
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/packages-integrations/svelte-scoped/test/cases/prose/OutputDev.svelte b/packages-integrations/svelte-scoped/test/cases/prose/OutputDev.svelte
@@ -235,14 +235,20 @@
       margin-bottom: 1.25em;
       padding-inline-start: 1.625em;
     }
-    :where(ol > li::marker):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(ol > li):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::marker
       ) {
       font-weight: 400;
       color: var(--un-prose-counters);
     }
-    :where(ul > li::marker):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(ul > li):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::marker
       ) {
       color: var(--un-prose-bullets);
     }
@@ -274,13 +280,19 @@
       margin-bottom: 1.6em;
       padding-inline-start: 1em;
     }
-    :where(blockquote p:first-of-type::before):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(blockquote p:first-of-type):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::before
       ) {
       content: open-quote;
     }
-    :where(blockquote p:last-of-type::after):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(blockquote p:last-of-type):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::after
       ) {
       content: close-quote;
     }
@@ -388,13 +400,19 @@
       font-weight: 600;
       font-size: 0.875em;
     }
-    :where(code::before):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(code):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::before
       ) {
       content: "`";
     }
-    :where(code::after):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(code):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::after
       ) {
       content: "`";
     }
@@ -465,13 +483,19 @@
       font-family: inherit;
       line-height: inherit;
     }
-    :where(pre code::before):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(pre code):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::before
       ) {
       content: none;
     }
-    :where(pre code::after):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(pre code):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::after
       ) {
       content: none;
     }
diff --git a/packages-integrations/svelte-scoped/test/cases/prose/OutputProd.svelte b/packages-integrations/svelte-scoped/test/cases/prose/OutputProd.svelte
@@ -235,14 +235,20 @@
       margin-bottom: 1.25em;
       padding-inline-start: 1.625em;
     }
-    :where(ol > li::marker):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(ol > li):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::marker
       ) {
       font-weight: 400;
       color: var(--un-prose-counters);
     }
-    :where(ul > li::marker):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(ul > li):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::marker
       ) {
       color: var(--un-prose-bullets);
     }
@@ -274,13 +280,19 @@
       margin-bottom: 1.6em;
       padding-inline-start: 1em;
     }
-    :where(blockquote p:first-of-type::before):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(blockquote p:first-of-type):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::before
       ) {
       content: open-quote;
     }
-    :where(blockquote p:last-of-type::after):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(blockquote p:last-of-type):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::after
       ) {
       content: close-quote;
     }
@@ -388,13 +400,19 @@
       font-weight: 600;
       font-size: 0.875em;
     }
-    :where(code::before):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(code):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::before
       ) {
       content: "`";
     }
-    :where(code::after):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(code):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::after
       ) {
       content: "`";
     }
@@ -465,13 +483,19 @@
       font-family: inherit;
       line-height: inherit;
     }
-    :where(pre code::before):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(pre code):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::before
       ) {
       content: none;
     }
-    :where(pre code::after):not(
-        :where([class~="not-uno-prose"], :global([class~="not-uno-prose"] *))
+    :where(pre code):not(
+        :where(
+            [class~="not-uno-prose"],
+            :global([class~="not-uno-prose"] *)
+          )::after
       ) {
       content: none;
     }
diff --git a/packages-presets/preset-typography/src/index.ts b/packages-presets/preset-typography/src/index.ts
@@ -129,15 +129,7 @@ export const presetTypography = definePreset(<Theme extends TypographyTheme = Ty
 
           return {
             [symbols.body]: css,
-            [symbols.selector]: (selector) => {
-              if (typeof options?.important === 'string') {
-                selector = `${options.important} ${selector}`
-              }
-              if (!options?.compatibility?.noColonIs) {
-                selector = `:is(${selector})`
-              }
-              return selector
-            },
+            [symbols.selector]: normalizeSelector,
           }
         },
         { layer: 'typography', autocomplete: `${selectorName}-(${Object.keys(resolvedSizeScheme).join('|')})` },
diff --git a/packages-presets/preset-typography/src/resolve.ts b/packages-presets/preset-typography/src/resolve.ts
@@ -39,7 +39,8 @@ export function getCSS(preflights: TypographyCSSObject, options: TypographyOptio
       css += `${selectorOrKey}:${cssObjectOrValue}${important ? ' !important' : ''};`
     }
     else {
-      const _selector = `:where(${selectorOrKey})${notProseSelector}`
+      const [selectorOrGroup, pseudo] = selectorOrKey.split('::')
+      const _selector = `:where(${selectorOrGroup})${notProseSelector}${pseudo ? `::${pseudo}` : ''}`
       css += `${_selector} {`
       for (const [key, value] of Object.entries(cssObjectOrValue)) {
         css += `${key}:${value}${important ? ' !important' : ''};`
diff --git a/test/__snapshots__/preset-typography.test.ts.snap b/test/__snapshots__/preset-typography.test.ts.snap
