@unocss/preset-typography 0.24.0
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/LICENSE +21 -0
- package/README.md +211 -0
- package/dist/index.cjs +244 -0
- package/dist/index.d.ts +46 -0
- package/dist/index.mjs +240 -0
- package/package.json +41 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Anthony Fu <https://github.com/antfu>
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
# @unocss/preset-typography
|
|
2
|
+
|
|
3
|
+
> Typography Preset for UnoCSS
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @unocss/preset-typography -D
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
// unocss.config.js
|
|
15
|
+
import { presetAttributify, presetUno, defineConfig } from 'unocss'
|
|
16
|
+
import { presetTypography } from '@unocss/preset-typography'
|
|
17
|
+
|
|
18
|
+
export default defineConfig({
|
|
19
|
+
presets: [
|
|
20
|
+
presetAttributify(), // required if using attributify mode
|
|
21
|
+
presetUno(), // required
|
|
22
|
+
presetTypography(),
|
|
23
|
+
],
|
|
24
|
+
})
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
<table>
|
|
28
|
+
<thead>
|
|
29
|
+
<tr style="text-align: center">
|
|
30
|
+
<th>With classes</th>
|
|
31
|
+
<th>With attributes</th>
|
|
32
|
+
</tr>
|
|
33
|
+
</thead>
|
|
34
|
+
<tbody>
|
|
35
|
+
<tr>
|
|
36
|
+
<td>
|
|
37
|
+
|
|
38
|
+
<!-- prettier-ignore -->
|
|
39
|
+
```html
|
|
40
|
+
<article class="text-base prose prose-truegray xl:text-xl">
|
|
41
|
+
{{ markdown }}
|
|
42
|
+
<p class="not-prose">
|
|
43
|
+
some text
|
|
44
|
+
</p>
|
|
45
|
+
</article>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
</td>
|
|
49
|
+
|
|
50
|
+
<td>
|
|
51
|
+
|
|
52
|
+
<!-- prettier-ignore -->
|
|
53
|
+
```html
|
|
54
|
+
<article text-base prose prose-truegray xl="text-xl">
|
|
55
|
+
{{ markdown }}
|
|
56
|
+
<p class="not-prose">
|
|
57
|
+
not-prose is only available in class.
|
|
58
|
+
</p>
|
|
59
|
+
</article>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
</td>
|
|
63
|
+
</tr>
|
|
64
|
+
</tbody>
|
|
65
|
+
</table>
|
|
66
|
+
|
|
67
|
+
## Highlight
|
|
68
|
+
|
|
69
|
+
- **Any font size you want**
|
|
70
|
+
|
|
71
|
+
Apply any font size for body you like and `prose` will scale the styles for
|
|
72
|
+
the respective HTML elements. For instance, `prose text-lg` has body font size
|
|
73
|
+
`1.125rem` and `h1` will with scale with that size 2.25 times. See [all the
|
|
74
|
+
supported HTML elements].
|
|
75
|
+
|
|
76
|
+
[all the supported html elements]: https://github.com/unocss/unocss/blob/main/packages/preset-typography/src/preflights/default.ts
|
|
77
|
+
|
|
78
|
+
- **Any color you like**
|
|
79
|
+
|
|
80
|
+
Apply any color with `prose-${colorName}` by UnoCSS (e.g. `prose-coolgray`,
|
|
81
|
+
`prose-sky`) since `prose` does not have any color by default. See
|
|
82
|
+
[all available colors](#colors). For instance, `prose prose-truegray` will use
|
|
83
|
+
the respective colors for the respective HTML elements.
|
|
84
|
+
|
|
85
|
+
- **Dark mode in ONE utility**
|
|
86
|
+
|
|
87
|
+
Apply typographic dark mode with `prose-invert` (background color needs to be
|
|
88
|
+
handled by users). For instance, `prose dark:prose-invert` will use the
|
|
89
|
+
inverted colors in the dark mode.
|
|
90
|
+
|
|
91
|
+
- **Your own style, still your style**
|
|
92
|
+
|
|
93
|
+
Styles of elements not within `prose` will stay the same. No style resetting
|
|
94
|
+
just like UnoCSS.
|
|
95
|
+
|
|
96
|
+
- **Undo with `not` utility**
|
|
97
|
+
|
|
98
|
+
Apply `not-prose` to the elements to undo the typographic styles. For
|
|
99
|
+
instance, `<table class="not-prose">` will skip the styles by this preset for
|
|
100
|
+
the `table` element **(NOTE: `not` utility is only usable in class since it is
|
|
101
|
+
only used in CSS** **selector & not scanned by UnoCSS)**.
|
|
102
|
+
|
|
103
|
+
## Utilities
|
|
104
|
+
|
|
105
|
+
| Rule | Styles by this rule |
|
|
106
|
+
| :-----: | :---------------------------------------------------------------------------------------------------------------: |
|
|
107
|
+
| `prose` | See [on GitHub](https://github.com/unocss/unocss/blob/main/packages/preset-typography/src/preflights/default.ts). |
|
|
108
|
+
|
|
109
|
+
### Colors
|
|
110
|
+
|
|
111
|
+
| Rules (color) |
|
|
112
|
+
| --------------- |
|
|
113
|
+
| `prose-rose` |
|
|
114
|
+
| `prose-pink` |
|
|
115
|
+
| `prose-fuchsia` |
|
|
116
|
+
| `prose-purple` |
|
|
117
|
+
| `prose-violet` |
|
|
118
|
+
| `prose-indigo` |
|
|
119
|
+
| `prose-blue` |
|
|
120
|
+
| `prose-sky` |
|
|
121
|
+
| `prose-cyan` |
|
|
122
|
+
| `prose-teal` |
|
|
123
|
+
| `prose-emerald` |
|
|
124
|
+
| `prose-green` |
|
|
125
|
+
| `prose-lime` |
|
|
126
|
+
| `prose-yellow` |
|
|
127
|
+
| `prose-amber` |
|
|
128
|
+
| `prose-orange` |
|
|
129
|
+
| `prose-red` |
|
|
130
|
+
| `prose-gray` |
|
|
131
|
+
| `prose-slate` |
|
|
132
|
+
| `prose-zinc` |
|
|
133
|
+
| `prose-neutral` |
|
|
134
|
+
| `prose-stone` |
|
|
135
|
+
|
|
136
|
+
## Configurations
|
|
137
|
+
|
|
138
|
+
This preset has `className` and `cssExtend` configurations for users who like to
|
|
139
|
+
override or extend.
|
|
140
|
+
|
|
141
|
+
The CSS declarations passed to `cssExtend` will
|
|
142
|
+
|
|
143
|
+
- **override** the built-in styles if the values are conflicting, else
|
|
144
|
+
|
|
145
|
+
- **be merged** deeply with built-in styles.
|
|
146
|
+
|
|
147
|
+
### Type of `TypographyOptions`
|
|
148
|
+
|
|
149
|
+
```ts
|
|
150
|
+
export interface TypographyOptions {
|
|
151
|
+
/**
|
|
152
|
+
* The class name to use the typographic utilities.
|
|
153
|
+
* To undo the styles to the elements, use it like
|
|
154
|
+
* `not-${className}` which is by default `not-prose`.
|
|
155
|
+
*
|
|
156
|
+
* Note: `not` utility is only available in class.
|
|
157
|
+
*
|
|
158
|
+
* @defaultValue `prose`
|
|
159
|
+
*/
|
|
160
|
+
className?: string
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* Extend or override CSS selectors with CSS declaration block.
|
|
164
|
+
*
|
|
165
|
+
* @defaultValue undefined
|
|
166
|
+
*/
|
|
167
|
+
cssExtend?: Record<string, CSSObject>
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### Example
|
|
172
|
+
|
|
173
|
+
```ts
|
|
174
|
+
// unocss.config.ts
|
|
175
|
+
import { presetAttributify, presetUno, defineConfig } from 'unocss'
|
|
176
|
+
import { presetTypography } from '@unocss/preset-typography'
|
|
177
|
+
|
|
178
|
+
export default defineConfig({
|
|
179
|
+
presets: [
|
|
180
|
+
presetAttributify(), // required if using attributify mode
|
|
181
|
+
presetUno(), // required
|
|
182
|
+
presetTypography({
|
|
183
|
+
className: 'markdown', // now use like `markdown markdown-gray`, `not-markdown`
|
|
184
|
+
// cssExtend is an object with CSS selector as key and
|
|
185
|
+
// CSS declaration block as value like writing normal CSS.
|
|
186
|
+
cssExtend: {
|
|
187
|
+
code: {
|
|
188
|
+
color: '#8b5cf6',
|
|
189
|
+
},
|
|
190
|
+
'a:hover': {
|
|
191
|
+
color: '#f43f5e',
|
|
192
|
+
},
|
|
193
|
+
'a:visited': {
|
|
194
|
+
color: '#14b8a6',
|
|
195
|
+
},
|
|
196
|
+
},
|
|
197
|
+
}),
|
|
198
|
+
],
|
|
199
|
+
})
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
## Acknowledgement
|
|
203
|
+
|
|
204
|
+
- [TailwindCSS Typography](https://github.com/tailwindlabs/tailwindcss-typography)
|
|
205
|
+
- [WindiCSS Typography](https://github.com/windicss/windicss/tree/main/src/plugin/typography)
|
|
206
|
+
|
|
207
|
+
## License
|
|
208
|
+
|
|
209
|
+
MIT © 2021-Present Anthony Fu
|
|
210
|
+
|
|
211
|
+
MIT © 2021-Present Jeff Yang
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const core = require('@unocss/core');
|
|
6
|
+
|
|
7
|
+
const DEFAULT = {
|
|
8
|
+
"h1,h2,h3,h4,h5,h6": {
|
|
9
|
+
"color": "var(--uno-prose-headings)",
|
|
10
|
+
"font-weight": "600",
|
|
11
|
+
"line-height": 1.25
|
|
12
|
+
},
|
|
13
|
+
"a": {
|
|
14
|
+
"color": "var(--uno-prose-links)",
|
|
15
|
+
"text-decoration": "underline",
|
|
16
|
+
"font-weight": "500"
|
|
17
|
+
},
|
|
18
|
+
"a code": {
|
|
19
|
+
color: "var(--uno-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(--uno-prose-borders)"
|
|
30
|
+
},
|
|
31
|
+
"h1": {
|
|
32
|
+
"margin": "1rem 0",
|
|
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(--uno-prose-captions)",
|
|
55
|
+
"font-size": ".875em"
|
|
56
|
+
},
|
|
57
|
+
"code": {
|
|
58
|
+
"color": "var(--uno-prose-code)",
|
|
59
|
+
"font-size": ".875em",
|
|
60
|
+
"font-weight": 600,
|
|
61
|
+
"font-family": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation-Mono,Courier-New,monospace"
|
|
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
|
+
"ul": {
|
|
91
|
+
"list-style-type": "disc"
|
|
92
|
+
},
|
|
93
|
+
"ol > li::marker,ul > li::marker,summary::marker": {
|
|
94
|
+
color: "var(--uno-prose-lists)"
|
|
95
|
+
},
|
|
96
|
+
"hr": {
|
|
97
|
+
margin: "2em 0",
|
|
98
|
+
border: "1px solid var(--uno-prose-hr)"
|
|
99
|
+
},
|
|
100
|
+
"table": {
|
|
101
|
+
"display": "block",
|
|
102
|
+
"margin": "1em 0",
|
|
103
|
+
"border-collapse": "collapse",
|
|
104
|
+
"overflow-x": "auto"
|
|
105
|
+
},
|
|
106
|
+
"tr:nth-child(2n)": {
|
|
107
|
+
background: "var(--uno-prose-bg-soft)"
|
|
108
|
+
},
|
|
109
|
+
"td,th": {
|
|
110
|
+
border: "1px solid var(--uno-prose-borders)",
|
|
111
|
+
padding: ".625em 1em"
|
|
112
|
+
},
|
|
113
|
+
"abbr": {
|
|
114
|
+
cursor: "help"
|
|
115
|
+
},
|
|
116
|
+
"kbd": {
|
|
117
|
+
"color": "var(--uno-prose-code)",
|
|
118
|
+
"border": "1px solid",
|
|
119
|
+
"padding": ".25rem .5rem",
|
|
120
|
+
"font-size": ".875em",
|
|
121
|
+
"border-radius": ".25rem"
|
|
122
|
+
},
|
|
123
|
+
"details": {
|
|
124
|
+
margin: "1em 0",
|
|
125
|
+
padding: "1.25rem 1.5rem",
|
|
126
|
+
background: "var(--uno-prose-bg-soft)"
|
|
127
|
+
},
|
|
128
|
+
"summary": {
|
|
129
|
+
"cursor": "pointer",
|
|
130
|
+
"font-weight": "600"
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
function getCSS(selectorProse, className, preflights) {
|
|
135
|
+
let css = "";
|
|
136
|
+
for (const selector in preflights) {
|
|
137
|
+
const cssDeclarationBlock = preflights[selector];
|
|
138
|
+
const pseudoCSSMatchArray = selector.split(",").map((s) => {
|
|
139
|
+
const match = s.match(/::?(?:[\(\)\:\-\d\w]+)$/g);
|
|
140
|
+
if (match) {
|
|
141
|
+
const matchStr = match[0];
|
|
142
|
+
s = s.replace(matchStr, "");
|
|
143
|
+
return `${selectorProse} :where(${s}):not(.not-${className})${matchStr}`;
|
|
144
|
+
}
|
|
145
|
+
return null;
|
|
146
|
+
}).filter((v) => v);
|
|
147
|
+
if (pseudoCSSMatchArray.length) {
|
|
148
|
+
css += pseudoCSSMatchArray.join(",");
|
|
149
|
+
} else {
|
|
150
|
+
css += `${selectorProse} :where(${selector}):not(.not-${className})`;
|
|
151
|
+
}
|
|
152
|
+
css += "{";
|
|
153
|
+
for (const k in cssDeclarationBlock) {
|
|
154
|
+
const v = cssDeclarationBlock[k];
|
|
155
|
+
css += `${k}:${v};`;
|
|
156
|
+
}
|
|
157
|
+
css += "}";
|
|
158
|
+
}
|
|
159
|
+
return css;
|
|
160
|
+
}
|
|
161
|
+
function getPreflights(selectorProse, className, cssExtend) {
|
|
162
|
+
if (!selectorProse.startsWith("["))
|
|
163
|
+
selectorProse = `.${selectorProse}`;
|
|
164
|
+
if (cssExtend)
|
|
165
|
+
return getCSS(selectorProse, className, core.mergeDeep(DEFAULT, cssExtend));
|
|
166
|
+
return getCSS(selectorProse, className, DEFAULT);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
function presetTypography(options) {
|
|
170
|
+
let hasProseClass = false;
|
|
171
|
+
let selectorProse = "";
|
|
172
|
+
const className = options?.className || "prose";
|
|
173
|
+
const classNameRE = new RegExp(`^${className}$`);
|
|
174
|
+
const colorsRE = new RegExp(`^${className}-(rose|pink|fuchsia|purple|violet|indigo|blue|sky|cyan|teal|emerald|green|lime|yellow|amber|orange|red|gray|slate|zinc|neutral|stone)$`);
|
|
175
|
+
const invertRE = new RegExp(`^${className}-invert$`);
|
|
176
|
+
const cssExtend = options?.cssExtend;
|
|
177
|
+
return {
|
|
178
|
+
name: "@unocss/preset-typography",
|
|
179
|
+
enforce: "post",
|
|
180
|
+
layers: { typography: -1 },
|
|
181
|
+
rules: [
|
|
182
|
+
[
|
|
183
|
+
classNameRE,
|
|
184
|
+
(_, { rawSelector }) => {
|
|
185
|
+
hasProseClass = true;
|
|
186
|
+
selectorProse = rawSelector;
|
|
187
|
+
return { "color": "var(--uno-prose-body)", "max-width": "65ch" };
|
|
188
|
+
},
|
|
189
|
+
{ layer: "typography" }
|
|
190
|
+
],
|
|
191
|
+
[
|
|
192
|
+
colorsRE,
|
|
193
|
+
([, color], { theme }) => {
|
|
194
|
+
return {
|
|
195
|
+
"--uno-prose-body": theme.colors[color][700],
|
|
196
|
+
"--uno-prose-headings": theme.colors[color][900],
|
|
197
|
+
"--uno-prose-links": theme.colors[color][900],
|
|
198
|
+
"--uno-prose-lists": theme.colors[color][400],
|
|
199
|
+
"--uno-prose-hr": theme.colors[color][200],
|
|
200
|
+
"--uno-prose-captions": theme.colors[color][500],
|
|
201
|
+
"--uno-prose-code": theme.colors[color][900],
|
|
202
|
+
"--uno-prose-borders": theme.colors[color][200],
|
|
203
|
+
"--uno-prose-bg-soft": theme.colors[color][100],
|
|
204
|
+
"--uno-prose-invert-body": theme.colors[color][200],
|
|
205
|
+
"--uno-prose-invert-headings": theme.colors[color][100],
|
|
206
|
+
"--uno-prose-invert-links": theme.colors[color][100],
|
|
207
|
+
"--uno-prose-invert-lists": theme.colors[color][500],
|
|
208
|
+
"--uno-prose-invert-hr": theme.colors[color][700],
|
|
209
|
+
"--uno-prose-invert-captions": theme.colors[color][400],
|
|
210
|
+
"--uno-prose-invert-code": theme.colors[color][100],
|
|
211
|
+
"--uno-prose-invert-borders": theme.colors[color][700],
|
|
212
|
+
"--uno-prose-invert-bg-soft": theme.colors[color][800]
|
|
213
|
+
};
|
|
214
|
+
},
|
|
215
|
+
{ layer: "typography" }
|
|
216
|
+
],
|
|
217
|
+
[
|
|
218
|
+
invertRE,
|
|
219
|
+
() => {
|
|
220
|
+
return {
|
|
221
|
+
"--uno-prose-body": "var(--uno-prose-invert-body)",
|
|
222
|
+
"--uno-prose-headings": "var(--uno-prose-invert-headings)",
|
|
223
|
+
"--uno-prose-links": "var(--uno-prose-invert-links)",
|
|
224
|
+
"--uno-prose-lists": "var(--uno-prose-invert-lists)",
|
|
225
|
+
"--uno-prose-hr": "var(--uno-prose-invert-hr)",
|
|
226
|
+
"--uno-prose-captions": "var(--uno-prose-invert-captions)",
|
|
227
|
+
"--uno-prose-code": "var(--uno-prose-invert-code)",
|
|
228
|
+
"--uno-prose-borders": "var(--uno-prose-invert-borders)",
|
|
229
|
+
"--uno-prose-bg-soft": "var(--uno-prose-invert-bg-soft)"
|
|
230
|
+
};
|
|
231
|
+
},
|
|
232
|
+
{ layer: "typography" }
|
|
233
|
+
]
|
|
234
|
+
],
|
|
235
|
+
preflights: [
|
|
236
|
+
{
|
|
237
|
+
layer: "typography",
|
|
238
|
+
getCSS: () => hasProseClass ? getPreflights(selectorProse, className, cssExtend) : void 0
|
|
239
|
+
}
|
|
240
|
+
]
|
|
241
|
+
};
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
exports.presetTypography = presetTypography;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { CSSObject, Preset } from '@unocss/core';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
interface TypographyOptions {
|
|
7
|
+
/**
|
|
8
|
+
* The class name to use the typographic utilities.
|
|
9
|
+
* To undo the styles to the elements, use it like
|
|
10
|
+
* `not-${className}` which is by default `not-prose`.
|
|
11
|
+
*
|
|
12
|
+
* Note: `not` utility is only available in class.
|
|
13
|
+
*
|
|
14
|
+
* @defaultValue `prose`
|
|
15
|
+
*/
|
|
16
|
+
className?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Extend or override CSS selectors with CSS declaration block.
|
|
19
|
+
*
|
|
20
|
+
* @defaultValue undefined
|
|
21
|
+
*/
|
|
22
|
+
cssExtend?: Record<string, CSSObject>;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* UnoCSS Preset for Typography
|
|
26
|
+
*
|
|
27
|
+
* ```js
|
|
28
|
+
* // unocss.config.js
|
|
29
|
+
* import { presetAttributify, presetUno, defineConfig } from 'unocss'
|
|
30
|
+
* import { presetTypography } from '@unocss/preset-typography'
|
|
31
|
+
*
|
|
32
|
+
* export default defineConfig({
|
|
33
|
+
* presets: [
|
|
34
|
+
* presetAttributify(), // required if using attributify mode
|
|
35
|
+
* presetUno(), // required
|
|
36
|
+
* presetTypography()
|
|
37
|
+
* ]
|
|
38
|
+
* })
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* @returns typography preset
|
|
42
|
+
* @public
|
|
43
|
+
*/
|
|
44
|
+
declare function presetTypography(options?: TypographyOptions): Preset;
|
|
45
|
+
|
|
46
|
+
export { TypographyOptions, presetTypography };
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
import { mergeDeep } from '@unocss/core';
|
|
2
|
+
|
|
3
|
+
const DEFAULT = {
|
|
4
|
+
"h1,h2,h3,h4,h5,h6": {
|
|
5
|
+
"color": "var(--uno-prose-headings)",
|
|
6
|
+
"font-weight": "600",
|
|
7
|
+
"line-height": 1.25
|
|
8
|
+
},
|
|
9
|
+
"a": {
|
|
10
|
+
"color": "var(--uno-prose-links)",
|
|
11
|
+
"text-decoration": "underline",
|
|
12
|
+
"font-weight": "500"
|
|
13
|
+
},
|
|
14
|
+
"a code": {
|
|
15
|
+
color: "var(--uno-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(--uno-prose-borders)"
|
|
26
|
+
},
|
|
27
|
+
"h1": {
|
|
28
|
+
"margin": "1rem 0",
|
|
29
|
+
"font-size": "2.25em"
|
|
30
|
+
},
|
|
31
|
+
"h2": {
|
|
32
|
+
"margin": "1.75em 0 .5em",
|
|
33
|
+
"font-size": "1.75em"
|
|
34
|
+
},
|
|
35
|
+
"h3": {
|
|
36
|
+
"margin": "1.5em 0 .5em",
|
|
37
|
+
"font-size": "1.375em"
|
|
38
|
+
},
|
|
39
|
+
"h4": {
|
|
40
|
+
"margin": "1em 0",
|
|
41
|
+
"font-size": "1.125em"
|
|
42
|
+
},
|
|
43
|
+
"img,video": {
|
|
44
|
+
"max-width": "100%"
|
|
45
|
+
},
|
|
46
|
+
"figure,picture": {
|
|
47
|
+
margin: "1em 0"
|
|
48
|
+
},
|
|
49
|
+
"figcaption": {
|
|
50
|
+
"color": "var(--uno-prose-captions)",
|
|
51
|
+
"font-size": ".875em"
|
|
52
|
+
},
|
|
53
|
+
"code": {
|
|
54
|
+
"color": "var(--uno-prose-code)",
|
|
55
|
+
"font-size": ".875em",
|
|
56
|
+
"font-weight": 600,
|
|
57
|
+
"font-family": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation-Mono,Courier-New,monospace"
|
|
58
|
+
},
|
|
59
|
+
":not(pre) > code::before,:not(pre) > code::after": {
|
|
60
|
+
content: '"`"'
|
|
61
|
+
},
|
|
62
|
+
"pre": {
|
|
63
|
+
"padding": "1.25rem 1.5rem",
|
|
64
|
+
"overflow-x": "auto",
|
|
65
|
+
"border-radius": ".375rem"
|
|
66
|
+
},
|
|
67
|
+
"pre,code": {
|
|
68
|
+
"white-space": "pre",
|
|
69
|
+
"word-spacing": "normal",
|
|
70
|
+
"word-break": "normal",
|
|
71
|
+
"word-wrap": "normal",
|
|
72
|
+
"-moz-tab-size": 4,
|
|
73
|
+
"-o-tab-size": 4,
|
|
74
|
+
"tab-size": 4,
|
|
75
|
+
"-webkit-hyphens": "none",
|
|
76
|
+
"-moz-hyphens": "none",
|
|
77
|
+
"hyphens": "none",
|
|
78
|
+
"background": "transparent"
|
|
79
|
+
},
|
|
80
|
+
"pre code": {
|
|
81
|
+
"font-weight": "inherit"
|
|
82
|
+
},
|
|
83
|
+
"ol,ul": {
|
|
84
|
+
"padding-left": "1.25em"
|
|
85
|
+
},
|
|
86
|
+
"ul": {
|
|
87
|
+
"list-style-type": "disc"
|
|
88
|
+
},
|
|
89
|
+
"ol > li::marker,ul > li::marker,summary::marker": {
|
|
90
|
+
color: "var(--uno-prose-lists)"
|
|
91
|
+
},
|
|
92
|
+
"hr": {
|
|
93
|
+
margin: "2em 0",
|
|
94
|
+
border: "1px solid var(--uno-prose-hr)"
|
|
95
|
+
},
|
|
96
|
+
"table": {
|
|
97
|
+
"display": "block",
|
|
98
|
+
"margin": "1em 0",
|
|
99
|
+
"border-collapse": "collapse",
|
|
100
|
+
"overflow-x": "auto"
|
|
101
|
+
},
|
|
102
|
+
"tr:nth-child(2n)": {
|
|
103
|
+
background: "var(--uno-prose-bg-soft)"
|
|
104
|
+
},
|
|
105
|
+
"td,th": {
|
|
106
|
+
border: "1px solid var(--uno-prose-borders)",
|
|
107
|
+
padding: ".625em 1em"
|
|
108
|
+
},
|
|
109
|
+
"abbr": {
|
|
110
|
+
cursor: "help"
|
|
111
|
+
},
|
|
112
|
+
"kbd": {
|
|
113
|
+
"color": "var(--uno-prose-code)",
|
|
114
|
+
"border": "1px solid",
|
|
115
|
+
"padding": ".25rem .5rem",
|
|
116
|
+
"font-size": ".875em",
|
|
117
|
+
"border-radius": ".25rem"
|
|
118
|
+
},
|
|
119
|
+
"details": {
|
|
120
|
+
margin: "1em 0",
|
|
121
|
+
padding: "1.25rem 1.5rem",
|
|
122
|
+
background: "var(--uno-prose-bg-soft)"
|
|
123
|
+
},
|
|
124
|
+
"summary": {
|
|
125
|
+
"cursor": "pointer",
|
|
126
|
+
"font-weight": "600"
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
function getCSS(selectorProse, className, preflights) {
|
|
131
|
+
let css = "";
|
|
132
|
+
for (const selector in preflights) {
|
|
133
|
+
const cssDeclarationBlock = preflights[selector];
|
|
134
|
+
const pseudoCSSMatchArray = selector.split(",").map((s) => {
|
|
135
|
+
const match = s.match(/::?(?:[\(\)\:\-\d\w]+)$/g);
|
|
136
|
+
if (match) {
|
|
137
|
+
const matchStr = match[0];
|
|
138
|
+
s = s.replace(matchStr, "");
|
|
139
|
+
return `${selectorProse} :where(${s}):not(.not-${className})${matchStr}`;
|
|
140
|
+
}
|
|
141
|
+
return null;
|
|
142
|
+
}).filter((v) => v);
|
|
143
|
+
if (pseudoCSSMatchArray.length) {
|
|
144
|
+
css += pseudoCSSMatchArray.join(",");
|
|
145
|
+
} else {
|
|
146
|
+
css += `${selectorProse} :where(${selector}):not(.not-${className})`;
|
|
147
|
+
}
|
|
148
|
+
css += "{";
|
|
149
|
+
for (const k in cssDeclarationBlock) {
|
|
150
|
+
const v = cssDeclarationBlock[k];
|
|
151
|
+
css += `${k}:${v};`;
|
|
152
|
+
}
|
|
153
|
+
css += "}";
|
|
154
|
+
}
|
|
155
|
+
return css;
|
|
156
|
+
}
|
|
157
|
+
function getPreflights(selectorProse, className, cssExtend) {
|
|
158
|
+
if (!selectorProse.startsWith("["))
|
|
159
|
+
selectorProse = `.${selectorProse}`;
|
|
160
|
+
if (cssExtend)
|
|
161
|
+
return getCSS(selectorProse, className, mergeDeep(DEFAULT, cssExtend));
|
|
162
|
+
return getCSS(selectorProse, className, DEFAULT);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
function presetTypography(options) {
|
|
166
|
+
let hasProseClass = false;
|
|
167
|
+
let selectorProse = "";
|
|
168
|
+
const className = options?.className || "prose";
|
|
169
|
+
const classNameRE = new RegExp(`^${className}$`);
|
|
170
|
+
const colorsRE = new RegExp(`^${className}-(rose|pink|fuchsia|purple|violet|indigo|blue|sky|cyan|teal|emerald|green|lime|yellow|amber|orange|red|gray|slate|zinc|neutral|stone)$`);
|
|
171
|
+
const invertRE = new RegExp(`^${className}-invert$`);
|
|
172
|
+
const cssExtend = options?.cssExtend;
|
|
173
|
+
return {
|
|
174
|
+
name: "@unocss/preset-typography",
|
|
175
|
+
enforce: "post",
|
|
176
|
+
layers: { typography: -1 },
|
|
177
|
+
rules: [
|
|
178
|
+
[
|
|
179
|
+
classNameRE,
|
|
180
|
+
(_, { rawSelector }) => {
|
|
181
|
+
hasProseClass = true;
|
|
182
|
+
selectorProse = rawSelector;
|
|
183
|
+
return { "color": "var(--uno-prose-body)", "max-width": "65ch" };
|
|
184
|
+
},
|
|
185
|
+
{ layer: "typography" }
|
|
186
|
+
],
|
|
187
|
+
[
|
|
188
|
+
colorsRE,
|
|
189
|
+
([, color], { theme }) => {
|
|
190
|
+
return {
|
|
191
|
+
"--uno-prose-body": theme.colors[color][700],
|
|
192
|
+
"--uno-prose-headings": theme.colors[color][900],
|
|
193
|
+
"--uno-prose-links": theme.colors[color][900],
|
|
194
|
+
"--uno-prose-lists": theme.colors[color][400],
|
|
195
|
+
"--uno-prose-hr": theme.colors[color][200],
|
|
196
|
+
"--uno-prose-captions": theme.colors[color][500],
|
|
197
|
+
"--uno-prose-code": theme.colors[color][900],
|
|
198
|
+
"--uno-prose-borders": theme.colors[color][200],
|
|
199
|
+
"--uno-prose-bg-soft": theme.colors[color][100],
|
|
200
|
+
"--uno-prose-invert-body": theme.colors[color][200],
|
|
201
|
+
"--uno-prose-invert-headings": theme.colors[color][100],
|
|
202
|
+
"--uno-prose-invert-links": theme.colors[color][100],
|
|
203
|
+
"--uno-prose-invert-lists": theme.colors[color][500],
|
|
204
|
+
"--uno-prose-invert-hr": theme.colors[color][700],
|
|
205
|
+
"--uno-prose-invert-captions": theme.colors[color][400],
|
|
206
|
+
"--uno-prose-invert-code": theme.colors[color][100],
|
|
207
|
+
"--uno-prose-invert-borders": theme.colors[color][700],
|
|
208
|
+
"--uno-prose-invert-bg-soft": theme.colors[color][800]
|
|
209
|
+
};
|
|
210
|
+
},
|
|
211
|
+
{ layer: "typography" }
|
|
212
|
+
],
|
|
213
|
+
[
|
|
214
|
+
invertRE,
|
|
215
|
+
() => {
|
|
216
|
+
return {
|
|
217
|
+
"--uno-prose-body": "var(--uno-prose-invert-body)",
|
|
218
|
+
"--uno-prose-headings": "var(--uno-prose-invert-headings)",
|
|
219
|
+
"--uno-prose-links": "var(--uno-prose-invert-links)",
|
|
220
|
+
"--uno-prose-lists": "var(--uno-prose-invert-lists)",
|
|
221
|
+
"--uno-prose-hr": "var(--uno-prose-invert-hr)",
|
|
222
|
+
"--uno-prose-captions": "var(--uno-prose-invert-captions)",
|
|
223
|
+
"--uno-prose-code": "var(--uno-prose-invert-code)",
|
|
224
|
+
"--uno-prose-borders": "var(--uno-prose-invert-borders)",
|
|
225
|
+
"--uno-prose-bg-soft": "var(--uno-prose-invert-bg-soft)"
|
|
226
|
+
};
|
|
227
|
+
},
|
|
228
|
+
{ layer: "typography" }
|
|
229
|
+
]
|
|
230
|
+
],
|
|
231
|
+
preflights: [
|
|
232
|
+
{
|
|
233
|
+
layer: "typography",
|
|
234
|
+
getCSS: () => hasProseClass ? getPreflights(selectorProse, className, cssExtend) : void 0
|
|
235
|
+
}
|
|
236
|
+
]
|
|
237
|
+
};
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
export { presetTypography };
|
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@unocss/preset-typography",
|
|
3
|
+
"version": "0.24.0",
|
|
4
|
+
"description": "Typography preset for UnoCSS",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"unocss",
|
|
7
|
+
"unocss-preset"
|
|
8
|
+
],
|
|
9
|
+
"homepage": "https://github.com/unocss/unocss/tree/main/packages/preset-typography#readme",
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/unocss/unocss/issues"
|
|
12
|
+
},
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git+https://github.com/unocss/unocss.git",
|
|
16
|
+
"directory": "packages/preset-typography"
|
|
17
|
+
},
|
|
18
|
+
"license": "MIT",
|
|
19
|
+
"sideEffects": false,
|
|
20
|
+
"author": "Jeff Yang",
|
|
21
|
+
"exports": {
|
|
22
|
+
".": {
|
|
23
|
+
"require": "./dist/index.cjs",
|
|
24
|
+
"import": "./dist/index.mjs",
|
|
25
|
+
"types": "./dist/index.d.ts"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"main": "dist/index.cjs",
|
|
29
|
+
"module": "dist/index.mjs",
|
|
30
|
+
"types": "dist/index.d.ts",
|
|
31
|
+
"files": [
|
|
32
|
+
"dist"
|
|
33
|
+
],
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@unocss/core": "0.24.0"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"build": "unbuild",
|
|
39
|
+
"stub": "unbuild --stub"
|
|
40
|
+
}
|
|
41
|
+
}
|