@unocss/preset-typography 0.65.1 → 0.65.3

package/dist/index.d.mts

@@ -20,13 +20,13 @@ interface TypographyOptions {
      *
      * Note: `not` utility is only available in class mode.
      *
-     * @defaultValue `prose`
+     * @default `prose`
      */
     selectorName?: string;
     /**
      * Extend or override CSS selectors with CSS declaration block.
      *
-     * @defaultValue undefined
+     * @default undefined
      */
     cssExtend?: Record<string, CSSObject> | ((theme: Theme) => Record<string, CSSObject>);
     /**
@@ -34,13 +34,19 @@ interface TypographyOptions {
      * For more instructions, see
      * [README](https://github.com/unocss/unocss/tree/main/packages/preset-typography)
      *
-     * @defaultValue undefined
+     * @default undefined
      */
     compatibility?: TypographyCompatibilityOptions;
     /**
      * @deprecated use `selectorName` instead. It will be removed in 1.0.
      */
     className?: string;
+    /**
+     * Control whether prose's utilities should be marked with !important.
+     *
+     * @default false
+     */
+    important?: boolean | string;
 }
 /**
  * UnoCSS Preset for Typography

package/dist/index.d.ts

@@ -20,13 +20,13 @@ interface TypographyOptions {
      *
      * Note: `not` utility is only available in class mode.
      *
-     * @defaultValue `prose`
+     * @default `prose`
      */
     selectorName?: string;
     /**
      * Extend or override CSS selectors with CSS declaration block.
      *
-     * @defaultValue undefined
+     * @default undefined
      */
     cssExtend?: Record<string, CSSObject> | ((theme: Theme) => Record<string, CSSObject>);
     /**
@@ -34,13 +34,19 @@ interface TypographyOptions {
      * For more instructions, see
      * [README](https://github.com/unocss/unocss/tree/main/packages/preset-typography)
      *
-     * @defaultValue undefined
+     * @default undefined
      */
     compatibility?: TypographyCompatibilityOptions;
     /**
      * @deprecated use `selectorName` instead. It will be removed in 1.0.
      */
     className?: string;
+    /**
+     * Control whether prose's utilities should be marked with !important.
+     *
+     * @default false
+     */
+    important?: boolean | string;
 }
 /**
  * UnoCSS Preset for Typography

package/dist/index.mjs

@@ -161,10 +161,46 @@ function DEFAULT(theme) {
     }
   };
 }
+const modifiers = [
+  ["headings", "h1", "h2", "h3", "h4", "h5", "h6", "th"],
+  ["h1"],
+  ["h2"],
+  ["h3"],
+  ["h4"],
+  ["h5"],
+  ["h6"],
+  ["p"],
+  ["a"],
+  ["blockquote"],
+  ["figure"],
+  ["figcaption"],
+  ["strong"],
+  ["em"],
+  ["kbd"],
+  ["code"],
+  ["pre"],
+  ["ol"],
+  ["ul"],
+  ["li"],
+  ["table"],
+  ["thead"],
+  ["tr"],
+  ["th"],
+  ["td"],
+  ["img"],
+  ["video"],
+  ["hr"]
+];
+function getElements(modifier) {
+  for (const [name, ...selectors] of modifiers) {
+    if (name === modifier)
+      return selectors.length > 0 ? selectors : [name];
+  }
+}
 
 function getCSS(options) {
   let css = "";
-  const { escapedSelector, selectorName, preflights, compatibility } = options;
+  const { escapedSelector, selectorName, preflights, compatibility, important } = options;
   const disableNotUtility = compatibility?.noColonNot || compatibility?.noColonWhere;
   for (const selector in preflights) {
     const cssDeclarationBlock = preflights[selector];
@@ -186,32 +222,35 @@ function getCSS(options) {
     css += "{";
     for (const k in cssDeclarationBlock) {
       const v = cssDeclarationBlock[k];
-      css += `${k}:${v};`;
+      css += `${k}:${v}${important ? " !important" : ""};`;
     }
     css += "}";
   }
   return css;
 }
 function getPreflights(context, options) {
-  const { escapedSelectors, selectorName, cssExtend, compatibility } = options;
-  let escapedSelector = Array.from(escapedSelectors);
+  const { compatibility, selectorName, important = false } = options;
+  const cssExtend = typeof options?.cssExtend === "function" ? options.cssExtend(context.theme) : options?.cssExtend;
+  let escapedSelector = Array.from(options.escapedSelectors);
   if (!escapedSelector[escapedSelector.length - 1].startsWith(".") && !compatibility?.noColonIs)
-    escapedSelector = [`:is(${escapedSelector[escapedSelector.length - 1]},.${selectorName})`];
+    escapedSelector = [`:is(${escapedSelector[escapedSelector.length - 1]},.${options.selectorName})`];
+  if (typeof important === "string") {
+    escapedSelector = escapedSelector.map((e) => !compatibility?.noColonIs ? `:is(${important}) ${e}` : `${important} ${e}`);
+  }
   if (cssExtend)
-    return getCSS({ escapedSelector, selectorName, preflights: mergeDeep(DEFAULT(context.theme), cssExtend), compatibility });
-  return getCSS({ escapedSelector, selectorName, preflights: DEFAULT(context.theme), compatibility });
+    return getCSS({ escapedSelector, selectorName, preflights: mergeDeep(DEFAULT(context.theme), cssExtend), compatibility, important: important === true });
+  return getCSS({ escapedSelector, selectorName, preflights: DEFAULT(context.theme), compatibility, important: important === true });
 }
 
 const presetTypography = definePreset((options) => {
-  if (options?.className) {
-    console.warn('[unocss:preset-typography] "className" is deprecated. Use "selectorName" instead.');
-  }
+  if (options?.className)
+    console.warn('[unocss:preset-typography] "className" is deprecated. Please use "selectorName" instead.');
   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 compatibility = options?.compatibility;
+  const disableNotUtility = options?.compatibility?.noColonNot || options?.compatibility?.noColonWhere;
   return {
     name: "@unocss/preset-typography",
     enforce: "post",
@@ -274,13 +313,36 @@ const presetTypography = definePreset((options) => {
         { layer: "typography" }
       ]
     ],
+    variants: [
+      {
+        name: "typography element modifiers",
+        match: (matcher) => {
+          if (matcher.startsWith(`${selectorName}-`)) {
+            const modifyRe = new RegExp(`^${selectorName}-(\\w+)[:-].+$`);
+            const modifier = matcher.match(modifyRe)?.[1];
+            if (modifier) {
+              const elements = getElements(modifier);
+              if (elements?.length) {
+                return {
+                  matcher: matcher.slice(selectorName.length + modifier.length + 2),
+                  selector: (s) => {
+                    const notProseSelector = `:not(:where(.not-${selectorName},.not-${selectorName} *))`;
+                    const escapedSelector = disableNotUtility ? elements.map((e) => `${s} ${e}`).join(",") : `${s} :is(:where(${elements})${notProseSelector})`;
+                    return escapedSelector;
+                  }
+                };
+              }
+            }
+          }
+        }
+      }
+    ],
     preflights: [
       {
         layer: "typography",
         getCSS: (context) => {
           if (escapedSelectors.size > 0) {
-            const cssExtend = typeof options?.cssExtend === "function" ? options.cssExtend(context.theme) : options?.cssExtend;
-            return getPreflights(context, { escapedSelectors, selectorName, cssExtend, compatibility });
+            return getPreflights(context, { escapedSelectors, ...options, selectorName });
           }
         }
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unocss/preset-typography",
   "type": "module",
-  "version": "0.65.1",
+  "version": "0.65.3",
   "description": "Typography preset for UnoCSS",
   "author": "Jeff Yang",
   "license": "MIT",
@@ -32,11 +32,12 @@
     "dist"
   ],
   "dependencies": {
-    "@unocss/core": "0.65.1",
-    "@unocss/preset-mini": "0.65.1"
+    "@unocss/core": "0.65.3",
+    "@unocss/preset-mini": "0.65.3"
   },
   "scripts": {
     "build": "unbuild",
-    "stub": "unbuild --stub"
+    "stub": "unbuild --stub",
+    "test:attw": "attw --pack --config-path ../../.attw-esm-only.json"
   }
 }