@unocss/preset-typography 0.55.7 → 0.56.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +172 -170
  2. package/dist/index.d.cts +4 -3
  3. package/dist/index.d.mts +4 -3
  4. package/dist/index.d.ts +4 -3
  5. package/dist/index.mjs +173 -171
  6. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -4,165 +4,167 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const core = require('@unocss/core');
6
6
 
7
- const DEFAULT = {
8
- "h1,h2,h3,h4,h5,h6": {
9
- "color": "var(--un-prose-headings)",
10
- "font-weight": "600",
11
- "line-height": 1.25
12
- },
13
- "a": {
14
- "color": "var(--un-prose-links)",
15
- "text-decoration": "underline",
16
- "font-weight": "500"
17
- },
18
- "a code": {
19
- color: "var(--un-prose-links)"
20
- },
21
- "p,ul,ol,pre": {
22
- "margin": "1em 0",
23
- "line-height": 1.75
24
- },
25
- "blockquote": {
26
- "margin": "1em 0",
27
- "padding-left": "1em",
28
- "font-style": "italic",
29
- "border-left": ".25em solid var(--un-prose-borders)"
30
- },
31
- // taking 16px as a base, we scale h1, h2, h3, and h4 like
32
- // 16 (base) > 18 (h4) > 22 (h3) > 28 (h2) > 36 (h1)
33
- "h1": {
34
- "margin": "1rem 0",
35
- // h1 is always at the top of the page, so only margin 1 * root font size
36
- "font-size": "2.25em"
37
- },
38
- "h2": {
39
- "margin": "1.75em 0 .5em",
40
- "font-size": "1.75em"
41
- },
42
- "h3": {
43
- "margin": "1.5em 0 .5em",
44
- "font-size": "1.375em"
45
- },
46
- "h4": {
47
- "margin": "1em 0",
48
- "font-size": "1.125em"
49
- },
50
- "img,video": {
51
- "max-width": "100%"
52
- },
53
- "figure,picture": {
54
- margin: "1em 0"
55
- },
56
- "figcaption": {
57
- "color": "var(--un-prose-captions)",
58
- "font-size": ".875em"
59
- },
60
- "code": {
61
- "color": "var(--un-prose-code)",
62
- "font-size": ".875em",
63
- "font-weight": 600,
64
- "font-family": "var(--un-prose-font-mono)"
65
- },
66
- ":not(pre) > code::before,:not(pre) > code::after": {
67
- content: '"`"'
68
- },
69
- "pre": {
70
- "padding": "1.25rem 1.5rem",
71
- "overflow-x": "auto",
72
- "border-radius": ".375rem"
73
- },
74
- "pre,code": {
75
- "white-space": "pre",
76
- "word-spacing": "normal",
77
- "word-break": "normal",
78
- "word-wrap": "normal",
79
- "-moz-tab-size": 4,
80
- "-o-tab-size": 4,
81
- "tab-size": 4,
82
- "-webkit-hyphens": "none",
83
- "-moz-hyphens": "none",
84
- "hyphens": "none",
85
- "background": "transparent"
86
- },
87
- "pre code": {
88
- "font-weight": "inherit"
89
- },
90
- "ol,ul": {
91
- "padding-left": "1.25em"
92
- },
93
- "ol": {
94
- "list-style-type": "decimal"
95
- },
96
- 'ol[type="A"]': {
97
- "list-style-type": "upper-alpha"
98
- },
99
- 'ol[type="a"]': {
100
- "list-style-type": "lower-alpha"
101
- },
102
- 'ol[type="A" s]': {
103
- "list-style-type": "upper-alpha"
104
- },
105
- 'ol[type="a" s]': {
106
- "list-style-type": "lower-alpha"
107
- },
108
- 'ol[type="I"]': {
109
- "list-style-type": "upper-roman"
110
- },
111
- 'ol[type="i"]': {
112
- "list-style-type": "lower-roman"
113
- },
114
- 'ol[type="I" s]': {
115
- "list-style-type": "upper-roman"
116
- },
117
- 'ol[type="i" s]': {
118
- "list-style-type": "lower-roman"
119
- },
120
- 'ol[type="1"]': {
121
- "list-style-type": "decimal"
122
- },
123
- "ul": {
124
- "list-style-type": "disc"
125
- },
126
- "ol > li::marker,ul > li::marker,summary::marker": {
127
- color: "var(--un-prose-lists)"
128
- },
129
- "hr": {
130
- margin: "2em 0",
131
- border: "1px solid var(--un-prose-hr)"
132
- },
133
- "table": {
134
- "display": "block",
135
- "margin": "1em 0",
136
- "border-collapse": "collapse",
137
- "overflow-x": "auto"
138
- },
139
- "tr:nth-child(2n)": {
140
- background: "var(--un-prose-bg-soft)"
141
- },
142
- "td,th": {
143
- border: "1px solid var(--un-prose-borders)",
144
- padding: ".625em 1em"
145
- },
146
- "abbr": {
147
- cursor: "help"
148
- },
149
- "kbd": {
150
- "color": "var(--un-prose-code)",
151
- "border": "1px solid",
152
- "padding": ".25rem .5rem",
153
- "font-size": ".875em",
154
- "border-radius": ".25rem"
155
- },
156
- "details": {
157
- margin: "1em 0",
158
- padding: "1.25rem 1.5rem",
159
- background: "var(--un-prose-bg-soft)"
160
- },
161
- "summary": {
162
- "cursor": "pointer",
163
- "font-weight": "600"
164
- }
165
- };
7
+ function DEFAULT(theme) {
8
+ return {
9
+ "h1,h2,h3,h4,h5,h6": {
10
+ "color": "var(--un-prose-headings)",
11
+ "font-weight": "600",
12
+ "line-height": 1.25
13
+ },
14
+ "a": {
15
+ "color": "var(--un-prose-links)",
16
+ "text-decoration": "underline",
17
+ "font-weight": "500"
18
+ },
19
+ "a code": {
20
+ color: "var(--un-prose-links)"
21
+ },
22
+ "p,ul,ol,pre": {
23
+ "margin": "1em 0",
24
+ "line-height": 1.75
25
+ },
26
+ "blockquote": {
27
+ "margin": "1em 0",
28
+ "padding-left": "1em",
29
+ "font-style": "italic",
30
+ "border-left": ".25em solid var(--un-prose-borders)"
31
+ },
32
+ // taking 16px as a base, we scale h1, h2, h3, and h4 like
33
+ // 16 (base) > 18 (h4) > 22 (h3) > 28 (h2) > 36 (h1)
34
+ "h1": {
35
+ "margin": "1rem 0",
36
+ // h1 is always at the top of the page, so only margin 1 * root font size
37
+ "font-size": "2.25em"
38
+ },
39
+ "h2": {
40
+ "margin": "1.75em 0 .5em",
41
+ "font-size": "1.75em"
42
+ },
43
+ "h3": {
44
+ "margin": "1.5em 0 .5em",
45
+ "font-size": "1.375em"
46
+ },
47
+ "h4": {
48
+ "margin": "1em 0",
49
+ "font-size": "1.125em"
50
+ },
51
+ "img,video": {
52
+ "max-width": "100%"
53
+ },
54
+ "figure,picture": {
55
+ margin: "1em 0"
56
+ },
57
+ "figcaption": {
58
+ "color": "var(--un-prose-captions)",
59
+ "font-size": ".875em"
60
+ },
61
+ "code": {
62
+ "color": "var(--un-prose-code)",
63
+ "font-size": ".875em",
64
+ "font-weight": 600,
65
+ "font-family": theme.fontFamily?.mono
66
+ },
67
+ ":not(pre) > code::before,:not(pre) > code::after": {
68
+ content: '"`"'
69
+ },
70
+ "pre": {
71
+ "padding": "1.25rem 1.5rem",
72
+ "overflow-x": "auto",
73
+ "border-radius": ".375rem"
74
+ },
75
+ "pre,code": {
76
+ "white-space": "pre",
77
+ "word-spacing": "normal",
78
+ "word-break": "normal",
79
+ "word-wrap": "normal",
80
+ "-moz-tab-size": 4,
81
+ "-o-tab-size": 4,
82
+ "tab-size": 4,
83
+ "-webkit-hyphens": "none",
84
+ "-moz-hyphens": "none",
85
+ "hyphens": "none",
86
+ "background": "transparent"
87
+ },
88
+ "pre code": {
89
+ "font-weight": "inherit"
90
+ },
91
+ "ol,ul": {
92
+ "padding-left": "1.25em"
93
+ },
94
+ "ol": {
95
+ "list-style-type": "decimal"
96
+ },
97
+ 'ol[type="A"]': {
98
+ "list-style-type": "upper-alpha"
99
+ },
100
+ 'ol[type="a"]': {
101
+ "list-style-type": "lower-alpha"
102
+ },
103
+ 'ol[type="A" s]': {
104
+ "list-style-type": "upper-alpha"
105
+ },
106
+ 'ol[type="a" s]': {
107
+ "list-style-type": "lower-alpha"
108
+ },
109
+ 'ol[type="I"]': {
110
+ "list-style-type": "upper-roman"
111
+ },
112
+ 'ol[type="i"]': {
113
+ "list-style-type": "lower-roman"
114
+ },
115
+ 'ol[type="I" s]': {
116
+ "list-style-type": "upper-roman"
117
+ },
118
+ 'ol[type="i" s]': {
119
+ "list-style-type": "lower-roman"
120
+ },
121
+ 'ol[type="1"]': {
122
+ "list-style-type": "decimal"
123
+ },
124
+ "ul": {
125
+ "list-style-type": "disc"
126
+ },
127
+ "ol > li::marker,ul > li::marker,summary::marker": {
128
+ color: "var(--un-prose-lists)"
129
+ },
130
+ "hr": {
131
+ margin: "2em 0",
132
+ border: "1px solid var(--un-prose-hr)"
133
+ },
134
+ "table": {
135
+ "display": "block",
136
+ "margin": "1em 0",
137
+ "border-collapse": "collapse",
138
+ "overflow-x": "auto"
139
+ },
140
+ "tr:nth-child(2n)": {
141
+ background: "var(--un-prose-bg-soft)"
142
+ },
143
+ "td,th": {
144
+ border: "1px solid var(--un-prose-borders)",
145
+ padding: ".625em 1em"
146
+ },
147
+ "abbr": {
148
+ cursor: "help"
149
+ },
150
+ "kbd": {
151
+ "color": "var(--un-prose-code)",
152
+ "border": "1px solid",
153
+ "padding": ".25rem .5rem",
154
+ "font-size": ".875em",
155
+ "border-radius": ".25rem"
156
+ },
157
+ "details": {
158
+ margin: "1em 0",
159
+ padding: "1.25rem 1.5rem",
160
+ background: "var(--un-prose-bg-soft)"
161
+ },
162
+ "summary": {
163
+ "cursor": "pointer",
164
+ "font-weight": "600"
165
+ }
166
+ };
167
+ }
166
168
 
167
169
  function getCSS(options) {
168
170
  let css = "";
@@ -198,17 +200,17 @@ function getCSS(options) {
198
200
  }
199
201
  return css;
200
202
  }
201
- function getPreflights(options) {
203
+ function getPreflights(context, options) {
202
204
  const { escapedSelectors, selectorName, cssExtend, compatibility } = options;
203
205
  let escapedSelector = Array.from(escapedSelectors);
204
206
  if (!escapedSelector[escapedSelector.length - 1].startsWith(".") && !compatibility?.noColonIs)
205
207
  escapedSelector = [`:is(${escapedSelector[escapedSelector.length - 1]},.${selectorName})`];
206
208
  if (cssExtend)
207
- return getCSS({ escapedSelector, selectorName, preflights: core.mergeDeep(DEFAULT, cssExtend), compatibility });
208
- return getCSS({ escapedSelector, selectorName, preflights: DEFAULT, compatibility });
209
+ return getCSS({ escapedSelector, selectorName, preflights: core.mergeDeep(DEFAULT(context.theme), cssExtend), compatibility });
210
+ return getCSS({ escapedSelector, selectorName, preflights: DEFAULT(context.theme), compatibility });
209
211
  }
210
212
 
211
- function presetTypography(options) {
213
+ const presetTypography = core.definePreset((options) => {
212
214
  if (options?.className) {
213
215
  console.warn('[unocss:preset-typography] "className" is deprecated. Use "selectorName" instead.');
214
216
  }
@@ -217,7 +219,6 @@ function presetTypography(options) {
217
219
  const selectorNameRE = new RegExp(`^${selectorName}$`);
218
220
  const colorsRE = new RegExp(`^${selectorName}-([-\\w]+)$`);
219
221
  const invertRE = new RegExp(`^${selectorName}-invert$`);
220
- const cssExtend = options?.cssExtend;
221
222
  const compatibility = options?.compatibility;
222
223
  return {
223
224
  name: "@unocss/preset-typography",
@@ -258,8 +259,7 @@ function presetTypography(options) {
258
259
  "--un-prose-invert-captions": colorObject[400] ?? baseColor,
259
260
  "--un-prose-invert-code": colorObject[100] ?? baseColor,
260
261
  "--un-prose-invert-borders": colorObject[700] ?? baseColor,
261
- "--un-prose-invert-bg-soft": colorObject[800] ?? baseColor,
262
- "--un-prose-font-mono": theme.fontFamily?.mono
262
+ "--un-prose-invert-bg-soft": colorObject[800] ?? baseColor
263
263
  };
264
264
  },
265
265
  { layer: "typography" }
@@ -285,14 +285,16 @@ function presetTypography(options) {
285
285
  preflights: [
286
286
  {
287
287
  layer: "typography",
288
- getCSS: () => {
289
- if (escapedSelectors.size > 0)
290
- return getPreflights({ escapedSelectors, selectorName, cssExtend, compatibility });
288
+ getCSS: (context) => {
289
+ if (escapedSelectors.size > 0) {
290
+ const cssExtend = typeof options?.cssExtend === "function" ? options.cssExtend(context.theme) : options?.cssExtend;
291
+ return getPreflights(context, { escapedSelectors, selectorName, cssExtend, compatibility });
292
+ }
291
293
  }
292
294
  }
293
295
  ]
294
296
  };
295
- }
297
+ });
296
298
 
297
299
  exports.default = presetTypography;
298
300
  exports.presetTypography = presetTypography;
package/dist/index.d.cts CHANGED
@@ -1,4 +1,5 @@
1
- import { CSSObject, Preset } from '@unocss/core';
1
+ import * as _unocss_core from '@unocss/core';
2
+ import { CSSObject } from '@unocss/core';
2
3
  import { Theme } from '@unocss/preset-mini';
3
4
 
4
5
  /** @public */
@@ -27,7 +28,7 @@ interface TypographyOptions {
27
28
  *
28
29
  * @defaultValue undefined
29
30
  */
30
- cssExtend?: Record<string, CSSObject>;
31
+ cssExtend?: Record<string, CSSObject> | ((theme: Theme) => Record<string, CSSObject>);
31
32
  /**
32
33
  * Compatibility option. Notice that it will affect some features.
33
34
  * For more instructions, see
@@ -60,6 +61,6 @@ interface TypographyOptions {
60
61
  * @returns typography preset
61
62
  * @public
62
63
  */
63
- declare function presetTypography(options?: TypographyOptions): Preset<Theme>;
64
+ declare const presetTypography: _unocss_core.PresetFactory<Theme, TypographyOptions>;
64
65
 
65
66
  export { type TypographyOptions, presetTypography as default, presetTypography };
package/dist/index.d.mts CHANGED
@@ -1,4 +1,5 @@
1
- import { CSSObject, Preset } from '@unocss/core';
1
+ import * as _unocss_core from '@unocss/core';
2
+ import { CSSObject } from '@unocss/core';
2
3
  import { Theme } from '@unocss/preset-mini';
3
4
 
4
5
  /** @public */
@@ -27,7 +28,7 @@ interface TypographyOptions {
27
28
  *
28
29
  * @defaultValue undefined
29
30
  */
30
- cssExtend?: Record<string, CSSObject>;
31
+ cssExtend?: Record<string, CSSObject> | ((theme: Theme) => Record<string, CSSObject>);
31
32
  /**
32
33
  * Compatibility option. Notice that it will affect some features.
33
34
  * For more instructions, see
@@ -60,6 +61,6 @@ interface TypographyOptions {
60
61
  * @returns typography preset
61
62
  * @public
62
63
  */
63
- declare function presetTypography(options?: TypographyOptions): Preset<Theme>;
64
+ declare const presetTypography: _unocss_core.PresetFactory<Theme, TypographyOptions>;
64
65
 
65
66
  export { type TypographyOptions, presetTypography as default, presetTypography };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { CSSObject, Preset } from '@unocss/core';
1
+ import * as _unocss_core from '@unocss/core';
2
+ import { CSSObject } from '@unocss/core';
2
3
  import { Theme } from '@unocss/preset-mini';
3
4
 
4
5
  /** @public */
@@ -27,7 +28,7 @@ interface TypographyOptions {
27
28
  *
28
29
  * @defaultValue undefined
29
30
  */
30
- cssExtend?: Record<string, CSSObject>;
31
+ cssExtend?: Record<string, CSSObject> | ((theme: Theme) => Record<string, CSSObject>);
31
32
  /**
32
33
  * Compatibility option. Notice that it will affect some features.
33
34
  * For more instructions, see
@@ -60,6 +61,6 @@ interface TypographyOptions {
60
61
  * @returns typography preset
61
62
  * @public
62
63
  */
63
- declare function presetTypography(options?: TypographyOptions): Preset<Theme>;
64
+ declare const presetTypography: _unocss_core.PresetFactory<Theme, TypographyOptions>;
64
65
 
65
66
  export { type TypographyOptions, presetTypography as default, presetTypography };
package/dist/index.mjs CHANGED
@@ -1,164 +1,166 @@
1
- import { mergeDeep, toEscapedSelector } from '@unocss/core';
1
+ import { mergeDeep, definePreset, toEscapedSelector } from '@unocss/core';
2
2
 
3
- const DEFAULT = {
4
- "h1,h2,h3,h4,h5,h6": {
5
- "color": "var(--un-prose-headings)",
6
- "font-weight": "600",
7
- "line-height": 1.25
8
- },
9
- "a": {
10
- "color": "var(--un-prose-links)",
11
- "text-decoration": "underline",
12
- "font-weight": "500"
13
- },
14
- "a code": {
15
- color: "var(--un-prose-links)"
16
- },
17
- "p,ul,ol,pre": {
18
- "margin": "1em 0",
19
- "line-height": 1.75
20
- },
21
- "blockquote": {
22
- "margin": "1em 0",
23
- "padding-left": "1em",
24
- "font-style": "italic",
25
- "border-left": ".25em solid var(--un-prose-borders)"
26
- },
27
- // taking 16px as a base, we scale h1, h2, h3, and h4 like
28
- // 16 (base) > 18 (h4) > 22 (h3) > 28 (h2) > 36 (h1)
29
- "h1": {
30
- "margin": "1rem 0",
31
- // h1 is always at the top of the page, so only margin 1 * root font size
32
- "font-size": "2.25em"
33
- },
34
- "h2": {
35
- "margin": "1.75em 0 .5em",
36
- "font-size": "1.75em"
37
- },
38
- "h3": {
39
- "margin": "1.5em 0 .5em",
40
- "font-size": "1.375em"
41
- },
42
- "h4": {
43
- "margin": "1em 0",
44
- "font-size": "1.125em"
45
- },
46
- "img,video": {
47
- "max-width": "100%"
48
- },
49
- "figure,picture": {
50
- margin: "1em 0"
51
- },
52
- "figcaption": {
53
- "color": "var(--un-prose-captions)",
54
- "font-size": ".875em"
55
- },
56
- "code": {
57
- "color": "var(--un-prose-code)",
58
- "font-size": ".875em",
59
- "font-weight": 600,
60
- "font-family": "var(--un-prose-font-mono)"
61
- },
62
- ":not(pre) > code::before,:not(pre) > code::after": {
63
- content: '"`"'
64
- },
65
- "pre": {
66
- "padding": "1.25rem 1.5rem",
67
- "overflow-x": "auto",
68
- "border-radius": ".375rem"
69
- },
70
- "pre,code": {
71
- "white-space": "pre",
72
- "word-spacing": "normal",
73
- "word-break": "normal",
74
- "word-wrap": "normal",
75
- "-moz-tab-size": 4,
76
- "-o-tab-size": 4,
77
- "tab-size": 4,
78
- "-webkit-hyphens": "none",
79
- "-moz-hyphens": "none",
80
- "hyphens": "none",
81
- "background": "transparent"
82
- },
83
- "pre code": {
84
- "font-weight": "inherit"
85
- },
86
- "ol,ul": {
87
- "padding-left": "1.25em"
88
- },
89
- "ol": {
90
- "list-style-type": "decimal"
91
- },
92
- 'ol[type="A"]': {
93
- "list-style-type": "upper-alpha"
94
- },
95
- 'ol[type="a"]': {
96
- "list-style-type": "lower-alpha"
97
- },
98
- 'ol[type="A" s]': {
99
- "list-style-type": "upper-alpha"
100
- },
101
- 'ol[type="a" s]': {
102
- "list-style-type": "lower-alpha"
103
- },
104
- 'ol[type="I"]': {
105
- "list-style-type": "upper-roman"
106
- },
107
- 'ol[type="i"]': {
108
- "list-style-type": "lower-roman"
109
- },
110
- 'ol[type="I" s]': {
111
- "list-style-type": "upper-roman"
112
- },
113
- 'ol[type="i" s]': {
114
- "list-style-type": "lower-roman"
115
- },
116
- 'ol[type="1"]': {
117
- "list-style-type": "decimal"
118
- },
119
- "ul": {
120
- "list-style-type": "disc"
121
- },
122
- "ol > li::marker,ul > li::marker,summary::marker": {
123
- color: "var(--un-prose-lists)"
124
- },
125
- "hr": {
126
- margin: "2em 0",
127
- border: "1px solid var(--un-prose-hr)"
128
- },
129
- "table": {
130
- "display": "block",
131
- "margin": "1em 0",
132
- "border-collapse": "collapse",
133
- "overflow-x": "auto"
134
- },
135
- "tr:nth-child(2n)": {
136
- background: "var(--un-prose-bg-soft)"
137
- },
138
- "td,th": {
139
- border: "1px solid var(--un-prose-borders)",
140
- padding: ".625em 1em"
141
- },
142
- "abbr": {
143
- cursor: "help"
144
- },
145
- "kbd": {
146
- "color": "var(--un-prose-code)",
147
- "border": "1px solid",
148
- "padding": ".25rem .5rem",
149
- "font-size": ".875em",
150
- "border-radius": ".25rem"
151
- },
152
- "details": {
153
- margin: "1em 0",
154
- padding: "1.25rem 1.5rem",
155
- background: "var(--un-prose-bg-soft)"
156
- },
157
- "summary": {
158
- "cursor": "pointer",
159
- "font-weight": "600"
160
- }
161
- };
3
+ function DEFAULT(theme) {
4
+ return {
5
+ "h1,h2,h3,h4,h5,h6": {
6
+ "color": "var(--un-prose-headings)",
7
+ "font-weight": "600",
8
+ "line-height": 1.25
9
+ },
10
+ "a": {
11
+ "color": "var(--un-prose-links)",
12
+ "text-decoration": "underline",
13
+ "font-weight": "500"
14
+ },
15
+ "a code": {
16
+ color: "var(--un-prose-links)"
17
+ },
18
+ "p,ul,ol,pre": {
19
+ "margin": "1em 0",
20
+ "line-height": 1.75
21
+ },
22
+ "blockquote": {
23
+ "margin": "1em 0",
24
+ "padding-left": "1em",
25
+ "font-style": "italic",
26
+ "border-left": ".25em solid var(--un-prose-borders)"
27
+ },
28
+ // taking 16px as a base, we scale h1, h2, h3, and h4 like
29
+ // 16 (base) > 18 (h4) > 22 (h3) > 28 (h2) > 36 (h1)
30
+ "h1": {
31
+ "margin": "1rem 0",
32
+ // h1 is always at the top of the page, so only margin 1 * root font size
33
+ "font-size": "2.25em"
34
+ },
35
+ "h2": {
36
+ "margin": "1.75em 0 .5em",
37
+ "font-size": "1.75em"
38
+ },
39
+ "h3": {
40
+ "margin": "1.5em 0 .5em",
41
+ "font-size": "1.375em"
42
+ },
43
+ "h4": {
44
+ "margin": "1em 0",
45
+ "font-size": "1.125em"
46
+ },
47
+ "img,video": {
48
+ "max-width": "100%"
49
+ },
50
+ "figure,picture": {
51
+ margin: "1em 0"
52
+ },
53
+ "figcaption": {
54
+ "color": "var(--un-prose-captions)",
55
+ "font-size": ".875em"
56
+ },
57
+ "code": {
58
+ "color": "var(--un-prose-code)",
59
+ "font-size": ".875em",
60
+ "font-weight": 600,
61
+ "font-family": theme.fontFamily?.mono
62
+ },
63
+ ":not(pre) > code::before,:not(pre) > code::after": {
64
+ content: '"`"'
65
+ },
66
+ "pre": {
67
+ "padding": "1.25rem 1.5rem",
68
+ "overflow-x": "auto",
69
+ "border-radius": ".375rem"
70
+ },
71
+ "pre,code": {
72
+ "white-space": "pre",
73
+ "word-spacing": "normal",
74
+ "word-break": "normal",
75
+ "word-wrap": "normal",
76
+ "-moz-tab-size": 4,
77
+ "-o-tab-size": 4,
78
+ "tab-size": 4,
79
+ "-webkit-hyphens": "none",
80
+ "-moz-hyphens": "none",
81
+ "hyphens": "none",
82
+ "background": "transparent"
83
+ },
84
+ "pre code": {
85
+ "font-weight": "inherit"
86
+ },
87
+ "ol,ul": {
88
+ "padding-left": "1.25em"
89
+ },
90
+ "ol": {
91
+ "list-style-type": "decimal"
92
+ },
93
+ 'ol[type="A"]': {
94
+ "list-style-type": "upper-alpha"
95
+ },
96
+ 'ol[type="a"]': {
97
+ "list-style-type": "lower-alpha"
98
+ },
99
+ 'ol[type="A" s]': {
100
+ "list-style-type": "upper-alpha"
101
+ },
102
+ 'ol[type="a" s]': {
103
+ "list-style-type": "lower-alpha"
104
+ },
105
+ 'ol[type="I"]': {
106
+ "list-style-type": "upper-roman"
107
+ },
108
+ 'ol[type="i"]': {
109
+ "list-style-type": "lower-roman"
110
+ },
111
+ 'ol[type="I" s]': {
112
+ "list-style-type": "upper-roman"
113
+ },
114
+ 'ol[type="i" s]': {
115
+ "list-style-type": "lower-roman"
116
+ },
117
+ 'ol[type="1"]': {
118
+ "list-style-type": "decimal"
119
+ },
120
+ "ul": {
121
+ "list-style-type": "disc"
122
+ },
123
+ "ol > li::marker,ul > li::marker,summary::marker": {
124
+ color: "var(--un-prose-lists)"
125
+ },
126
+ "hr": {
127
+ margin: "2em 0",
128
+ border: "1px solid var(--un-prose-hr)"
129
+ },
130
+ "table": {
131
+ "display": "block",
132
+ "margin": "1em 0",
133
+ "border-collapse": "collapse",
134
+ "overflow-x": "auto"
135
+ },
136
+ "tr:nth-child(2n)": {
137
+ background: "var(--un-prose-bg-soft)"
138
+ },
139
+ "td,th": {
140
+ border: "1px solid var(--un-prose-borders)",
141
+ padding: ".625em 1em"
142
+ },
143
+ "abbr": {
144
+ cursor: "help"
145
+ },
146
+ "kbd": {
147
+ "color": "var(--un-prose-code)",
148
+ "border": "1px solid",
149
+ "padding": ".25rem .5rem",
150
+ "font-size": ".875em",
151
+ "border-radius": ".25rem"
152
+ },
153
+ "details": {
154
+ margin: "1em 0",
155
+ padding: "1.25rem 1.5rem",
156
+ background: "var(--un-prose-bg-soft)"
157
+ },
158
+ "summary": {
159
+ "cursor": "pointer",
160
+ "font-weight": "600"
161
+ }
162
+ };
163
+ }
162
164
 
163
165
  function getCSS(options) {
164
166
  let css = "";
@@ -194,17 +196,17 @@ function getCSS(options) {
194
196
  }
195
197
  return css;
196
198
  }
197
- function getPreflights(options) {
199
+ function getPreflights(context, options) {
198
200
  const { escapedSelectors, selectorName, cssExtend, compatibility } = options;
199
201
  let escapedSelector = Array.from(escapedSelectors);
200
202
  if (!escapedSelector[escapedSelector.length - 1].startsWith(".") && !compatibility?.noColonIs)
201
203
  escapedSelector = [`:is(${escapedSelector[escapedSelector.length - 1]},.${selectorName})`];
202
204
  if (cssExtend)
203
- return getCSS({ escapedSelector, selectorName, preflights: mergeDeep(DEFAULT, cssExtend), compatibility });
204
- return getCSS({ escapedSelector, selectorName, preflights: DEFAULT, compatibility });
205
+ return getCSS({ escapedSelector, selectorName, preflights: mergeDeep(DEFAULT(context.theme), cssExtend), compatibility });
206
+ return getCSS({ escapedSelector, selectorName, preflights: DEFAULT(context.theme), compatibility });
205
207
  }
206
208
 
207
- function presetTypography(options) {
209
+ const presetTypography = definePreset((options) => {
208
210
  if (options?.className) {
209
211
  console.warn('[unocss:preset-typography] "className" is deprecated. Use "selectorName" instead.');
210
212
  }
@@ -213,7 +215,6 @@ function presetTypography(options) {
213
215
  const selectorNameRE = new RegExp(`^${selectorName}$`);
214
216
  const colorsRE = new RegExp(`^${selectorName}-([-\\w]+)$`);
215
217
  const invertRE = new RegExp(`^${selectorName}-invert$`);
216
- const cssExtend = options?.cssExtend;
217
218
  const compatibility = options?.compatibility;
218
219
  return {
219
220
  name: "@unocss/preset-typography",
@@ -254,8 +255,7 @@ function presetTypography(options) {
254
255
  "--un-prose-invert-captions": colorObject[400] ?? baseColor,
255
256
  "--un-prose-invert-code": colorObject[100] ?? baseColor,
256
257
  "--un-prose-invert-borders": colorObject[700] ?? baseColor,
257
- "--un-prose-invert-bg-soft": colorObject[800] ?? baseColor,
258
- "--un-prose-font-mono": theme.fontFamily?.mono
258
+ "--un-prose-invert-bg-soft": colorObject[800] ?? baseColor
259
259
  };
260
260
  },
261
261
  { layer: "typography" }
@@ -281,13 +281,15 @@ function presetTypography(options) {
281
281
  preflights: [
282
282
  {
283
283
  layer: "typography",
284
- getCSS: () => {
285
- if (escapedSelectors.size > 0)
286
- return getPreflights({ escapedSelectors, selectorName, cssExtend, compatibility });
284
+ getCSS: (context) => {
285
+ if (escapedSelectors.size > 0) {
286
+ const cssExtend = typeof options?.cssExtend === "function" ? options.cssExtend(context.theme) : options?.cssExtend;
287
+ return getPreflights(context, { escapedSelectors, selectorName, cssExtend, compatibility });
288
+ }
287
289
  }
288
290
  }
289
291
  ]
290
292
  };
291
- }
293
+ });
292
294
 
293
295
  export { presetTypography as default, presetTypography };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unocss/preset-typography",
3
- "version": "0.55.7",
3
+ "version": "0.56.1",
4
4
  "description": "Typography preset for UnoCSS",
5
5
  "author": "Jeff Yang",
6
6
  "license": "MIT",
@@ -32,8 +32,8 @@
32
32
  "dist"
33
33
  ],
34
34
  "dependencies": {
35
- "@unocss/core": "0.55.7",
36
- "@unocss/preset-mini": "0.55.7"
35
+ "@unocss/core": "0.56.1",
36
+ "@unocss/preset-mini": "0.56.1"
37
37
  },
38
38
  "scripts": {
39
39
  "build": "unbuild",