@pikacss/plugin-typography 0.0.62 → 0.0.64

package/README.md

@@ -10,12 +10,16 @@ pnpm add -D @pikacss/plugin-typography
 
 ## Usage
 
+The example below assumes the application already uses `@pikacss/unplugin-pikacss`; Nuxt applications can import the same `defineConfig` surface from `@pikacss/nuxt-pikacss`.
+
 ```ts
-import { defineEngineConfig } from '@pikacss/core'
 import { typography } from '@pikacss/plugin-typography'
+import { defineConfig } from '@pikacss/unplugin-pikacss'
 
-export default defineEngineConfig({
-  plugins: [typography()],
+export default defineConfig({
+  engine: {
+    plugins: [typography()],
+  },
 })
 ```
 

package/dist/index.d.mts

@@ -12,32 +12,33 @@ import { EnginePlugin } from "@pikacss/core";
  *
  * @example
  * ```ts
- * engine.variables.add({
+ * typography({ variables: {
  *   ...typographyVariables,
  *   '--pk-prose-color-links': '#3b82f6',
- * })
+ * } })
  * ```
  */
-declare const typographyVariables: {
-  '--pk-prose-color-body': string;
-  '--pk-prose-color-headings': string;
-  '--pk-prose-color-lead': string;
-  '--pk-prose-color-links': string;
-  '--pk-prose-color-bold': string;
-  '--pk-prose-color-counters': string;
-  '--pk-prose-color-bullets': string;
-  '--pk-prose-color-hr': string;
-  '--pk-prose-color-quotes': string;
-  '--pk-prose-color-quote-borders': string;
-  '--pk-prose-color-captions': string;
-  '--pk-prose-color-code': string;
-  '--pk-prose-color-pre-code': string;
-  '--pk-prose-color-pre-bg': string;
-  '--pk-prose-color-th-borders': string;
-  '--pk-prose-color-td-borders': string;
-  '--pk-prose-color-kbd': string;
-  '--pk-prose-kbd-shadows': string;
+declare const typographyVariableDefaults: {
+  readonly '--pk-prose-color-body': "currentColor";
+  readonly '--pk-prose-color-headings': "currentColor";
+  readonly '--pk-prose-color-lead': "currentColor";
+  readonly '--pk-prose-color-links': "currentColor";
+  readonly '--pk-prose-color-bold': "currentColor";
+  readonly '--pk-prose-color-counters': "currentColor";
+  readonly '--pk-prose-color-bullets': "currentColor";
+  readonly '--pk-prose-color-hr': "currentColor";
+  readonly '--pk-prose-color-quotes': "currentColor";
+  readonly '--pk-prose-color-quote-borders': "currentColor";
+  readonly '--pk-prose-color-captions': "currentColor";
+  readonly '--pk-prose-color-code': "currentColor";
+  readonly '--pk-prose-color-pre-code': "currentColor";
+  readonly '--pk-prose-color-pre-bg': "transparent";
+  readonly '--pk-prose-color-th-borders': "currentColor";
+  readonly '--pk-prose-color-td-borders': "currentColor";
+  readonly '--pk-prose-color-kbd': "currentColor";
+  readonly '--pk-prose-kbd-shadows': "currentColor";
 };
+declare const typographyVariables: { [K in keyof typeof typographyVariableDefaults]: string };
 //#endregion
 //#region src/index.d.ts
 /**
@@ -87,11 +88,14 @@ declare module '@pikacss/core' {
  * @example
  * ```ts
  * import { typography } from '@pikacss/plugin-typography'
+ * import { defineConfig } from '@pikacss/unplugin-pikacss'
  *
- * export default defineEngineConfig({
- *   plugins: [typography()],
- *   typography: {
- *     variables: { '--pk-prose-color-links': '#3b82f6' },
+ * export default defineConfig({
+ *   engine: {
+ *     plugins: [typography()],
+ *     typography: {
+ *       variables: { '--pk-prose-color-links': '#3b82f6' },
+ *     },
  *   },
  * })
  * ```

package/dist/index.mjs

@@ -1,22 +1,4 @@
 import { defineEnginePlugin } from "@pikacss/core";
-//#region src/styles.ts
-/**
-* Default CSS custom property values for prose typography colors and accents.
-* @internal
-*
-* @remarks Each variable controls a specific color role within prose content
-* (body text, headings, links, code, borders, etc.). All default to
-* `currentColor` or `transparent`, allowing consumers to override them
-* through the plugin's `variables` option.
-*
-* @example
-* ```ts
-* engine.variables.add({
-*   ...typographyVariables,
-*   '--pk-prose-color-links': '#3b82f6',
-* })
-* ```
-*/
 const typographyVariables = {
 	"--pk-prose-color-body": "currentColor",
 	"--pk-prose-color-headings": "currentColor",
@@ -46,7 +28,7 @@ const typographyVariables = {
 *
 * @example
 * ```ts
-* engine.shortcuts.add(['prose-base', proseBaseStyle])
+* typography() lowers `{ name: 'prose-base', value: proseBaseStyle }` into Core shortcut config.
 * ```
 */
 const proseBaseStyle = {
@@ -355,15 +337,25 @@ const proseSizeVariants = {
 		lineHeight: "1.66"
 	}
 };
-function registerTypographyShortcuts(engine) {
-	engine.shortcuts.add(["prose-base", proseBaseStyle]);
-	proseShortcutModules.forEach(([name, style]) => {
-		engine.shortcuts.add([name, ["prose-base", style]]);
-	});
-	engine.shortcuts.add(["prose", proseShortcutModules.map(([name]) => name)]);
-	Object.entries(proseSizeVariants).forEach(([size, overrides]) => {
-		engine.shortcuts.add([`prose-${size}`, ["prose", overrides]]);
-	});
+function createTypographyShortcuts() {
+	return [
+		{
+			name: "prose-base",
+			value: proseBaseStyle
+		},
+		...proseShortcutModules.map(([name, style]) => ({
+			name,
+			value: ["prose-base", style]
+		})),
+		{
+			name: "prose",
+			value: proseShortcutModules.map(([name]) => name)
+		},
+		...Object.entries(proseSizeVariants).map(([size, overrides]) => ({
+			name: `prose-${size}`,
+			value: ["prose", overrides]
+		}))
+	];
 }
 /**
 * Creates the PikaCSS typography engine plugin.
@@ -379,11 +371,14 @@ function registerTypographyShortcuts(engine) {
 * @example
 * ```ts
 * import { typography } from '@pikacss/plugin-typography'
+* import { defineConfig } from '@pikacss/unplugin-pikacss'
 *
-* export default defineEngineConfig({
-*   plugins: [typography()],
-*   typography: {
-*     variables: { '--pk-prose-color-links': '#3b82f6' },
+* export default defineConfig({
+*   engine: {
+*     plugins: [typography()],
+*     typography: {
+*       variables: { '--pk-prose-color-links': '#3b82f6' },
+*     },
 *   },
 * })
 * ```
@@ -391,16 +386,18 @@ function registerTypographyShortcuts(engine) {
 function typography() {
 	return defineEnginePlugin({
 		name: "typography",
-		createState: () => ({ typographyConfig: {} }),
-		configureRawConfig: (config, context) => {
-			if (config.typography) context.state.typographyConfig = config.typography;
-		},
-		configureEngine: async (engine, context) => {
-			engine.variables.add({
+		configureRawConfig: (config) => {
+			const variableValues = {
 				...typographyVariables,
-				...context.state.typographyConfig.variables
-			});
-			registerTypographyShortcuts(engine);
+				...config.typography?.variables
+			};
+			const loweredVariables = Object.fromEntries(Object.entries(variableValues).map(([name, value]) => [name, { value }]));
+			const existingVariables = config.variables?.definitions == null ? [] : [config.variables.definitions].flat();
+			config.variables = {
+				...config.variables,
+				definitions: [...existingVariables, loweredVariables]
+			};
+			config.shortcuts = { definitions: [...config.shortcuts?.definitions ?? [], ...createTypographyShortcuts()] };
 		}
 	});
 }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.62",
+  "version": "0.0.64",
   "author": "DevilTea <ch19980814@gmail.com>",
   "license": "MIT",
   "homepage": "https://pikacss.github.io",
@@ -39,10 +39,10 @@
     "node": ">=22"
   },
   "peerDependencies": {
-    "@pikacss/core": "0.0.62"
+    "@pikacss/core": "0.0.64"
   },
   "devDependencies": {
-    "@pikacss/core": "0.0.62"
+    "@pikacss/core": "0.0.64"
   },
   "scripts": {
     "build": "tsdown",