@unocss/preset-typography 0.34.0 → 0.34.1

package/README.md

@@ -134,8 +134,8 @@ export default defineConfig({
 
 ## Configurations
 
-This preset has `className` and `cssExtend` configurations for users who like to
-override or extend.
+This preset has `selectorName` and `cssExtend` configurations for users who like
+to override or extend.
 
 The CSS declarations passed to `cssExtend` will
 
@@ -150,13 +150,13 @@ export interface TypographyOptions {
   /**
    * The class name to use the typographic utilities.
    * To undo the styles to the elements, use it like
-   * `not-${className}` which is by default `not-prose`.
+   * `not-${selectorName}` which is by default `not-prose`.
    *
    * Note: `not` utility is only available in class.
    *
    * @defaultValue `prose`
    */
-  className?: string
+  selectorName?: string
 
   /**
    * Extend or override CSS selectors with CSS declaration block.
@@ -179,7 +179,7 @@ export default defineConfig({
     presetAttributify(), // required if using attributify mode
     presetUno(), // required
     presetTypography({
-      className: 'markdown', // now use like `markdown markdown-gray`, `not-markdown`
+      selectorName: 'markdown', // now use like `markdown markdown-gray`, `not-markdown`
       // cssExtend is an object with CSS selector as key and
       // CSS declaration block as value like writing normal CSS.
       cssExtend: {

package/dist/index.cjs

@@ -58,7 +58,7 @@ const DEFAULT = {
     "color": "var(--un-prose-code)",
     "font-size": ".875em",
     "font-weight": 600,
-    "font-family": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation-Mono,Courier-New,monospace"
+    "font-family": "var(--un-prose-font-mono)"
   },
   ":not(pre) > code::before,:not(pre) > code::after": {
     content: '"`"'
@@ -161,7 +161,7 @@ const DEFAULT = {
   }
 };
 
-function getCSS(selectorProse, className, preflights) {
+function getCSS(escapedSelector, selectorName, preflights) {
   let css = "";
   for (const selector in preflights) {
     const cssDeclarationBlock = preflights[selector];
@@ -170,14 +170,14 @@ function getCSS(selectorProse, className, preflights) {
       if (match) {
         const matchStr = match[0];
         s = s.replace(matchStr, "");
-        return `${selectorProse} :where(${s}):not(.not-${className})${matchStr}`;
+        return `${escapedSelector} :where(${s}):not(.not-${selectorName})${matchStr}`;
       }
       return null;
     }).filter((v) => v);
     if (pseudoCSSMatchArray.length) {
       css += pseudoCSSMatchArray.join(",");
     } else {
-      css += `${selectorProse} :where(${selector}):not(.not-${className})`;
+      css += `${escapedSelector} :where(${selector}):not(.not-${selectorName})`;
     }
     css += "{";
     for (const k in cssDeclarationBlock) {
@@ -188,21 +188,24 @@ function getCSS(selectorProse, className, preflights) {
   }
   return css;
 }
-function getPreflights(selectorProse, className, cssExtend) {
-  if (!selectorProse.startsWith("."))
-    selectorProse = `:is(${selectorProse},.${className})`;
+function getPreflights(escapedSelector, selectorName, cssExtend) {
+  if (!escapedSelector.startsWith("."))
+    escapedSelector = `:is(${escapedSelector},.${selectorName})`;
   if (cssExtend)
-    return getCSS(selectorProse, className, core.mergeDeep(DEFAULT, cssExtend));
-  return getCSS(selectorProse, className, DEFAULT);
+    return getCSS(escapedSelector, selectorName, core.mergeDeep(DEFAULT, cssExtend));
+  return getCSS(escapedSelector, selectorName, DEFAULT);
 }
 
 function presetTypography(options) {
+  if (options?.className) {
+    console.warn('[unocss:preset-typography] "className" is deprecated. Use "selectorName" instead.');
+  }
   let hasProseClass = false;
-  let selectorProse = "";
-  const className = options?.className || "prose";
-  const classNameRE = new RegExp(`^${className}$`);
-  const colorsRE = new RegExp(`^${className}-([-\\w]+)$`);
-  const invertRE = new RegExp(`^${className}-invert$`);
+  let escapedSelector = "";
+  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;
   return {
     name: "@unocss/preset-typography",
@@ -210,10 +213,10 @@ function presetTypography(options) {
     layers: { typography: -1 },
     rules: [
       [
-        classNameRE,
+        selectorNameRE,
         (_, { rawSelector }) => {
           hasProseClass = true;
-          selectorProse = core.toEscapedSelector(rawSelector);
+          escapedSelector = core.toEscapedSelector(rawSelector);
           return { "color": "var(--un-prose-body)", "max-width": "65ch" };
         },
         { layer: "typography" }
@@ -243,7 +246,8 @@ function presetTypography(options) {
             "--un-prose-invert-captions": colorObject[400] ?? baseColor,
             "--un-prose-invert-code": colorObject[100] ?? baseColor,
             "--un-prose-invert-borders": colorObject[700] ?? baseColor,
-            "--un-prose-invert-bg-soft": colorObject[800] ?? baseColor
+            "--un-prose-invert-bg-soft": colorObject[800] ?? baseColor,
+            "--un-prose-font-mono": theme.fontFamily?.mono
           };
         },
         { layer: "typography" }
@@ -269,7 +273,7 @@ function presetTypography(options) {
     preflights: [
       {
         layer: "typography",
-        getCSS: () => hasProseClass ? getPreflights(selectorProse, className, cssExtend) : void 0
+        getCSS: () => hasProseClass ? getPreflights(escapedSelector, selectorName, cssExtend) : void 0
       }
     ]
   };

package/dist/index.d.ts

@@ -5,21 +5,25 @@ import { CSSObject, Preset } from '@unocss/core';
  */
 interface TypographyOptions {
     /**
-     * The class name to use the typographic utilities.
+     * The selector name to use the typographic utilities.
      * To undo the styles to the elements, use it like
-     * `not-${className}` which is by default `not-prose`.
+     * `not-${selectorName}` which is by default `not-prose`.
      *
-     * Note: `not` utility is only available in class.
+     * Note: `not` utility is only available in class mode.
      *
      * @defaultValue `prose`
      */
-    className?: string;
+    selectorName?: string;
     /**
      * Extend or override CSS selectors with CSS declaration block.
      *
      * @defaultValue undefined
      */
     cssExtend?: Record<string, CSSObject>;
+    /**
+     * @deprecated use `selectorName` instead. It will be removed in 1.0.
+     */
+    className?: string;
 }
 /**
  * UnoCSS Preset for Typography

package/dist/index.mjs

@@ -54,7 +54,7 @@ const DEFAULT = {
     "color": "var(--un-prose-code)",
     "font-size": ".875em",
     "font-weight": 600,
-    "font-family": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation-Mono,Courier-New,monospace"
+    "font-family": "var(--un-prose-font-mono)"
   },
   ":not(pre) > code::before,:not(pre) > code::after": {
     content: '"`"'
@@ -157,7 +157,7 @@ const DEFAULT = {
   }
 };
 
-function getCSS(selectorProse, className, preflights) {
+function getCSS(escapedSelector, selectorName, preflights) {
   let css = "";
   for (const selector in preflights) {
     const cssDeclarationBlock = preflights[selector];
@@ -166,14 +166,14 @@ function getCSS(selectorProse, className, preflights) {
       if (match) {
         const matchStr = match[0];
         s = s.replace(matchStr, "");
-        return `${selectorProse} :where(${s}):not(.not-${className})${matchStr}`;
+        return `${escapedSelector} :where(${s}):not(.not-${selectorName})${matchStr}`;
       }
       return null;
     }).filter((v) => v);
     if (pseudoCSSMatchArray.length) {
       css += pseudoCSSMatchArray.join(",");
     } else {
-      css += `${selectorProse} :where(${selector}):not(.not-${className})`;
+      css += `${escapedSelector} :where(${selector}):not(.not-${selectorName})`;
     }
     css += "{";
     for (const k in cssDeclarationBlock) {
@@ -184,21 +184,24 @@ function getCSS(selectorProse, className, preflights) {
   }
   return css;
 }
-function getPreflights(selectorProse, className, cssExtend) {
-  if (!selectorProse.startsWith("."))
-    selectorProse = `:is(${selectorProse},.${className})`;
+function getPreflights(escapedSelector, selectorName, cssExtend) {
+  if (!escapedSelector.startsWith("."))
+    escapedSelector = `:is(${escapedSelector},.${selectorName})`;
   if (cssExtend)
-    return getCSS(selectorProse, className, mergeDeep(DEFAULT, cssExtend));
-  return getCSS(selectorProse, className, DEFAULT);
+    return getCSS(escapedSelector, selectorName, mergeDeep(DEFAULT, cssExtend));
+  return getCSS(escapedSelector, selectorName, DEFAULT);
 }
 
 function presetTypography(options) {
+  if (options?.className) {
+    console.warn('[unocss:preset-typography] "className" is deprecated. Use "selectorName" instead.');
+  }
   let hasProseClass = false;
-  let selectorProse = "";
-  const className = options?.className || "prose";
-  const classNameRE = new RegExp(`^${className}$`);
-  const colorsRE = new RegExp(`^${className}-([-\\w]+)$`);
-  const invertRE = new RegExp(`^${className}-invert$`);
+  let escapedSelector = "";
+  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;
   return {
     name: "@unocss/preset-typography",
@@ -206,10 +209,10 @@ function presetTypography(options) {
     layers: { typography: -1 },
     rules: [
       [
-        classNameRE,
+        selectorNameRE,
         (_, { rawSelector }) => {
           hasProseClass = true;
-          selectorProse = toEscapedSelector(rawSelector);
+          escapedSelector = toEscapedSelector(rawSelector);
           return { "color": "var(--un-prose-body)", "max-width": "65ch" };
         },
         { layer: "typography" }
@@ -239,7 +242,8 @@ function presetTypography(options) {
             "--un-prose-invert-captions": colorObject[400] ?? baseColor,
             "--un-prose-invert-code": colorObject[100] ?? baseColor,
             "--un-prose-invert-borders": colorObject[700] ?? baseColor,
-            "--un-prose-invert-bg-soft": colorObject[800] ?? baseColor
+            "--un-prose-invert-bg-soft": colorObject[800] ?? baseColor,
+            "--un-prose-font-mono": theme.fontFamily?.mono
           };
         },
         { layer: "typography" }
@@ -265,7 +269,7 @@ function presetTypography(options) {
     preflights: [
       {
         layer: "typography",
-        getCSS: () => hasProseClass ? getPreflights(selectorProse, className, cssExtend) : void 0
+        getCSS: () => hasProseClass ? getPreflights(escapedSelector, selectorName, cssExtend) : void 0
       }
     ]
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-typography",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Typography preset for UnoCSS",
   "keywords": [
     "unocss",
@@ -32,7 +32,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@unocss/core": "0.34.0"
+    "@unocss/core": "0.34.1"
   },
   "scripts": {
     "build": "unbuild",