feat(preset-typography): support element modifiers (#4341)

zyyv · web-flow · commit dd1545b2380e · 2024-12-20T05:06:39.000Z
diff --git a/packages/preset-typography/src/index.ts b/packages/preset-typography/src/index.ts
@@ -2,7 +2,7 @@ import type { CSSObject, Preset } from '@unocss/core'
 import type { Theme } from '@unocss/preset-mini'
 import type { TypographyCompatibilityOptions } from './types/compatibilityOptions'
 import { definePreset, toEscapedSelector } from '@unocss/core'
-import { getPreflights } from './preflights'
+import { getElements, getPreflights } from './preflights'
 
 /**
  * @public
@@ -77,6 +77,7 @@ export const presetTypography = definePreset((options?: TypographyOptions): Pres
   const selectorNameRE = new RegExp(`^${selectorName}$`)
   const colorsRE = new RegExp(`^${selectorName}-([-\\w]+)$`)
   const invertRE = new RegExp(`^${selectorName}-invert$`)
+  const disableNotUtility = options?.compatibility?.noColonNot || options?.compatibility?.noColonWhere
 
   return {
     name: '@unocss/preset-typography',
@@ -142,6 +143,32 @@ export const presetTypography = definePreset((options?: TypographyOptions): Pres
         { 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',
diff --git a/packages/preset-typography/src/preflights/default.ts b/packages/preset-typography/src/preflights/default.ts
@@ -160,3 +160,41 @@ export function DEFAULT(theme: 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'],
+]
+
+export function getElements(modifier: string) {
+  for (const [name, ...selectors] of modifiers) {
+    if (name === modifier)
+      return selectors.length > 0 ? selectors : [name]
+  }
+}
diff --git a/packages/preset-typography/src/preflights/index.ts b/packages/preset-typography/src/preflights/index.ts
@@ -4,6 +4,8 @@ import type { TypographyCompatibilityOptions } from '../types/compatibilityOptio
 import { mergeDeep } from '@unocss/core'
 import { DEFAULT } from './default'
 
+export { getElements } from './default'
+
 function getCSS(
   options: {
     escapedSelector: string[]
diff --git a/test/preset-typography.test.ts b/test/preset-typography.test.ts
@@ -139,16 +139,66 @@ const testConfigs: {
 describe('typography', () => {
   for (const tc of testConfigs) {
     it(tc.name, async () => {
-      const generator = await createGenerator({
+      const uno = await createGenerator({
         presets: [
           presetAttributify(tc.attributifyOptions),
           presetUno({ preflight: false }),
           presetTypography(tc.typographyOptions),
         ],
       })
 
-      const { css } = await generator.generate(tc.input)
+      const { css } = await uno.generate(tc.input)
       expect(css).toMatchSnapshot()
     })
   }
 })
+
+describe('typography elements modify', () => {
+  it('basic', async () => {
+    const uno = await createGenerator({
+      presets: [
+        presetAttributify(),
+        presetUno({ preflight: false }),
+        presetTypography(),
+      ],
+    })
+
+    const { css } = await uno.generate('<div prose-headings:text-red prose-img:rounded hover:prose-p-m2></div>', { preflights: false })
+
+    expect(css).toMatchInlineSnapshot(`
+      "/* layer: default */
+      [hover\\:prose-p-m2=""] :is(:where(p):not(:where(.not-prose,.not-prose *))):hover{margin:0.5rem;}
+      .prose-img\\:rounded :is(:where(img):not(:where(.not-prose,.not-prose *))),
+      [prose-img\\:rounded=""] :is(:where(img):not(:where(.not-prose,.not-prose *))){border-radius:0.25rem;}
+      .prose-headings\\:text-red :is(:where(h1,h2,h3,h4,h5,h6,th):not(:where(.not-prose,.not-prose *))),
+      [prose-headings\\:text-red=""] :is(:where(h1,h2,h3,h4,h5,h6,th):not(:where(.not-prose,.not-prose *))){--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));}"
+    `)
+  })
+
+  it('basic without compatibility', async () => {
+    const uno = await createGenerator({
+      presets: [
+        presetAttributify(),
+        presetUno({ preflight: false }),
+        presetTypography({
+          compatibility: {
+            noColonIs: true,
+            noColonWhere: true,
+            noColonNot: true,
+          },
+        }),
+      ],
+    })
+
+    const { css } = await uno.generate('<div prose-headings:text-red prose-img:rounded hover:prose-p-m2></div>', { preflights: false })
+
+    expect(css).toMatchInlineSnapshot(`
+      "/* layer: default */
+      [hover\\:prose-p-m2=""] p:hover{margin:0.5rem;}
+      .prose-img\\:rounded img,
+      [prose-img\\:rounded=""] img{border-radius:0.25rem;}
+      .prose-headings\\:text-red h1,.prose-headings\\:text-red h2,.prose-headings\\:text-red h3,.prose-headings\\:text-red h4,.prose-headings\\:text-red h5,.prose-headings\\:text-red h6,.prose-headings\\:text-red th,
+      [prose-headings\\:text-red=""] h1,[prose-headings\\:text-red=""] h2,[prose-headings\\:text-red=""] h3,[prose-headings\\:text-red=""] h4,[prose-headings\\:text-red=""] h5,[prose-headings\\:text-red=""] h6,[prose-headings\\:text-red=""] th{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));}"
+    `)
+  })
+})
