@pikacss/plugin-typography 0.0.39 → 0.0.40
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/README.md +34 -14
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -16,9 +16,9 @@ import { defineEngineConfig } from '@pikacss/core'
|
|
|
16
16
|
import { typography } from '@pikacss/plugin-typography'
|
|
17
17
|
|
|
18
18
|
export default defineEngineConfig({
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
plugins: [
|
|
20
|
+
typography() // Note: must call function
|
|
21
|
+
]
|
|
22
22
|
})
|
|
23
23
|
```
|
|
24
24
|
|
|
@@ -187,27 +187,47 @@ Size modifiers apply the complete `prose` styles with different font sizes:
|
|
|
187
187
|
|
|
188
188
|
### Customization
|
|
189
189
|
|
|
190
|
-
|
|
190
|
+
The plugin provides module augmentation for type-safe configuration. After importing the plugin, the `typography` property becomes available in `EngineConfig` with full TypeScript autocomplete.
|
|
191
191
|
|
|
192
192
|
**pika.config.ts**:
|
|
193
193
|
```typescript
|
|
194
194
|
import { defineEngineConfig } from '@pikacss/core'
|
|
195
195
|
import { typography } from '@pikacss/plugin-typography'
|
|
196
196
|
|
|
197
|
+
// Module augmentation is automatic - just import the plugin
|
|
197
198
|
export default defineEngineConfig({
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
199
|
+
plugins: [
|
|
200
|
+
typography() // Note: must call function
|
|
201
|
+
],
|
|
202
|
+
typography: { // ✅ TypeScript autocomplete works here
|
|
203
|
+
variables: {
|
|
204
|
+
'--pk-prose-color-body': '#374151',
|
|
205
|
+
'--pk-prose-color-headings': '#111827',
|
|
206
|
+
'--pk-prose-color-links': '#2563eb',
|
|
207
|
+
}
|
|
208
|
+
}
|
|
208
209
|
})
|
|
209
210
|
```
|
|
210
211
|
|
|
212
|
+
**How Module Augmentation Works**:
|
|
213
|
+
|
|
214
|
+
The plugin declares module augmentation internally:
|
|
215
|
+
|
|
216
|
+
```typescript
|
|
217
|
+
declare module '@pikacss/core' {
|
|
218
|
+
interface EngineConfig {
|
|
219
|
+
typography?: {
|
|
220
|
+
variables?: Partial<Record<string, string>>
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
This enables:
|
|
227
|
+
- **IntelliSense**: TypeScript shows the `typography` property when you type in `defineEngineConfig`
|
|
228
|
+
- **Type Safety**: Invalid configuration shapes are caught at compile time
|
|
229
|
+
- **Documentation**: Hover over the property to see available options
|
|
230
|
+
|
|
211
231
|
#### Available CSS Variables
|
|
212
232
|
|
|
213
233
|
```css
|
package/package.json
CHANGED
|
@@ -4,16 +4,16 @@
|
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
|
-
"version": "0.0.
|
|
7
|
+
"version": "0.0.40",
|
|
8
8
|
"author": "DevilTea <ch19980814@gmail.com>",
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
12
|
-
"url": "https://github.com/pikacss/pikacss.git",
|
|
12
|
+
"url": "https://github.com/pikacss/pikacss.github.io.git",
|
|
13
13
|
"directory": "packages/plugin-typography"
|
|
14
14
|
},
|
|
15
15
|
"bugs": {
|
|
16
|
-
"url": "https://github.com/pikacss/pikacss/issues"
|
|
16
|
+
"url": "https://github.com/pikacss/pikacss.github.io/issues"
|
|
17
17
|
},
|
|
18
18
|
"keywords": [
|
|
19
19
|
"pikacss",
|
|
@@ -39,10 +39,10 @@
|
|
|
39
39
|
"dist"
|
|
40
40
|
],
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"@pikacss/core": "0.0.
|
|
42
|
+
"@pikacss/core": "0.0.40"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@pikacss/core": "0.0.
|
|
45
|
+
"@pikacss/core": "0.0.40"
|
|
46
46
|
},
|
|
47
47
|
"scripts": {
|
|
48
48
|
"build": "tsdown",
|