@unocss/preset-typography 0.58.9 → 0.59.0-beta.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.
- package/package.json +7 -7
- package/dist/index.cjs +0 -296
- package/dist/index.d.cts +0 -66
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unocss/preset-typography",
|
|
3
|
-
"
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "0.59.0-beta.1",
|
|
4
5
|
"description": "Typography preset for UnoCSS",
|
|
5
6
|
"author": "Jeff Yang",
|
|
6
7
|
"license": "MIT",
|
|
@@ -20,20 +21,19 @@
|
|
|
20
21
|
"sideEffects": false,
|
|
21
22
|
"exports": {
|
|
22
23
|
".": {
|
|
23
|
-
"types": "./dist/index.d.
|
|
24
|
-
"
|
|
25
|
-
"require": "./dist/index.cjs"
|
|
24
|
+
"types": "./dist/index.d.mts",
|
|
25
|
+
"default": "./dist/index.mjs"
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
|
-
"main": "dist/index.
|
|
28
|
+
"main": "dist/index.mjs",
|
|
29
29
|
"module": "dist/index.mjs",
|
|
30
30
|
"types": "dist/index.d.ts",
|
|
31
31
|
"files": [
|
|
32
32
|
"dist"
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@unocss/core": "0.
|
|
36
|
-
"@unocss/preset-mini": "0.
|
|
35
|
+
"@unocss/core": "0.59.0-beta.1",
|
|
36
|
+
"@unocss/preset-mini": "0.59.0-beta.1"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "unbuild",
|
package/dist/index.cjs
DELETED
|
@@ -1,296 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const core = require('@unocss/core');
|
|
6
|
-
|
|
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
|
-
}
|
|
168
|
-
|
|
169
|
-
function getCSS(options) {
|
|
170
|
-
let css = "";
|
|
171
|
-
const { escapedSelector, selectorName, preflights, compatibility } = options;
|
|
172
|
-
const disableNotUtility = compatibility?.noColonNot || compatibility?.noColonWhere;
|
|
173
|
-
for (const selector in preflights) {
|
|
174
|
-
const cssDeclarationBlock = preflights[selector];
|
|
175
|
-
const notProseSelector = `:not(:where(.not-${selectorName},.not-${selectorName} *))`;
|
|
176
|
-
const pseudoCSSMatchArray = selector.split(",").map((s) => {
|
|
177
|
-
const match = s.match(/::?(?:[\(\)\:\-\d\w]+)$/g);
|
|
178
|
-
if (match) {
|
|
179
|
-
const matchStr = match[0];
|
|
180
|
-
s = s.replace(matchStr, "");
|
|
181
|
-
return escapedSelector.map((e) => disableNotUtility ? `${e} ${s}${matchStr}` : `${e} :where(${s})${notProseSelector}${matchStr}`).join(",");
|
|
182
|
-
}
|
|
183
|
-
return null;
|
|
184
|
-
}).filter((v) => v);
|
|
185
|
-
if (pseudoCSSMatchArray.length) {
|
|
186
|
-
css += pseudoCSSMatchArray.join(",");
|
|
187
|
-
} else {
|
|
188
|
-
css += escapedSelector.map((e) => disableNotUtility ? selector.split(",").map((s) => `${e} ${s}`).join(",") : `${e} :where(${selector})${notProseSelector}`).join(",");
|
|
189
|
-
}
|
|
190
|
-
css += "{";
|
|
191
|
-
for (const k in cssDeclarationBlock) {
|
|
192
|
-
const v = cssDeclarationBlock[k];
|
|
193
|
-
css += `${k}:${v};`;
|
|
194
|
-
}
|
|
195
|
-
css += "}";
|
|
196
|
-
}
|
|
197
|
-
return css;
|
|
198
|
-
}
|
|
199
|
-
function getPreflights(context, options) {
|
|
200
|
-
const { escapedSelectors, selectorName, cssExtend, compatibility } = options;
|
|
201
|
-
let escapedSelector = Array.from(escapedSelectors);
|
|
202
|
-
if (!escapedSelector[escapedSelector.length - 1].startsWith(".") && !compatibility?.noColonIs)
|
|
203
|
-
escapedSelector = [`:is(${escapedSelector[escapedSelector.length - 1]},.${selectorName})`];
|
|
204
|
-
if (cssExtend)
|
|
205
|
-
return getCSS({ escapedSelector, selectorName, preflights: core.mergeDeep(DEFAULT(context.theme), cssExtend), compatibility });
|
|
206
|
-
return getCSS({ escapedSelector, selectorName, preflights: DEFAULT(context.theme), compatibility });
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
const presetTypography = core.definePreset((options) => {
|
|
210
|
-
if (options?.className) {
|
|
211
|
-
console.warn('[unocss:preset-typography] "className" is deprecated. Use "selectorName" instead.');
|
|
212
|
-
}
|
|
213
|
-
const escapedSelectors = /* @__PURE__ */ new Set();
|
|
214
|
-
const selectorName = options?.selectorName || options?.className || "prose";
|
|
215
|
-
const selectorNameRE = new RegExp(`^${selectorName}$`);
|
|
216
|
-
const colorsRE = new RegExp(`^${selectorName}-([-\\w]+)$`);
|
|
217
|
-
const invertRE = new RegExp(`^${selectorName}-invert$`);
|
|
218
|
-
const compatibility = options?.compatibility;
|
|
219
|
-
return {
|
|
220
|
-
name: "@unocss/preset-typography",
|
|
221
|
-
enforce: "post",
|
|
222
|
-
layers: { typography: -20 },
|
|
223
|
-
rules: [
|
|
224
|
-
[
|
|
225
|
-
selectorNameRE,
|
|
226
|
-
(_, { rawSelector }) => {
|
|
227
|
-
escapedSelectors.add(core.toEscapedSelector(rawSelector));
|
|
228
|
-
return { "color": "var(--un-prose-body)", "max-width": "65ch" };
|
|
229
|
-
},
|
|
230
|
-
{ layer: "typography" }
|
|
231
|
-
],
|
|
232
|
-
[
|
|
233
|
-
colorsRE,
|
|
234
|
-
([, color], { theme }) => {
|
|
235
|
-
const baseColor = theme.colors?.[color];
|
|
236
|
-
if (baseColor == null)
|
|
237
|
-
return;
|
|
238
|
-
const colorObject = typeof baseColor === "object" ? baseColor : {};
|
|
239
|
-
return {
|
|
240
|
-
"--un-prose-body": colorObject[700] ?? baseColor,
|
|
241
|
-
"--un-prose-headings": colorObject[900] ?? baseColor,
|
|
242
|
-
"--un-prose-links": colorObject[900] ?? baseColor,
|
|
243
|
-
"--un-prose-lists": colorObject[400] ?? baseColor,
|
|
244
|
-
"--un-prose-hr": colorObject[200] ?? baseColor,
|
|
245
|
-
"--un-prose-captions": colorObject[500] ?? baseColor,
|
|
246
|
-
"--un-prose-code": colorObject[900] ?? baseColor,
|
|
247
|
-
"--un-prose-borders": colorObject[200] ?? baseColor,
|
|
248
|
-
"--un-prose-bg-soft": colorObject[100] ?? baseColor,
|
|
249
|
-
// invert colors (dark mode)
|
|
250
|
-
"--un-prose-invert-body": colorObject[200] ?? baseColor,
|
|
251
|
-
"--un-prose-invert-headings": colorObject[100] ?? baseColor,
|
|
252
|
-
"--un-prose-invert-links": colorObject[100] ?? baseColor,
|
|
253
|
-
"--un-prose-invert-lists": colorObject[500] ?? baseColor,
|
|
254
|
-
"--un-prose-invert-hr": colorObject[700] ?? baseColor,
|
|
255
|
-
"--un-prose-invert-captions": colorObject[400] ?? baseColor,
|
|
256
|
-
"--un-prose-invert-code": colorObject[100] ?? baseColor,
|
|
257
|
-
"--un-prose-invert-borders": colorObject[700] ?? baseColor,
|
|
258
|
-
"--un-prose-invert-bg-soft": colorObject[800] ?? baseColor
|
|
259
|
-
};
|
|
260
|
-
},
|
|
261
|
-
{ layer: "typography" }
|
|
262
|
-
],
|
|
263
|
-
[
|
|
264
|
-
invertRE,
|
|
265
|
-
() => {
|
|
266
|
-
return {
|
|
267
|
-
"--un-prose-body": "var(--un-prose-invert-body)",
|
|
268
|
-
"--un-prose-headings": "var(--un-prose-invert-headings)",
|
|
269
|
-
"--un-prose-links": "var(--un-prose-invert-links)",
|
|
270
|
-
"--un-prose-lists": "var(--un-prose-invert-lists)",
|
|
271
|
-
"--un-prose-hr": "var(--un-prose-invert-hr)",
|
|
272
|
-
"--un-prose-captions": "var(--un-prose-invert-captions)",
|
|
273
|
-
"--un-prose-code": "var(--un-prose-invert-code)",
|
|
274
|
-
"--un-prose-borders": "var(--un-prose-invert-borders)",
|
|
275
|
-
"--un-prose-bg-soft": "var(--un-prose-invert-bg-soft)"
|
|
276
|
-
};
|
|
277
|
-
},
|
|
278
|
-
{ layer: "typography" }
|
|
279
|
-
]
|
|
280
|
-
],
|
|
281
|
-
preflights: [
|
|
282
|
-
{
|
|
283
|
-
layer: "typography",
|
|
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
|
-
}
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
]
|
|
292
|
-
};
|
|
293
|
-
});
|
|
294
|
-
|
|
295
|
-
exports.default = presetTypography;
|
|
296
|
-
exports.presetTypography = presetTypography;
|
package/dist/index.d.cts
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import * as _unocss_core from '@unocss/core';
|
|
2
|
-
import { CSSObject } from '@unocss/core';
|
|
3
|
-
import { Theme } from '@unocss/preset-mini';
|
|
4
|
-
|
|
5
|
-
/** @public */
|
|
6
|
-
interface TypographyCompatibilityOptions {
|
|
7
|
-
noColonWhere?: boolean
|
|
8
|
-
noColonIs?: boolean
|
|
9
|
-
noColonNot?: boolean
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* @public
|
|
14
|
-
*/
|
|
15
|
-
interface TypographyOptions {
|
|
16
|
-
/**
|
|
17
|
-
* The selector name to use the typographic utilities.
|
|
18
|
-
* To undo the styles to the elements, use it like
|
|
19
|
-
* `not-${selectorName}` which is by default `not-prose`.
|
|
20
|
-
*
|
|
21
|
-
* Note: `not` utility is only available in class mode.
|
|
22
|
-
*
|
|
23
|
-
* @defaultValue `prose`
|
|
24
|
-
*/
|
|
25
|
-
selectorName?: string;
|
|
26
|
-
/**
|
|
27
|
-
* Extend or override CSS selectors with CSS declaration block.
|
|
28
|
-
*
|
|
29
|
-
* @defaultValue undefined
|
|
30
|
-
*/
|
|
31
|
-
cssExtend?: Record<string, CSSObject> | ((theme: Theme) => Record<string, CSSObject>);
|
|
32
|
-
/**
|
|
33
|
-
* Compatibility option. Notice that it will affect some features.
|
|
34
|
-
* For more instructions, see
|
|
35
|
-
* [README](https://github.com/unocss/unocss/tree/main/packages/preset-typography)
|
|
36
|
-
*
|
|
37
|
-
* @defaultValue undefined
|
|
38
|
-
*/
|
|
39
|
-
compatibility?: TypographyCompatibilityOptions;
|
|
40
|
-
/**
|
|
41
|
-
* @deprecated use `selectorName` instead. It will be removed in 1.0.
|
|
42
|
-
*/
|
|
43
|
-
className?: string;
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* UnoCSS Preset for Typography
|
|
47
|
-
*
|
|
48
|
-
* ```js
|
|
49
|
-
* // uno.config.ts
|
|
50
|
-
* import { presetAttributify, presetUno, defineConfig, presetTypography } from 'unocss'
|
|
51
|
-
*
|
|
52
|
-
* export default defineConfig({
|
|
53
|
-
* presets: [
|
|
54
|
-
* presetAttributify(), // required if using attributify mode
|
|
55
|
-
* presetUno(), // required
|
|
56
|
-
* presetTypography()
|
|
57
|
-
* ]
|
|
58
|
-
* })
|
|
59
|
-
* ```
|
|
60
|
-
*
|
|
61
|
-
* @returns typography preset
|
|
62
|
-
* @public
|
|
63
|
-
*/
|
|
64
|
-
declare const presetTypography: _unocss_core.PresetFactory<Theme, TypographyOptions>;
|
|
65
|
-
|
|
66
|
-
export { type TypographyOptions, presetTypography as default, presetTypography };
|