fix(preset-typography): escape selector in typography (#819)

unocss · May 7, 2022 · 634847a · 634847a
1 parent 1d52e8f
commit 634847a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 11 deletions.
diff --git a/packages/preset-typography/README.md b/packages/preset-typography/README.md
@@ -12,8 +12,7 @@ pnpm add @unocss/preset-typography -D
 
 ```js
 // unocss.config.js
-import { defineConfig, presetAttributify, presetUno } from 'unocss'
-import { presetTypography } from '@unocss/preset-typography'
+import { defineConfig, presetAttributify, presetTypography, presetUno } from 'unocss'
 
 export default defineConfig({
   presets: [

diff --git a/packages/preset-typography/src/index.ts b/packages/preset-typography/src/index.ts
@@ -1,5 +1,6 @@
 import type { CSSObject, Preset, RuleContext } from '@unocss/core'
 import type { Theme } from '@unocss/preset-mini'
+import { toEscapedSelector } from '@unocss/core'
 import { getPreflights } from './preflights'
 
 /**
@@ -30,8 +31,7 @@ export interface TypographyOptions {
  *
  * ```js
  * // unocss.config.js
- * import { presetAttributify, presetUno, defineConfig } from 'unocss'
- * import { presetTypography } from '@unocss/preset-typography'
+ * import { presetAttributify, presetUno, defineConfig, presetTypography } from 'unocss'
  *
  * export default defineConfig({
  *   presets: [
@@ -63,7 +63,7 @@ export function presetTypography(options?: TypographyOptions): Preset {
         classNameRE,
         (_, { rawSelector }) => {
           hasProseClass = true
-          selectorProse = rawSelector
+          selectorProse = toEscapedSelector(rawSelector)
           return { 'color': 'var(--un-prose-body)', 'max-width': '65ch' }
         },
         { layer: 'typography' },

diff --git a/packages/preset-typography/src/preflights/index.ts b/packages/preset-typography/src/preflights/index.ts
@@ -57,9 +57,9 @@ export function getPreflights(
   className: string,
   cssExtend?: object | undefined,
 ): string {
-  // attribute selector
-  if (!selectorProse.startsWith('['))
-    selectorProse = `.${selectorProse}`
+  // attribute mode -> add class selector with `:is()` pseudo-class function
+  if (!selectorProse.startsWith('.'))
+    selectorProse = `:is(${selectorProse},.${className})`
 
   if (cssExtend)
     return getCSS(selectorProse, className, mergeDeep(DEFAULT, cssExtend))