refactor(preset-typography): deprecate className in favor of selectorName

packages/preset-typography/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: {

packages/preset-typography/src/index.ts

@@ -8,22 +8,26 @@ import { getPreflights } from './preflights'
  */
 export 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
 }
 
 /**
@@ -46,12 +50,16 @@ export interface TypographyOptions {
  * @public
  */
 export function presetTypography(options?: TypographyOptions): Preset {
+  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 {
@@ -60,10 +68,10 @@ export function presetTypography(options?: TypographyOptions): Preset {
     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' },
@@ -124,7 +132,7 @@ export function presetTypography(options?: TypographyOptions): Preset {
         layer: 'typography',
         getCSS: () =>
           hasProseClass
-            ? getPreflights(selectorProse, className, cssExtend)
+            ? getPreflights(escapedSelector, selectorName, cssExtend)
             : undefined,
       },
     ],

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

@@ -2,8 +2,8 @@ import { mergeDeep } from '@unocss/core'
 import { DEFAULT } from './default'
 
 function getCSS(
-  selectorProse: string,
-  className: string,
+  escapedSelector: string,
+  selectorName: string,
   preflights: object,
 ): string {
   let css = ''
@@ -24,7 +24,7 @@ function getCSS(
         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
       })
@@ -37,7 +37,7 @@ function getCSS(
     }
     else {
       // directly from css declaration
-      css += `${selectorProse} :where(${selector}):not(.not-${className})`
+      css += `${escapedSelector} :where(${selector}):not(.not-${selectorName})`
     }
 
     css += '{'
@@ -53,16 +53,16 @@ function getCSS(
 }
 
 export function getPreflights(
-  selectorProse: string,
-  className: string,
+  escapedSelector: string,
+  selectorName: string,
   cssExtend?: object | undefined,
 ): string {
   // attribute mode -> add class selector with `:is()` pseudo-class function
-  if (!selectorProse.startsWith('.'))
-    selectorProse = `:is(${selectorProse},.${className})`
+  if (!escapedSelector.startsWith('.'))
+    escapedSelector = `:is(${escapedSelector},.${selectorName})`
 
   if (cssExtend)
-    return getCSS(selectorProse, className, mergeDeep(DEFAULT, cssExtend))
+    return getCSS(escapedSelector, selectorName, mergeDeep(DEFAULT, cssExtend))
 
-  return getCSS(selectorProse, className, DEFAULT)
+  return getCSS(escapedSelector, selectorName, DEFAULT)
 }

test/preset-typography.test.ts

@@ -16,7 +16,7 @@ const testConfigs = [
   {
     name: 'prose-class-custom',
     input: 'custom text-base custom-teal dark:custom-invert',
-    typographyOptions: { className: 'custom' },
+    typographyOptions: { selectorName: 'custom' },
   },
 
   // prose attribute test
@@ -30,7 +30,7 @@ const testConfigs = [
   {
     name: 'prose-attribute-custom',
     input: '<main custom text-base custom-teal dark="custom-invert"></main>',
-    typographyOptions: { className: 'custom' },
+    typographyOptions: { selectorName: 'custom' },
   },
 
   // custom css test