diff --git a/packages/preset-typography/README.md b/packages/preset-typography/README.md index c068ec5485..b1569d5870 100644 --- a/packages/preset-typography/README.md +++ b/packages/preset-typography/README.md @@ -99,6 +99,14 @@ export default defineConfig({ the `table` element **(NOTE: `not` utility is only usable in class since it is only used in CSS** **selector & not scanned by UnoCSS)**. +- **Compatibility Options** + + This preset used some pseudo-classes which are not widely supported, but you + can disable them. + + - If you enabled `noColonNot` or `noColonWhere`, `not-prose` will be unavailable. + - If you enabled `noColonIs`, attributify mode will have a wrong behavior. + ## Utilities | Rule | Styles by this rule | @@ -146,6 +154,12 @@ The CSS declarations passed to `cssExtend` will ### Type of `TypographyOptions` ```ts +export interface TypographyCompatibilityOptions { + noColonWhere?: boolean + noColonIs?: boolean + noColonNot?: boolean +} + export interface TypographyOptions { /** * The class name to use the typographic utilities. @@ -164,6 +178,15 @@ export interface TypographyOptions { * @defaultValue undefined */ cssExtend?: Record + + /** + * Compatibility option. Notice that it will affect some features. + * For more instructions, see + * [README](https://github.com/unocss/unocss/tree/main/packages/preset-typography) + * + * @defaultValue undefined + */ + compatibility?: TypographyCompatibilityOptions } ``` diff --git a/packages/preset-typography/src/index.ts b/packages/preset-typography/src/index.ts index b793af7f83..779ef03bfd 100644 --- a/packages/preset-typography/src/index.ts +++ b/packages/preset-typography/src/index.ts @@ -1,7 +1,8 @@ import type { CSSObject, Preset, RuleContext } from '@unocss/core' -import type { Theme } from '@unocss/preset-mini' import { toEscapedSelector } from '@unocss/core' +import type { Theme } from '@unocss/preset-mini' import { getPreflights } from './preflights' +import type { TypographyCompatibilityOptions } from './types/compatibilityOptions' /** * @public @@ -24,6 +25,16 @@ export interface TypographyOptions { * @defaultValue undefined */ cssExtend?: Record + + /** + * Compatibility option. Notice that it will affect some features. + * For more instructions, see + * [README](https://github.com/unocss/unocss/tree/main/packages/preset-typography) + * + * @defaultValue undefined + */ + compatibility?: TypographyCompatibilityOptions + /** * @deprecated use `selectorName` instead. It will be removed in 1.0. */ @@ -52,15 +63,15 @@ export interface TypographyOptions { export function presetTypography(options?: TypographyOptions): Preset { if (options?.className) { console.warn('[unocss:preset-typography] "className" is deprecated. ' - + 'Use "selectorName" instead.') + + 'Use "selectorName" instead.') } - let hasProseClass = false - let escapedSelector = '' + const escapedSelectors = 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 cssExtend = options?.cssExtend + const compatibility = options?.compatibility return { name: '@unocss/preset-typography', @@ -70,8 +81,7 @@ export function presetTypography(options?: TypographyOptions): Preset { [ selectorNameRE, (_, { rawSelector }) => { - hasProseClass = true - escapedSelector = toEscapedSelector(rawSelector) + escapedSelectors.add(toEscapedSelector(rawSelector)) return { 'color': 'var(--un-prose-body)', 'max-width': '65ch' } }, { layer: 'typography' }, @@ -132,10 +142,10 @@ export function presetTypography(options?: TypographyOptions): Preset { preflights: [ { layer: 'typography', - getCSS: () => - hasProseClass - ? getPreflights(escapedSelector, selectorName, cssExtend) - : undefined, + getCSS: () => { + if (escapedSelectors.size > 0) + return getPreflights({ escapedSelectors, selectorName, cssExtend, compatibility }) + }, }, ], } diff --git a/packages/preset-typography/src/preflights/index.ts b/packages/preset-typography/src/preflights/index.ts index d21fd66fe5..7f2ba568ae 100644 --- a/packages/preset-typography/src/preflights/index.ts +++ b/packages/preset-typography/src/preflights/index.ts @@ -1,13 +1,20 @@ import { mergeDeep } from '@unocss/core' +import type { TypographyCompatibilityOptions } from '../types/compatibilityOptions' import { DEFAULT } from './default' function getCSS( - escapedSelector: string, - selectorName: string, - preflights: object, + options: { + escapedSelector: string[] + selectorName: string + preflights: object + compatibility?: TypographyCompatibilityOptions + }, ): string { let css = '' + const { escapedSelector, selectorName, preflights, compatibility } = options + const disableNotUtility = compatibility?.noColonNot || compatibility?.noColonWhere + for (const selector in preflights) { // @ts-expect-error preflights do not have definitive keys const cssDeclarationBlock = preflights[selector] @@ -25,7 +32,11 @@ function getCSS( if (match) { const matchStr = match[0] s = s.replace(matchStr, '') - return `${escapedSelector} :where(${s})${notProseSelector}${matchStr}` + return escapedSelector.map(e => + disableNotUtility + ? `${e} ${s}${matchStr}` + : `${e} :where(${s})${notProseSelector}${matchStr}`, + ).join(',') } return null }) @@ -38,7 +49,11 @@ function getCSS( } else { // directly from css declaration - css += `${escapedSelector} :where(${selector})${notProseSelector}` + css += escapedSelector.map(e => + disableNotUtility + ? selector.split(',').map(s => `${e} ${s}`).join(',') + : `${e} :where(${selector})${notProseSelector}`, + ).join(',') } css += '{' @@ -54,16 +69,22 @@ function getCSS( } export function getPreflights( - escapedSelector: string, - selectorName: string, - cssExtend?: object | undefined, + options: { + escapedSelectors: Set + selectorName: string + cssExtend?: object | undefined + compatibility?: TypographyCompatibilityOptions + }, ): string { + const { escapedSelectors, selectorName, cssExtend, compatibility } = options + let escapedSelector = Array.from(escapedSelectors) + // attribute mode -> add class selector with `:is()` pseudo-class function - if (!escapedSelector.startsWith('.')) - escapedSelector = `:is(${escapedSelector},.${selectorName})` + if (!escapedSelector[escapedSelector.length - 1].startsWith('.') && !compatibility?.noColonIs) + escapedSelector = [`:is(${escapedSelector[escapedSelector.length - 1]},.${selectorName})`] if (cssExtend) - return getCSS(escapedSelector, selectorName, mergeDeep(DEFAULT, cssExtend)) + return getCSS({ escapedSelector, selectorName, preflights: mergeDeep(DEFAULT, cssExtend), compatibility }) - return getCSS(escapedSelector, selectorName, DEFAULT) + return getCSS({ escapedSelector, selectorName, preflights: DEFAULT, compatibility }) } diff --git a/packages/preset-typography/src/types/compatibilityOptions.d.ts b/packages/preset-typography/src/types/compatibilityOptions.d.ts new file mode 100644 index 0000000000..826268a275 --- /dev/null +++ b/packages/preset-typography/src/types/compatibilityOptions.d.ts @@ -0,0 +1,6 @@ +/** @public */ +export interface TypographyCompatibilityOptions { + noColonWhere?: boolean + noColonIs?: boolean + noColonNot?: boolean +} \ No newline at end of file diff --git a/test/__snapshots__/preset-typography.test.ts.snap b/test/__snapshots__/preset-typography.test.ts.snap index 53403603ca..da13d57fbe 100644 --- a/test/__snapshots__/preset-typography.test.ts.snap +++ b/test/__snapshots__/preset-typography.test.ts.snap @@ -1,9 +1,7 @@ // Vitest Snapshot v1 exports[`typography > prose-attribute 1`] = ` -"/* layer: preflights */ -*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} -/* layer: typography */ +"/* layer: typography */ :is([prose=\\"\\"],.prose) :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}:is([prose=\\"\\"],.prose) :where(a):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}:is([prose=\\"\\"],.prose) :where(a code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);}:is([prose=\\"\\"],.prose) :where(p,ul,ol,pre):not(:where(.not-prose,.not-prose *)){margin:1em 0;line-height:1.75;}:is([prose=\\"\\"],.prose) :where(blockquote):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}:is([prose=\\"\\"],.prose) :where(h1):not(:where(.not-prose,.not-prose *)){margin:1rem 0;font-size:2.25em;}:is([prose=\\"\\"],.prose) :where(h2):not(:where(.not-prose,.not-prose *)){margin:1.75em 0 .5em;font-size:1.75em;}:is([prose=\\"\\"],.prose) :where(h3):not(:where(.not-prose,.not-prose *)){margin:1.5em 0 .5em;font-size:1.375em;}:is([prose=\\"\\"],.prose) :where(h4):not(:where(.not-prose,.not-prose *)){margin:1em 0;font-size:1.125em;}:is([prose=\\"\\"],.prose) :where(img,video):not(:where(.not-prose,.not-prose *)){max-width:100%;}:is([prose=\\"\\"],.prose) :where(figure,picture):not(:where(.not-prose,.not-prose *)){margin:1em 0;}:is([prose=\\"\\"],.prose) :where(figcaption):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-captions);font-size:.875em;}:is([prose=\\"\\"],.prose) :where(code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}:is([prose=\\"\\"],.prose) :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::before,:is([prose=\\"\\"],.prose) :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::after{content:\\"\`\\";}:is([prose=\\"\\"],.prose) :where(pre):not(:where(.not-prose,.not-prose *)){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}:is([prose=\\"\\"],.prose) :where(pre,code):not(:where(.not-prose,.not-prose *)){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}:is([prose=\\"\\"],.prose) :where(pre code):not(:where(.not-prose,.not-prose *)){font-weight:inherit;}:is([prose=\\"\\"],.prose) :where(ol,ul):not(:where(.not-prose,.not-prose *)){padding-left:1.25em;}:is([prose=\\"\\"],.prose) :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"A\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"a\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"A\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"a\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"I\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"i\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"I\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"i\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"1\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}:is([prose=\\"\\"],.prose) :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc;}:is([prose=\\"\\"],.prose) :where(ol > li):not(:where(.not-prose,.not-prose *))::marker,:is([prose=\\"\\"],.prose) :where(ul > li):not(:where(.not-prose,.not-prose *))::marker,:is([prose=\\"\\"],.prose) :where(summary):not(:where(.not-prose,.not-prose *))::marker{color:var(--un-prose-lists);}:is([prose=\\"\\"],.prose) :where(hr):not(:where(.not-prose,.not-prose *)){margin:2em 0;border:1px solid var(--un-prose-hr);}:is([prose=\\"\\"],.prose) :where(table):not(:where(.not-prose,.not-prose *)){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}:is([prose=\\"\\"],.prose) :where(tr):not(:where(.not-prose,.not-prose *)):nth-child(2n){background:var(--un-prose-bg-soft);}:is([prose=\\"\\"],.prose) :where(td,th):not(:where(.not-prose,.not-prose *)){border:1px solid var(--un-prose-borders);padding:.625em 1em;}:is([prose=\\"\\"],.prose) :where(abbr):not(:where(.not-prose,.not-prose *)){cursor:help;}:is([prose=\\"\\"],.prose) :where(kbd):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}:is([prose=\\"\\"],.prose) :where(details):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}:is([prose=\\"\\"],.prose) :where(summary):not(:where(.not-prose,.not-prose *)){cursor:pointer;font-weight:600;} .prose, [prose=\\"\\"]{color:var(--un-prose-body);max-width:65ch;} @@ -17,9 +15,7 @@ exports[`typography > prose-attribute 1`] = ` `; exports[`typography > prose-attribute-custom 1`] = ` -"/* layer: preflights */ -*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} -/* layer: typography */ +"/* layer: typography */ :is([custom=\\"\\"],.custom) :where(h1,h2,h3,h4,h5,h6):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}:is([custom=\\"\\"],.custom) :where(a):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}:is([custom=\\"\\"],.custom) :where(a code):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-links);}:is([custom=\\"\\"],.custom) :where(p,ul,ol,pre):not(:where(.not-custom,.not-custom *)){margin:1em 0;line-height:1.75;}:is([custom=\\"\\"],.custom) :where(blockquote):not(:where(.not-custom,.not-custom *)){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}:is([custom=\\"\\"],.custom) :where(h1):not(:where(.not-custom,.not-custom *)){margin:1rem 0;font-size:2.25em;}:is([custom=\\"\\"],.custom) :where(h2):not(:where(.not-custom,.not-custom *)){margin:1.75em 0 .5em;font-size:1.75em;}:is([custom=\\"\\"],.custom) :where(h3):not(:where(.not-custom,.not-custom *)){margin:1.5em 0 .5em;font-size:1.375em;}:is([custom=\\"\\"],.custom) :where(h4):not(:where(.not-custom,.not-custom *)){margin:1em 0;font-size:1.125em;}:is([custom=\\"\\"],.custom) :where(img,video):not(:where(.not-custom,.not-custom *)){max-width:100%;}:is([custom=\\"\\"],.custom) :where(figure,picture):not(:where(.not-custom,.not-custom *)){margin:1em 0;}:is([custom=\\"\\"],.custom) :where(figcaption):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-captions);font-size:.875em;}:is([custom=\\"\\"],.custom) :where(code):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}:is([custom=\\"\\"],.custom) :where(:not(pre) > code):not(:where(.not-custom,.not-custom *))::before,:is([custom=\\"\\"],.custom) :where(:not(pre) > code):not(:where(.not-custom,.not-custom *))::after{content:\\"\`\\";}:is([custom=\\"\\"],.custom) :where(pre):not(:where(.not-custom,.not-custom *)){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}:is([custom=\\"\\"],.custom) :where(pre,code):not(:where(.not-custom,.not-custom *)){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}:is([custom=\\"\\"],.custom) :where(pre code):not(:where(.not-custom,.not-custom *)){font-weight:inherit;}:is([custom=\\"\\"],.custom) :where(ol,ul):not(:where(.not-custom,.not-custom *)){padding-left:1.25em;}:is([custom=\\"\\"],.custom) :where(ol):not(:where(.not-custom,.not-custom *)){list-style-type:decimal;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"A\\"]):not(:where(.not-custom,.not-custom *)){list-style-type:upper-alpha;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"a\\"]):not(:where(.not-custom,.not-custom *)){list-style-type:lower-alpha;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"A\\" s]):not(:where(.not-custom,.not-custom *)){list-style-type:upper-alpha;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"a\\" s]):not(:where(.not-custom,.not-custom *)){list-style-type:lower-alpha;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"I\\"]):not(:where(.not-custom,.not-custom *)){list-style-type:upper-roman;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"i\\"]):not(:where(.not-custom,.not-custom *)){list-style-type:lower-roman;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"I\\" s]):not(:where(.not-custom,.not-custom *)){list-style-type:upper-roman;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"i\\" s]):not(:where(.not-custom,.not-custom *)){list-style-type:lower-roman;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"1\\"]):not(:where(.not-custom,.not-custom *)){list-style-type:decimal;}:is([custom=\\"\\"],.custom) :where(ul):not(:where(.not-custom,.not-custom *)){list-style-type:disc;}:is([custom=\\"\\"],.custom) :where(ol > li):not(:where(.not-custom,.not-custom *))::marker,:is([custom=\\"\\"],.custom) :where(ul > li):not(:where(.not-custom,.not-custom *))::marker,:is([custom=\\"\\"],.custom) :where(summary):not(:where(.not-custom,.not-custom *))::marker{color:var(--un-prose-lists);}:is([custom=\\"\\"],.custom) :where(hr):not(:where(.not-custom,.not-custom *)){margin:2em 0;border:1px solid var(--un-prose-hr);}:is([custom=\\"\\"],.custom) :where(table):not(:where(.not-custom,.not-custom *)){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}:is([custom=\\"\\"],.custom) :where(tr):not(:where(.not-custom,.not-custom *)):nth-child(2n){background:var(--un-prose-bg-soft);}:is([custom=\\"\\"],.custom) :where(td,th):not(:where(.not-custom,.not-custom *)){border:1px solid var(--un-prose-borders);padding:.625em 1em;}:is([custom=\\"\\"],.custom) :where(abbr):not(:where(.not-custom,.not-custom *)){cursor:help;}:is([custom=\\"\\"],.custom) :where(kbd):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}:is([custom=\\"\\"],.custom) :where(details):not(:where(.not-custom,.not-custom *)){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}:is([custom=\\"\\"],.custom) :where(summary):not(:where(.not-custom,.not-custom *)){cursor:pointer;font-weight:600;} .custom, [custom=\\"\\"]{color:var(--un-prose-body);max-width:65ch;} @@ -33,16 +29,12 @@ exports[`typography > prose-attribute-custom 1`] = ` `; exports[`typography > prose-black 1`] = ` -"/* layer: preflights */ -*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} -/* layer: typography */ +"/* layer: typography */ .prose-black{--un-prose-body:#000;--un-prose-headings:#000;--un-prose-links:#000;--un-prose-lists:#000;--un-prose-hr:#000;--un-prose-captions:#000;--un-prose-code:#000;--un-prose-borders:#000;--un-prose-bg-soft:#000;--un-prose-invert-body:#000;--un-prose-invert-headings:#000;--un-prose-invert-links:#000;--un-prose-invert-lists:#000;--un-prose-invert-hr:#000;--un-prose-invert-captions:#000;--un-prose-invert-code:#000;--un-prose-invert-borders:#000;--un-prose-invert-bg-soft:#000;--un-prose-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;}" `; exports[`typography > prose-class 1`] = ` -"/* layer: preflights */ -*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} -/* layer: typography */ +"/* layer: typography */ .prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}.prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}.prose :where(a code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);}.prose :where(p,ul,ol,pre):not(:where(.not-prose,.not-prose *)){margin:1em 0;line-height:1.75;}.prose :where(blockquote):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}.prose :where(h1):not(:where(.not-prose,.not-prose *)){margin:1rem 0;font-size:2.25em;}.prose :where(h2):not(:where(.not-prose,.not-prose *)){margin:1.75em 0 .5em;font-size:1.75em;}.prose :where(h3):not(:where(.not-prose,.not-prose *)){margin:1.5em 0 .5em;font-size:1.375em;}.prose :where(h4):not(:where(.not-prose,.not-prose *)){margin:1em 0;font-size:1.125em;}.prose :where(img,video):not(:where(.not-prose,.not-prose *)){max-width:100%;}.prose :where(figure,picture):not(:where(.not-prose,.not-prose *)){margin:1em 0;}.prose :where(figcaption):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-captions);font-size:.875em;}.prose :where(code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}.prose :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::before,.prose :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::after{content:\\"\`\\";}.prose :where(pre):not(:where(.not-prose,.not-prose *)){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}.prose :where(pre,code):not(:where(.not-prose,.not-prose *)){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}.prose :where(pre code):not(:where(.not-prose,.not-prose *)){font-weight:inherit;}.prose :where(ol,ul):not(:where(.not-prose,.not-prose *)){padding-left:1.25em;}.prose :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}.prose :where(ol[type=\\"A\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}.prose :where(ol[type=\\"a\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}.prose :where(ol[type=\\"A\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}.prose :where(ol[type=\\"a\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}.prose :where(ol[type=\\"I\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}.prose :where(ol[type=\\"i\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}.prose :where(ol[type=\\"I\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}.prose :where(ol[type=\\"i\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}.prose :where(ol[type=\\"1\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}.prose :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc;}.prose :where(ol > li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(ul > li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(summary):not(:where(.not-prose,.not-prose *))::marker{color:var(--un-prose-lists);}.prose :where(hr):not(:where(.not-prose,.not-prose *)){margin:2em 0;border:1px solid var(--un-prose-hr);}.prose :where(table):not(:where(.not-prose,.not-prose *)){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}.prose :where(tr):not(:where(.not-prose,.not-prose *)):nth-child(2n){background:var(--un-prose-bg-soft);}.prose :where(td,th):not(:where(.not-prose,.not-prose *)){border:1px solid var(--un-prose-borders);padding:.625em 1em;}.prose :where(abbr):not(:where(.not-prose,.not-prose *)){cursor:help;}.prose :where(kbd):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}.prose :where(details):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}.prose :where(summary):not(:where(.not-prose,.not-prose *)){cursor:pointer;font-weight:600;} .prose{color:var(--un-prose-body);max-width:65ch;} .prose-teal{--un-prose-body:#0f766e;--un-prose-headings:#134e4a;--un-prose-links:#134e4a;--un-prose-lists:#2dd4bf;--un-prose-hr:#99f6e4;--un-prose-captions:#14b8a6;--un-prose-code:#134e4a;--un-prose-borders:#99f6e4;--un-prose-bg-soft:#ccfbf1;--un-prose-invert-body:#99f6e4;--un-prose-invert-headings:#ccfbf1;--un-prose-invert-links:#ccfbf1;--un-prose-invert-lists:#14b8a6;--un-prose-invert-hr:#0f766e;--un-prose-invert-captions:#2dd4bf;--un-prose-invert-code:#ccfbf1;--un-prose-invert-borders:#0f766e;--un-prose-invert-bg-soft:#115e59;--un-prose-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;} @@ -52,9 +44,7 @@ exports[`typography > prose-class 1`] = ` `; exports[`typography > prose-class-custom 1`] = ` -"/* layer: preflights */ -*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} -/* layer: typography */ +"/* layer: typography */ .custom :where(h1,h2,h3,h4,h5,h6):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}.custom :where(a):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}.custom :where(a code):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-links);}.custom :where(p,ul,ol,pre):not(:where(.not-custom,.not-custom *)){margin:1em 0;line-height:1.75;}.custom :where(blockquote):not(:where(.not-custom,.not-custom *)){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}.custom :where(h1):not(:where(.not-custom,.not-custom *)){margin:1rem 0;font-size:2.25em;}.custom :where(h2):not(:where(.not-custom,.not-custom *)){margin:1.75em 0 .5em;font-size:1.75em;}.custom :where(h3):not(:where(.not-custom,.not-custom *)){margin:1.5em 0 .5em;font-size:1.375em;}.custom :where(h4):not(:where(.not-custom,.not-custom *)){margin:1em 0;font-size:1.125em;}.custom :where(img,video):not(:where(.not-custom,.not-custom *)){max-width:100%;}.custom :where(figure,picture):not(:where(.not-custom,.not-custom *)){margin:1em 0;}.custom :where(figcaption):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-captions);font-size:.875em;}.custom :where(code):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}.custom :where(:not(pre) > code):not(:where(.not-custom,.not-custom *))::before,.custom :where(:not(pre) > code):not(:where(.not-custom,.not-custom *))::after{content:\\"\`\\";}.custom :where(pre):not(:where(.not-custom,.not-custom *)){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}.custom :where(pre,code):not(:where(.not-custom,.not-custom *)){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}.custom :where(pre code):not(:where(.not-custom,.not-custom *)){font-weight:inherit;}.custom :where(ol,ul):not(:where(.not-custom,.not-custom *)){padding-left:1.25em;}.custom :where(ol):not(:where(.not-custom,.not-custom *)){list-style-type:decimal;}.custom :where(ol[type=\\"A\\"]):not(:where(.not-custom,.not-custom *)){list-style-type:upper-alpha;}.custom :where(ol[type=\\"a\\"]):not(:where(.not-custom,.not-custom *)){list-style-type:lower-alpha;}.custom :where(ol[type=\\"A\\" s]):not(:where(.not-custom,.not-custom *)){list-style-type:upper-alpha;}.custom :where(ol[type=\\"a\\" s]):not(:where(.not-custom,.not-custom *)){list-style-type:lower-alpha;}.custom :where(ol[type=\\"I\\"]):not(:where(.not-custom,.not-custom *)){list-style-type:upper-roman;}.custom :where(ol[type=\\"i\\"]):not(:where(.not-custom,.not-custom *)){list-style-type:lower-roman;}.custom :where(ol[type=\\"I\\" s]):not(:where(.not-custom,.not-custom *)){list-style-type:upper-roman;}.custom :where(ol[type=\\"i\\" s]):not(:where(.not-custom,.not-custom *)){list-style-type:lower-roman;}.custom :where(ol[type=\\"1\\"]):not(:where(.not-custom,.not-custom *)){list-style-type:decimal;}.custom :where(ul):not(:where(.not-custom,.not-custom *)){list-style-type:disc;}.custom :where(ol > li):not(:where(.not-custom,.not-custom *))::marker,.custom :where(ul > li):not(:where(.not-custom,.not-custom *))::marker,.custom :where(summary):not(:where(.not-custom,.not-custom *))::marker{color:var(--un-prose-lists);}.custom :where(hr):not(:where(.not-custom,.not-custom *)){margin:2em 0;border:1px solid var(--un-prose-hr);}.custom :where(table):not(:where(.not-custom,.not-custom *)){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}.custom :where(tr):not(:where(.not-custom,.not-custom *)):nth-child(2n){background:var(--un-prose-bg-soft);}.custom :where(td,th):not(:where(.not-custom,.not-custom *)){border:1px solid var(--un-prose-borders);padding:.625em 1em;}.custom :where(abbr):not(:where(.not-custom,.not-custom *)){cursor:help;}.custom :where(kbd):not(:where(.not-custom,.not-custom *)){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}.custom :where(details):not(:where(.not-custom,.not-custom *)){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}.custom :where(summary):not(:where(.not-custom,.not-custom *)){cursor:pointer;font-weight:600;} .custom{color:var(--un-prose-body);max-width:65ch;} .custom-teal{--un-prose-body:#0f766e;--un-prose-headings:#134e4a;--un-prose-links:#134e4a;--un-prose-lists:#2dd4bf;--un-prose-hr:#99f6e4;--un-prose-captions:#14b8a6;--un-prose-code:#134e4a;--un-prose-borders:#99f6e4;--un-prose-bg-soft:#ccfbf1;--un-prose-invert-body:#99f6e4;--un-prose-invert-headings:#ccfbf1;--un-prose-invert-links:#ccfbf1;--un-prose-invert-lists:#14b8a6;--un-prose-invert-hr:#0f766e;--un-prose-invert-captions:#2dd4bf;--un-prose-invert-code:#ccfbf1;--un-prose-invert-borders:#0f766e;--un-prose-invert-bg-soft:#115e59;--un-prose-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;} @@ -63,24 +53,38 @@ exports[`typography > prose-class-custom 1`] = ` .text-base{font-size:1rem;line-height:1.5rem;}" `; +exports[`typography > prose-compatibility-no-colon-is 1`] = ` +"/* layer: typography */ +.prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}.prose :where(a):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(a):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}.prose :where(a code):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(a code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);}.prose :where(p,ul,ol,pre):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(p,ul,ol,pre):not(:where(.not-prose,.not-prose *)){margin:1em 0;line-height:1.75;}.prose :where(blockquote):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(blockquote):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}.prose :where(h1):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(h1):not(:where(.not-prose,.not-prose *)){margin:1rem 0;font-size:2.25em;}.prose :where(h2):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(h2):not(:where(.not-prose,.not-prose *)){margin:1.75em 0 .5em;font-size:1.75em;}.prose :where(h3):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(h3):not(:where(.not-prose,.not-prose *)){margin:1.5em 0 .5em;font-size:1.375em;}.prose :where(h4):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(h4):not(:where(.not-prose,.not-prose *)){margin:1em 0;font-size:1.125em;}.prose :where(img,video):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(img,video):not(:where(.not-prose,.not-prose *)){max-width:100%;}.prose :where(figure,picture):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(figure,picture):not(:where(.not-prose,.not-prose *)){margin:1em 0;}.prose :where(figcaption):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(figcaption):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-captions);font-size:.875em;}.prose :where(code):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}.prose :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::before,[prose=\\"\\"] :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::before,.prose :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::after,[prose=\\"\\"] :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::after{content:\\"\`\\";}.prose :where(pre):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(pre):not(:where(.not-prose,.not-prose *)){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}.prose :where(pre,code):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(pre,code):not(:where(.not-prose,.not-prose *)){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}.prose :where(pre code):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(pre code):not(:where(.not-prose,.not-prose *)){font-weight:inherit;}.prose :where(ol,ul):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol,ul):not(:where(.not-prose,.not-prose *)){padding-left:1.25em;}.prose :where(ol):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}.prose :where(ol[type=\\"A\\"]):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol[type=\\"A\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}.prose :where(ol[type=\\"a\\"]):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol[type=\\"a\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}.prose :where(ol[type=\\"A\\" s]):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol[type=\\"A\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}.prose :where(ol[type=\\"a\\" s]):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol[type=\\"a\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}.prose :where(ol[type=\\"I\\"]):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol[type=\\"I\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}.prose :where(ol[type=\\"i\\"]):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol[type=\\"i\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}.prose :where(ol[type=\\"I\\" s]):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol[type=\\"I\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}.prose :where(ol[type=\\"i\\" s]):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol[type=\\"i\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}.prose :where(ol[type=\\"1\\"]):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ol[type=\\"1\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}.prose :where(ul):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc;}.prose :where(ol > li):not(:where(.not-prose,.not-prose *))::marker,[prose=\\"\\"] :where(ol > li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(ul > li):not(:where(.not-prose,.not-prose *))::marker,[prose=\\"\\"] :where(ul > li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(summary):not(:where(.not-prose,.not-prose *))::marker,[prose=\\"\\"] :where(summary):not(:where(.not-prose,.not-prose *))::marker{color:var(--un-prose-lists);}.prose :where(hr):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(hr):not(:where(.not-prose,.not-prose *)){margin:2em 0;border:1px solid var(--un-prose-hr);}.prose :where(table):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(table):not(:where(.not-prose,.not-prose *)){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}.prose :where(tr):not(:where(.not-prose,.not-prose *)):nth-child(2n),[prose=\\"\\"] :where(tr):not(:where(.not-prose,.not-prose *)):nth-child(2n){background:var(--un-prose-bg-soft);}.prose :where(td,th):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(td,th):not(:where(.not-prose,.not-prose *)){border:1px solid var(--un-prose-borders);padding:.625em 1em;}.prose :where(abbr):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(abbr):not(:where(.not-prose,.not-prose *)){cursor:help;}.prose :where(kbd):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(kbd):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}.prose :where(details):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(details):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}.prose :where(summary):not(:where(.not-prose,.not-prose *)),[prose=\\"\\"] :where(summary):not(:where(.not-prose,.not-prose *)){cursor:pointer;font-weight:600;} +.prose, +[prose=\\"\\"]{color:var(--un-prose-body);max-width:65ch;}" +`; + +exports[`typography > prose-compatibility-no-colon-not 1`] = ` +"/* layer: typography */ +:is([prose=\\"\\"],.prose) h1,:is([prose=\\"\\"],.prose) h2,:is([prose=\\"\\"],.prose) h3,:is([prose=\\"\\"],.prose) h4,:is([prose=\\"\\"],.prose) h5,:is([prose=\\"\\"],.prose) h6{color:var(--un-prose-headings);font-weight:600;line-height:1.25;}:is([prose=\\"\\"],.prose) a{color:var(--un-prose-links);text-decoration:underline;font-weight:500;}:is([prose=\\"\\"],.prose) a code{color:var(--un-prose-links);}:is([prose=\\"\\"],.prose) p,:is([prose=\\"\\"],.prose) ul,:is([prose=\\"\\"],.prose) ol,:is([prose=\\"\\"],.prose) pre{margin:1em 0;line-height:1.75;}:is([prose=\\"\\"],.prose) blockquote{margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}:is([prose=\\"\\"],.prose) h1{margin:1rem 0;font-size:2.25em;}:is([prose=\\"\\"],.prose) h2{margin:1.75em 0 .5em;font-size:1.75em;}:is([prose=\\"\\"],.prose) h3{margin:1.5em 0 .5em;font-size:1.375em;}:is([prose=\\"\\"],.prose) h4{margin:1em 0;font-size:1.125em;}:is([prose=\\"\\"],.prose) img,:is([prose=\\"\\"],.prose) video{max-width:100%;}:is([prose=\\"\\"],.prose) figure,:is([prose=\\"\\"],.prose) picture{margin:1em 0;}:is([prose=\\"\\"],.prose) figcaption{color:var(--un-prose-captions);font-size:.875em;}:is([prose=\\"\\"],.prose) code{color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}:is([prose=\\"\\"],.prose) :not(pre) > code::before,:is([prose=\\"\\"],.prose) :not(pre) > code::after{content:\\"\`\\";}:is([prose=\\"\\"],.prose) pre{padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}:is([prose=\\"\\"],.prose) pre,:is([prose=\\"\\"],.prose) code{white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}:is([prose=\\"\\"],.prose) pre code{font-weight:inherit;}:is([prose=\\"\\"],.prose) ol,:is([prose=\\"\\"],.prose) ul{padding-left:1.25em;}:is([prose=\\"\\"],.prose) ol{list-style-type:decimal;}:is([prose=\\"\\"],.prose) ol[type=\\"A\\"]{list-style-type:upper-alpha;}:is([prose=\\"\\"],.prose) ol[type=\\"a\\"]{list-style-type:lower-alpha;}:is([prose=\\"\\"],.prose) ol[type=\\"A\\" s]{list-style-type:upper-alpha;}:is([prose=\\"\\"],.prose) ol[type=\\"a\\" s]{list-style-type:lower-alpha;}:is([prose=\\"\\"],.prose) ol[type=\\"I\\"]{list-style-type:upper-roman;}:is([prose=\\"\\"],.prose) ol[type=\\"i\\"]{list-style-type:lower-roman;}:is([prose=\\"\\"],.prose) ol[type=\\"I\\" s]{list-style-type:upper-roman;}:is([prose=\\"\\"],.prose) ol[type=\\"i\\" s]{list-style-type:lower-roman;}:is([prose=\\"\\"],.prose) ol[type=\\"1\\"]{list-style-type:decimal;}:is([prose=\\"\\"],.prose) ul{list-style-type:disc;}:is([prose=\\"\\"],.prose) ol > li::marker,:is([prose=\\"\\"],.prose) ul > li::marker,:is([prose=\\"\\"],.prose) summary::marker{color:var(--un-prose-lists);}:is([prose=\\"\\"],.prose) hr{margin:2em 0;border:1px solid var(--un-prose-hr);}:is([prose=\\"\\"],.prose) table{display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}:is([prose=\\"\\"],.prose) tr:nth-child(2n){background:var(--un-prose-bg-soft);}:is([prose=\\"\\"],.prose) td,:is([prose=\\"\\"],.prose) th{border:1px solid var(--un-prose-borders);padding:.625em 1em;}:is([prose=\\"\\"],.prose) abbr{cursor:help;}:is([prose=\\"\\"],.prose) kbd{color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}:is([prose=\\"\\"],.prose) details{margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}:is([prose=\\"\\"],.prose) summary{cursor:pointer;font-weight:600;} +.prose, +[prose=\\"\\"]{color:var(--un-prose-body);max-width:65ch;}" +`; + +exports[`typography > prose-compatibility-no-colon-where 1`] = ` +"/* layer: typography */ +:is([prose=\\"\\"],.prose) h1,:is([prose=\\"\\"],.prose) h2,:is([prose=\\"\\"],.prose) h3,:is([prose=\\"\\"],.prose) h4,:is([prose=\\"\\"],.prose) h5,:is([prose=\\"\\"],.prose) h6{color:var(--un-prose-headings);font-weight:600;line-height:1.25;}:is([prose=\\"\\"],.prose) a{color:var(--un-prose-links);text-decoration:underline;font-weight:500;}:is([prose=\\"\\"],.prose) a code{color:var(--un-prose-links);}:is([prose=\\"\\"],.prose) p,:is([prose=\\"\\"],.prose) ul,:is([prose=\\"\\"],.prose) ol,:is([prose=\\"\\"],.prose) pre{margin:1em 0;line-height:1.75;}:is([prose=\\"\\"],.prose) blockquote{margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}:is([prose=\\"\\"],.prose) h1{margin:1rem 0;font-size:2.25em;}:is([prose=\\"\\"],.prose) h2{margin:1.75em 0 .5em;font-size:1.75em;}:is([prose=\\"\\"],.prose) h3{margin:1.5em 0 .5em;font-size:1.375em;}:is([prose=\\"\\"],.prose) h4{margin:1em 0;font-size:1.125em;}:is([prose=\\"\\"],.prose) img,:is([prose=\\"\\"],.prose) video{max-width:100%;}:is([prose=\\"\\"],.prose) figure,:is([prose=\\"\\"],.prose) picture{margin:1em 0;}:is([prose=\\"\\"],.prose) figcaption{color:var(--un-prose-captions);font-size:.875em;}:is([prose=\\"\\"],.prose) code{color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}:is([prose=\\"\\"],.prose) :not(pre) > code::before,:is([prose=\\"\\"],.prose) :not(pre) > code::after{content:\\"\`\\";}:is([prose=\\"\\"],.prose) pre{padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}:is([prose=\\"\\"],.prose) pre,:is([prose=\\"\\"],.prose) code{white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}:is([prose=\\"\\"],.prose) pre code{font-weight:inherit;}:is([prose=\\"\\"],.prose) ol,:is([prose=\\"\\"],.prose) ul{padding-left:1.25em;}:is([prose=\\"\\"],.prose) ol{list-style-type:decimal;}:is([prose=\\"\\"],.prose) ol[type=\\"A\\"]{list-style-type:upper-alpha;}:is([prose=\\"\\"],.prose) ol[type=\\"a\\"]{list-style-type:lower-alpha;}:is([prose=\\"\\"],.prose) ol[type=\\"A\\" s]{list-style-type:upper-alpha;}:is([prose=\\"\\"],.prose) ol[type=\\"a\\" s]{list-style-type:lower-alpha;}:is([prose=\\"\\"],.prose) ol[type=\\"I\\"]{list-style-type:upper-roman;}:is([prose=\\"\\"],.prose) ol[type=\\"i\\"]{list-style-type:lower-roman;}:is([prose=\\"\\"],.prose) ol[type=\\"I\\" s]{list-style-type:upper-roman;}:is([prose=\\"\\"],.prose) ol[type=\\"i\\" s]{list-style-type:lower-roman;}:is([prose=\\"\\"],.prose) ol[type=\\"1\\"]{list-style-type:decimal;}:is([prose=\\"\\"],.prose) ul{list-style-type:disc;}:is([prose=\\"\\"],.prose) ol > li::marker,:is([prose=\\"\\"],.prose) ul > li::marker,:is([prose=\\"\\"],.prose) summary::marker{color:var(--un-prose-lists);}:is([prose=\\"\\"],.prose) hr{margin:2em 0;border:1px solid var(--un-prose-hr);}:is([prose=\\"\\"],.prose) table{display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}:is([prose=\\"\\"],.prose) tr:nth-child(2n){background:var(--un-prose-bg-soft);}:is([prose=\\"\\"],.prose) td,:is([prose=\\"\\"],.prose) th{border:1px solid var(--un-prose-borders);padding:.625em 1em;}:is([prose=\\"\\"],.prose) abbr{cursor:help;}:is([prose=\\"\\"],.prose) kbd{color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}:is([prose=\\"\\"],.prose) details{margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}:is([prose=\\"\\"],.prose) summary{cursor:pointer;font-weight:600;} +.prose, +[prose=\\"\\"]{color:var(--un-prose-body);max-width:65ch;}" +`; + exports[`typography > prose-custom-css 1`] = ` -"/* layer: preflights */ -*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} -/* layer: typography */ +"/* layer: typography */ .prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}.prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}.prose :where(a code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);}.prose :where(p,ul,ol,pre):not(:where(.not-prose,.not-prose *)){margin:1em 0;line-height:1.75;}.prose :where(blockquote):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}.prose :where(h1):not(:where(.not-prose,.not-prose *)){margin:1rem 0;font-size:2.25em;}.prose :where(h2):not(:where(.not-prose,.not-prose *)){margin:1.75em 0 .5em;font-size:1.75em;}.prose :where(h3):not(:where(.not-prose,.not-prose *)){margin:1.5em 0 .5em;font-size:1.375em;}.prose :where(h4):not(:where(.not-prose,.not-prose *)){margin:1em 0;font-size:1.125em;}.prose :where(img,video):not(:where(.not-prose,.not-prose *)){max-width:100%;}.prose :where(figure,picture):not(:where(.not-prose,.not-prose *)){margin:1em 0;}.prose :where(figcaption):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-captions);font-size:.875em;}.prose :where(code):not(:where(.not-prose,.not-prose *)){color:#8b5cf6;font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}.prose :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::before,.prose :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::after{content:\\"\`\\";}.prose :where(pre):not(:where(.not-prose,.not-prose *)){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}.prose :where(pre,code):not(:where(.not-prose,.not-prose *)){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}.prose :where(pre code):not(:where(.not-prose,.not-prose *)){font-weight:inherit;}.prose :where(ol,ul):not(:where(.not-prose,.not-prose *)){padding-left:1.25em;}.prose :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}.prose :where(ol[type=\\"A\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}.prose :where(ol[type=\\"a\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}.prose :where(ol[type=\\"A\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}.prose :where(ol[type=\\"a\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}.prose :where(ol[type=\\"I\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}.prose :where(ol[type=\\"i\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}.prose :where(ol[type=\\"I\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}.prose :where(ol[type=\\"i\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}.prose :where(ol[type=\\"1\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}.prose :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc;}.prose :where(ol > li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(ul > li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(summary):not(:where(.not-prose,.not-prose *))::marker{color:var(--un-prose-lists);}.prose :where(hr):not(:where(.not-prose,.not-prose *)){margin:2em 0;border:1px solid var(--un-prose-hr);}.prose :where(table):not(:where(.not-prose,.not-prose *)){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}.prose :where(tr):not(:where(.not-prose,.not-prose *)):nth-child(2n){background:var(--un-prose-bg-soft);}.prose :where(td,th):not(:where(.not-prose,.not-prose *)){border:1px solid var(--un-prose-borders);padding:.625em 1em;}.prose :where(abbr):not(:where(.not-prose,.not-prose *)){cursor:help;}.prose :where(kbd):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}.prose :where(details):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}.prose :where(summary):not(:where(.not-prose,.not-prose *)){cursor:pointer;font-weight:600;}.prose :where(a):not(:where(.not-prose,.not-prose *)):hover{color:#f43f5e;}.prose :where(a):not(:where(.not-prose,.not-prose *)):visited{color:#14b8a6;} .prose{color:var(--un-prose-body);max-width:65ch;}" `; exports[`typography > prose-custom-prefix-attribute 1`] = ` -"/* layer: preflights */ -*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} -/* layer: typography */ +"/* layer: typography */ :is([u\\\\:prose=\\"\\"],.prose) :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}:is([u\\\\:prose=\\"\\"],.prose) :where(a):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}:is([u\\\\:prose=\\"\\"],.prose) :where(a code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);}:is([u\\\\:prose=\\"\\"],.prose) :where(p,ul,ol,pre):not(:where(.not-prose,.not-prose *)){margin:1em 0;line-height:1.75;}:is([u\\\\:prose=\\"\\"],.prose) :where(blockquote):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}:is([u\\\\:prose=\\"\\"],.prose) :where(h1):not(:where(.not-prose,.not-prose *)){margin:1rem 0;font-size:2.25em;}:is([u\\\\:prose=\\"\\"],.prose) :where(h2):not(:where(.not-prose,.not-prose *)){margin:1.75em 0 .5em;font-size:1.75em;}:is([u\\\\:prose=\\"\\"],.prose) :where(h3):not(:where(.not-prose,.not-prose *)){margin:1.5em 0 .5em;font-size:1.375em;}:is([u\\\\:prose=\\"\\"],.prose) :where(h4):not(:where(.not-prose,.not-prose *)){margin:1em 0;font-size:1.125em;}:is([u\\\\:prose=\\"\\"],.prose) :where(img,video):not(:where(.not-prose,.not-prose *)){max-width:100%;}:is([u\\\\:prose=\\"\\"],.prose) :where(figure,picture):not(:where(.not-prose,.not-prose *)){margin:1em 0;}:is([u\\\\:prose=\\"\\"],.prose) :where(figcaption):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-captions);font-size:.875em;}:is([u\\\\:prose=\\"\\"],.prose) :where(code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}:is([u\\\\:prose=\\"\\"],.prose) :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::before,:is([u\\\\:prose=\\"\\"],.prose) :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::after{content:\\"\`\\";}:is([u\\\\:prose=\\"\\"],.prose) :where(pre):not(:where(.not-prose,.not-prose *)){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}:is([u\\\\:prose=\\"\\"],.prose) :where(pre,code):not(:where(.not-prose,.not-prose *)){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}:is([u\\\\:prose=\\"\\"],.prose) :where(pre code):not(:where(.not-prose,.not-prose *)){font-weight:inherit;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol,ul):not(:where(.not-prose,.not-prose *)){padding-left:1.25em;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"A\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"a\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"A\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"a\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"I\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"i\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"I\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"i\\" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"1\\"]):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}:is([u\\\\:prose=\\"\\"],.prose) :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol > li):not(:where(.not-prose,.not-prose *))::marker,:is([u\\\\:prose=\\"\\"],.prose) :where(ul > li):not(:where(.not-prose,.not-prose *))::marker,:is([u\\\\:prose=\\"\\"],.prose) :where(summary):not(:where(.not-prose,.not-prose *))::marker{color:var(--un-prose-lists);}:is([u\\\\:prose=\\"\\"],.prose) :where(hr):not(:where(.not-prose,.not-prose *)){margin:2em 0;border:1px solid var(--un-prose-hr);}:is([u\\\\:prose=\\"\\"],.prose) :where(table):not(:where(.not-prose,.not-prose *)){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}:is([u\\\\:prose=\\"\\"],.prose) :where(tr):not(:where(.not-prose,.not-prose *)):nth-child(2n){background:var(--un-prose-bg-soft);}:is([u\\\\:prose=\\"\\"],.prose) :where(td,th):not(:where(.not-prose,.not-prose *)){border:1px solid var(--un-prose-borders);padding:.625em 1em;}:is([u\\\\:prose=\\"\\"],.prose) :where(abbr):not(:where(.not-prose,.not-prose *)){cursor:help;}:is([u\\\\:prose=\\"\\"],.prose) :where(kbd):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}:is([u\\\\:prose=\\"\\"],.prose) :where(details):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}:is([u\\\\:prose=\\"\\"],.prose) :where(summary):not(:where(.not-prose,.not-prose *)){cursor:pointer;font-weight:600;} .prose, [u\\\\:prose=\\"\\"]{color:var(--un-prose-body);max-width:65ch;}" `; -exports[`typography > prose-missing-color 1`] = ` -"/* layer: preflights */ -*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}" -`; +exports[`typography > prose-missing-color 1`] = `""`; diff --git a/test/preset-typography.test.ts b/test/preset-typography.test.ts index 365b59c4d6..6686fbdb05 100644 --- a/test/preset-typography.test.ts +++ b/test/preset-typography.test.ts @@ -76,6 +76,24 @@ const testConfigs = [ strict: false, }, }, + + { + name: 'prose-compatibility-no-colon-is', + input: '', + typographyOptions: { compatibility: { noColonIs: true } }, + }, + + { + name: 'prose-compatibility-no-colon-where', + input: '', + typographyOptions: { compatibility: { noColonWhere: true } }, + }, + + { + name: 'prose-compatibility-no-colon-not', + input: '', + typographyOptions: { compatibility: { noColonNot: true } }, + }, ] describe('typography', () => { @@ -84,7 +102,7 @@ describe('typography', () => { const generator = createGenerator({ presets: [ presetAttributify(tc.attributifyOptions), - presetUno(), + presetUno({ preflight: false }), presetTypography(tc.typographyOptions), ], })