feat(preset-typography): compatibility mode(unocss#2051)

packages/preset-typography/README.md

@@ -99,6 +99,8 @@ export default defineConfig({
   the `table` element **(NOTE: `not` utility is only usable in class since it is
   only used in CSS** **selector & not scanned by UnoCSS)**.
 
+  If you enabled the compatibility mode, `not-prose` will be unavailable.
+
 ## Utilities
 
 |  Rule   |                                            Styles by this rule                                                    |
@@ -143,6 +145,10 @@ The CSS declarations passed to `cssExtend` will
 
 - **be merged** deeply with built-in styles.
 
+Since this preset use `:where()` in CSS selectors, it will not work in some
+browsers. To enable compatibility mode, set `compatibilityMode` to `true`.
+Notice that when it is enabled, `not-prose` will be unavailable.
+
 ### Type of `TypographyOptions`
 
 ```ts
@@ -164,6 +170,14 @@ export interface TypographyOptions {
    * @defaultValue undefined
    */
   cssExtend?: Record<string, CSSObject>
+
+  /**
+   * Compacitility Mode. No `:where()` is used. Notice that when it is enabled,
+   * `not-prose` will be unavailable. For more instructions, see [here](https://github.com/unocss/unocss/issues/2051)
+   *
+   * @defaultValue false
+   */
+  compatibilityMode?: boolean
 }
 ```
 

packages/preset-typography/src/index.ts

@@ -24,6 +24,15 @@ export interface TypographyOptions {
    * @defaultValue undefined
    */
   cssExtend?: Record<string, CSSObject>
+
+  /**
+   * Compacitility Mode. No `:where()` is used. Notice that when it is enabled,
+   * `not-prose` will be unavailable. For more instructions, see [here](https://github.com/unocss/unocss/issues/2051)
+   *
+   * @defaultValue false
+   */
+  compatibilityMode?: boolean
+
   /**
    * @deprecated use `selectorName` instead. It will be removed in 1.0.
    */
@@ -134,7 +143,7 @@ export function presetTypography(options?: TypographyOptions): Preset {
         layer: 'typography',
         getCSS: () =>
           hasProseClass
-            ? getPreflights(escapedSelector, selectorName, cssExtend)
+            ? getPreflights(escapedSelector, selectorName, cssExtend, options?.compatibilityMode)
             : undefined,
       },
     ],

packages/preset-typography/src/preflights/index.ts

@@ -5,6 +5,7 @@ function getCSS(
   escapedSelector: string,
   selectorName: string,
   preflights: object,
+  compatibilityMode?: boolean,
 ): string {
   let css = ''
 
@@ -25,6 +26,8 @@ function getCSS(
         if (match) {
           const matchStr = match[0]
           s = s.replace(matchStr, '')
+          if (compatibilityMode)
+            return `${escapedSelector} ${s}${matchStr}`
           return `${escapedSelector} :where(${s})${notProseSelector}${matchStr}`
         }
         return null
@@ -38,7 +41,9 @@ function getCSS(
     }
     else {
       // directly from css declaration
-      css += `${escapedSelector} :where(${selector})${notProseSelector}`
+      if (compatibilityMode)
+        css += `${escapedSelector} ${selector}`
+      else css += `${escapedSelector} :where(${selector})${notProseSelector}`
     }
 
     css += '{'
@@ -57,13 +62,14 @@ export function getPreflights(
   escapedSelector: string,
   selectorName: string,
   cssExtend?: object | undefined,
+  compatibilityMode?: boolean,
 ): string {
   // attribute mode -> add class selector with `:is()` pseudo-class function
   if (!escapedSelector.startsWith('.'))
     escapedSelector = `:is(${escapedSelector},.${selectorName})`
 
   if (cssExtend)
-    return getCSS(escapedSelector, selectorName, mergeDeep(DEFAULT, cssExtend))
+    return getCSS(escapedSelector, selectorName, mergeDeep(DEFAULT, cssExtend), compatibilityMode)
 
-  return getCSS(escapedSelector, selectorName, DEFAULT)
+  return getCSS(escapedSelector, selectorName, DEFAULT, compatibilityMode)
 }

test/__snapshots__/preset-typography.test.ts.snap

@@ -63,6 +63,14 @@ exports[`typography > prose-class-custom 1`] = `
 .text-base{font-size:1rem;line-height:1.5rem;}"
 `;
 
+exports[`typography > prose-compatibility-mode 1`] = `
+"/* layer: preflights */
+*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
+/* layer: typography */
+.prose h1,h2,h3,h4,h5,h6{color:var(--un-prose-headings);font-weight:600;line-height:1.25;}.prose a{color:var(--un-prose-links);text-decoration:underline;font-weight:500;}.prose a code{color:var(--un-prose-links);}.prose p,ul,ol,pre{margin:1em 0;line-height:1.75;}.prose blockquote{margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}.prose h1{margin:1rem 0;font-size:2.25em;}.prose h2{margin:1.75em 0 .5em;font-size:1.75em;}.prose h3{margin:1.5em 0 .5em;font-size:1.375em;}.prose h4{margin:1em 0;font-size:1.125em;}.prose img,video{max-width:100%;}.prose figure,picture{margin:1em 0;}.prose figcaption{color:var(--un-prose-captions);font-size:.875em;}.prose code{color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}.prose :not(pre) > code::before,.prose :not(pre) > code::after{content:\\"\`\\";}.prose pre{padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}.prose pre,code{white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}.prose pre code{font-weight:inherit;}.prose ol,ul{padding-left:1.25em;}.prose ol{list-style-type:decimal;}.prose ol[type=\\"A\\"]{list-style-type:upper-alpha;}.prose ol[type=\\"a\\"]{list-style-type:lower-alpha;}.prose ol[type=\\"A\\" s]{list-style-type:upper-alpha;}.prose ol[type=\\"a\\" s]{list-style-type:lower-alpha;}.prose ol[type=\\"I\\"]{list-style-type:upper-roman;}.prose ol[type=\\"i\\"]{list-style-type:lower-roman;}.prose ol[type=\\"I\\" s]{list-style-type:upper-roman;}.prose ol[type=\\"i\\" s]{list-style-type:lower-roman;}.prose ol[type=\\"1\\"]{list-style-type:decimal;}.prose ul{list-style-type:disc;}.prose ol > li::marker,.prose ul > li::marker,.prose summary::marker{color:var(--un-prose-lists);}.prose hr{margin:2em 0;border:1px solid var(--un-prose-hr);}.prose table{display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}.prose tr:nth-child(2n){background:var(--un-prose-bg-soft);}.prose td,th{border:1px solid var(--un-prose-borders);padding:.625em 1em;}.prose abbr{cursor:help;}.prose kbd{color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}.prose details{margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}.prose summary{cursor:pointer;font-weight:600;}
+.prose{color:var(--un-prose-body);max-width:65ch;}"
+`;
+
 exports[`typography > prose-custom-css 1`] = `
 "/* layer: preflights */
 *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}

test/preset-typography.test.ts

@@ -76,6 +76,12 @@ const testConfigs = [
       strict: false,
     },
   },
+
+  {
+    name: 'prose-compatibility-mode',
+    input: 'prose',
+    typographyOptions: { compatibilityMode: true },
+  },
 ]
 
 describe('typography', () => {