@unocss/preset-typography 0.48.4 → 0.49.0

package/README.md

@@ -99,6 +99,14 @@ 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)**.
 
+- **Compatibility Options**
+
+  This preset used some pseudo-classes which are not widely supported, but you
+  can disable them.
+
+  - If you enabled `noColonNot` or `noColonWhere`, `not-prose` will be unavailable.
+  - If you enabled `noColonIs`, attributify mode will have a wrong behavior.
+
 ## Utilities
 
 |  Rule   |                                            Styles by this rule                                                    |
@@ -146,6 +154,12 @@ The CSS declarations passed to `cssExtend` will
 ### Type of `TypographyOptions`
 
 ```ts
+export interface TypographyCompatibilityOptions {
+  noColonWhere?: boolean
+  noColonIs?: boolean
+  noColonNot?: boolean
+}
+
 export interface TypographyOptions {
   /**
    * The class name to use the typographic utilities.
@@ -164,6 +178,15 @@ export interface TypographyOptions {
    * @defaultValue undefined
    */
   cssExtend?: Record<string, CSSObject>
+
+  /**
+   * Compatibility option. Notice that it will affect some features.
+   * For more instructions, see
+   * [README](https://github.com/unocss/unocss/tree/main/packages/preset-typography)
+   *
+   * @defaultValue undefined
+   */
+  compatibility?: TypographyCompatibilityOptions
 }
 ```
 

package/dist/index.cjs

@@ -161,8 +161,10 @@ const DEFAULT = {
   }
 };
 
-function getCSS(escapedSelector, selectorName, preflights) {
+function getCSS(options) {
   let css = "";
+  const { escapedSelector, selectorName, preflights, compatibility } = options;
+  const disableNotUtility = compatibility?.noColonNot || compatibility?.noColonWhere;
   for (const selector in preflights) {
     const cssDeclarationBlock = preflights[selector];
     const notProseSelector = `:not(:where(.not-${selectorName},.not-${selectorName} *))`;
@@ -171,14 +173,18 @@ function getCSS(escapedSelector, selectorName, preflights) {
       if (match) {
         const matchStr = match[0];
         s = s.replace(matchStr, "");
-        return `${escapedSelector} :where(${s})${notProseSelector}${matchStr}`;
+        return escapedSelector.map(
+          (e) => disableNotUtility ? `${e} ${s}${matchStr}` : `${e} :where(${s})${notProseSelector}${matchStr}`
+        ).join(",");
       }
       return null;
     }).filter((v) => v);
     if (pseudoCSSMatchArray.length) {
       css += pseudoCSSMatchArray.join(",");
     } else {
-      css += `${escapedSelector} :where(${selector})${notProseSelector}`;
+      css += escapedSelector.map(
+        (e) => disableNotUtility ? selector.split(",").map((s) => `${e} ${s}`).join(",") : `${e} :where(${selector})${notProseSelector}`
+      ).join(",");
     }
     css += "{";
     for (const k in cssDeclarationBlock) {
@@ -189,25 +195,27 @@ function getCSS(escapedSelector, selectorName, preflights) {
   }
   return css;
 }
-function getPreflights(escapedSelector, selectorName, cssExtend) {
-  if (!escapedSelector.startsWith("."))
-    escapedSelector = `:is(${escapedSelector},.${selectorName})`;
+function getPreflights(options) {
+  const { escapedSelectors, selectorName, cssExtend, compatibility } = options;
+  let escapedSelector = Array.from(escapedSelectors);
+  if (!escapedSelector[escapedSelector.length - 1].startsWith(".") && !compatibility?.noColonIs)
+    escapedSelector = [`:is(${escapedSelector[escapedSelector.length - 1]},.${selectorName})`];
   if (cssExtend)
-    return getCSS(escapedSelector, selectorName, core.mergeDeep(DEFAULT, cssExtend));
-  return getCSS(escapedSelector, selectorName, DEFAULT);
+    return getCSS({ escapedSelector, selectorName, preflights: core.mergeDeep(DEFAULT, cssExtend), compatibility });
+  return getCSS({ escapedSelector, selectorName, preflights: DEFAULT, compatibility });
 }
 
 function presetTypography(options) {
   if (options?.className) {
     console.warn('[unocss:preset-typography] "className" is deprecated. Use "selectorName" instead.');
   }
-  let hasProseClass = false;
-  let escapedSelector = "";
+  const escapedSelectors = /* @__PURE__ */ new Set();
   const selectorName = options?.selectorName || options?.className || "prose";
   const selectorNameRE = new RegExp(`^${selectorName}$`);
   const colorsRE = new RegExp(`^${selectorName}-([-\\w]+)$`);
   const invertRE = new RegExp(`^${selectorName}-invert$`);
   const cssExtend = options?.cssExtend;
+  const compatibility = options?.compatibility;
   return {
     name: "@unocss/preset-typography",
     enforce: "post",
@@ -216,8 +224,7 @@ function presetTypography(options) {
       [
         selectorNameRE,
         (_, { rawSelector }) => {
-          hasProseClass = true;
-          escapedSelector = core.toEscapedSelector(rawSelector);
+          escapedSelectors.add(core.toEscapedSelector(rawSelector));
           return { "color": "var(--un-prose-body)", "max-width": "65ch" };
         },
         { layer: "typography" }
@@ -274,7 +281,10 @@ function presetTypography(options) {
     preflights: [
       {
         layer: "typography",
-        getCSS: () => hasProseClass ? getPreflights(escapedSelector, selectorName, cssExtend) : void 0
+        getCSS: () => {
+          if (escapedSelectors.size > 0)
+            return getPreflights({ escapedSelectors, selectorName, cssExtend, compatibility });
+        }
       }
     ]
   };

package/dist/index.d.ts

@@ -1,5 +1,12 @@
 import { CSSObject, Preset } from '@unocss/core';
 
+/** @public */
+interface TypographyCompatibilityOptions {
+  noColonWhere?: boolean
+  noColonIs?: boolean
+  noColonNot?: boolean
+}
+
 /**
  * @public
  */
@@ -20,6 +27,14 @@ interface TypographyOptions {
      * @defaultValue undefined
      */
     cssExtend?: Record<string, CSSObject>;
+    /**
+     * Compatibility option. Notice that it will affect some features.
+     * For more instructions, see
+     * [README](https://github.com/unocss/unocss/tree/main/packages/preset-typography)
+     *
+     * @defaultValue undefined
+     */
+    compatibility?: TypographyCompatibilityOptions;
     /**
      * @deprecated use `selectorName` instead. It will be removed in 1.0.
      */

package/dist/index.mjs

@@ -157,8 +157,10 @@ const DEFAULT = {
   }
 };
 
-function getCSS(escapedSelector, selectorName, preflights) {
+function getCSS(options) {
   let css = "";
+  const { escapedSelector, selectorName, preflights, compatibility } = options;
+  const disableNotUtility = compatibility?.noColonNot || compatibility?.noColonWhere;
   for (const selector in preflights) {
     const cssDeclarationBlock = preflights[selector];
     const notProseSelector = `:not(:where(.not-${selectorName},.not-${selectorName} *))`;
@@ -167,14 +169,18 @@ function getCSS(escapedSelector, selectorName, preflights) {
       if (match) {
         const matchStr = match[0];
         s = s.replace(matchStr, "");
-        return `${escapedSelector} :where(${s})${notProseSelector}${matchStr}`;
+        return escapedSelector.map(
+          (e) => disableNotUtility ? `${e} ${s}${matchStr}` : `${e} :where(${s})${notProseSelector}${matchStr}`
+        ).join(",");
       }
       return null;
     }).filter((v) => v);
     if (pseudoCSSMatchArray.length) {
       css += pseudoCSSMatchArray.join(",");
     } else {
-      css += `${escapedSelector} :where(${selector})${notProseSelector}`;
+      css += escapedSelector.map(
+        (e) => disableNotUtility ? selector.split(",").map((s) => `${e} ${s}`).join(",") : `${e} :where(${selector})${notProseSelector}`
+      ).join(",");
     }
     css += "{";
     for (const k in cssDeclarationBlock) {
@@ -185,25 +191,27 @@ function getCSS(escapedSelector, selectorName, preflights) {
   }
   return css;
 }
-function getPreflights(escapedSelector, selectorName, cssExtend) {
-  if (!escapedSelector.startsWith("."))
-    escapedSelector = `:is(${escapedSelector},.${selectorName})`;
+function getPreflights(options) {
+  const { escapedSelectors, selectorName, cssExtend, compatibility } = options;
+  let escapedSelector = Array.from(escapedSelectors);
+  if (!escapedSelector[escapedSelector.length - 1].startsWith(".") && !compatibility?.noColonIs)
+    escapedSelector = [`:is(${escapedSelector[escapedSelector.length - 1]},.${selectorName})`];
   if (cssExtend)
-    return getCSS(escapedSelector, selectorName, mergeDeep(DEFAULT, cssExtend));
-  return getCSS(escapedSelector, selectorName, DEFAULT);
+    return getCSS({ escapedSelector, selectorName, preflights: mergeDeep(DEFAULT, cssExtend), compatibility });
+  return getCSS({ escapedSelector, selectorName, preflights: DEFAULT, compatibility });
 }
 
 function presetTypography(options) {
   if (options?.className) {
     console.warn('[unocss:preset-typography] "className" is deprecated. Use "selectorName" instead.');
   }
-  let hasProseClass = false;
-  let escapedSelector = "";
+  const escapedSelectors = /* @__PURE__ */ new Set();
   const selectorName = options?.selectorName || options?.className || "prose";
   const selectorNameRE = new RegExp(`^${selectorName}$`);
   const colorsRE = new RegExp(`^${selectorName}-([-\\w]+)$`);
   const invertRE = new RegExp(`^${selectorName}-invert$`);
   const cssExtend = options?.cssExtend;
+  const compatibility = options?.compatibility;
   return {
     name: "@unocss/preset-typography",
     enforce: "post",
@@ -212,8 +220,7 @@ function presetTypography(options) {
       [
         selectorNameRE,
         (_, { rawSelector }) => {
-          hasProseClass = true;
-          escapedSelector = toEscapedSelector(rawSelector);
+          escapedSelectors.add(toEscapedSelector(rawSelector));
           return { "color": "var(--un-prose-body)", "max-width": "65ch" };
         },
         { layer: "typography" }
@@ -270,7 +277,10 @@ function presetTypography(options) {
     preflights: [
       {
         layer: "typography",
-        getCSS: () => hasProseClass ? getPreflights(escapedSelector, selectorName, cssExtend) : void 0
+        getCSS: () => {
+          if (escapedSelectors.size > 0)
+            return getPreflights({ escapedSelectors, selectorName, cssExtend, compatibility });
+        }
       }
     ]
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-typography",
-  "version": "0.48.4",
+  "version": "0.49.0",
   "description": "Typography preset for UnoCSS",
   "author": "Jeff Yang",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "dist"
   ],
   "dependencies": {
-    "@unocss/core": "0.48.4"
+    "@unocss/core": "0.49.0"
   },
   "scripts": {
     "build": "unbuild",