@tenphi/tasty 0.0.0-snapshot.056b911

package/dist/utils/typography.js

@@ -0,0 +1,51 @@
+//#region src/utils/typography.ts
+const RESERVED_PRESET_NAMES = new Set([
+	"strong",
+	"bold",
+	"italic",
+	"icon",
+	"tight"
+]);
+/**
+* Generate typography tokens with $ prefix for CSS custom properties.
+*
+* Each preset generates the following CSS custom properties:
+* - `${name}-font-size`
+* - `${name}-line-height`
+* - `${name}-letter-spacing`
+* - `${name}-font-weight`
+* - `${name}-bold-font-weight` (if defined)
+* - `${name}-icon-size` (if defined)
+* - `${name}-text-transform` (if defined)
+* - `${name}-font-family` (if defined)
+* - `${name}-font-style` (if defined)
+*
+* @param presets - Typography presets object
+* @returns ConfigTokens object with $ prefixed keys
+*
+* @example
+* const customTokens = generateTypographyTokens({
+*   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' },
+*   body: { fontSize: '16px', lineHeight: '24px', fontWeight: '400' },
+* });
+*/
+function generateTypographyTokens(presets) {
+	const tokens = {};
+	for (const [name, preset] of Object.entries(presets)) {
+		if (RESERVED_PRESET_NAMES.has(name)) throw new Error(`Invalid typography preset name "${name}". This name is reserved as a preset modifier.`);
+		tokens[`$${name}-font-size`] = preset.fontSize;
+		tokens[`$${name}-line-height`] = preset.lineHeight;
+		tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? "0";
+		tokens[`$${name}-font-weight`] = preset.fontWeight;
+		if (preset.boldFontWeight !== void 0) tokens[`$${name}-bold-font-weight`] = preset.boldFontWeight;
+		if (preset.iconSize !== void 0) tokens[`$${name}-icon-size`] = preset.iconSize;
+		if (preset.textTransform !== void 0) tokens[`$${name}-text-transform`] = preset.textTransform;
+		if (preset.fontFamily !== void 0) tokens[`$${name}-font-family`] = preset.fontFamily;
+		if (preset.fontStyle !== void 0) tokens[`$${name}-font-style`] = preset.fontStyle;
+	}
+	return tokens;
+}
+//#endregion
+export { generateTypographyTokens };
+
+//# sourceMappingURL=typography.js.map

package/dist/utils/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","names":[],"sources":["../../src/utils/typography.ts"],"sourcesContent":["import type { ConfigTokens, ConfigTokenValue } from '../styles/types';\n\nconst RESERVED_PRESET_NAMES = new Set([\n  'strong',\n  'bold',\n  'italic',\n  'icon',\n  'tight',\n]);\n\n/**\n * A typography token value: plain value or a state map for responsive/theme-aware presets.\n *\n * @example\n * // Plain value\n * fontWeight: '400'\n * // State map\n * fontWeight: { '': '400', '@dark': '300' }\n */\nexport type TypographyTokenValue =\n  | string\n  | number\n  | Record<string, string | number | undefined | null | '@inherit'>;\n\n/**\n * Typography preset configuration.\n * Each preset defines font properties that get expanded into CSS custom properties.\n * All fields accept plain values or state maps for responsive/theme-aware tokens.\n *\n * Use with `generateTypographyTokens()` to create typography tokens for your design system.\n */\nexport interface TypographyPreset {\n  fontSize: TypographyTokenValue;\n  lineHeight: TypographyTokenValue;\n  letterSpacing?: TypographyTokenValue;\n  fontWeight: TypographyTokenValue;\n  boldFontWeight?: TypographyTokenValue;\n  iconSize?: TypographyTokenValue;\n  textTransform?: TypographyTokenValue;\n  fontFamily?: TypographyTokenValue;\n  fontStyle?: TypographyTokenValue;\n}\n\n/**\n * Generate typography tokens with $ prefix for CSS custom properties.\n *\n * Each preset generates the following CSS custom properties:\n * - `${name}-font-size`\n * - `${name}-line-height`\n * - `${name}-letter-spacing`\n * - `${name}-font-weight`\n * - `${name}-bold-font-weight` (if defined)\n * - `${name}-icon-size` (if defined)\n * - `${name}-text-transform` (if defined)\n * - `${name}-font-family` (if defined)\n * - `${name}-font-style` (if defined)\n *\n * @param presets - Typography presets object\n * @returns ConfigTokens object with $ prefixed keys\n *\n * @example\n * const customTokens = generateTypographyTokens({\n *   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' },\n *   body: { fontSize: '16px', lineHeight: '24px', fontWeight: '400' },\n * });\n */\nexport function generateTypographyTokens(\n  presets: Record<string, TypographyPreset>,\n): ConfigTokens {\n  const tokens: Record<`$${string}`, ConfigTokenValue> = {};\n\n  for (const [name, preset] of Object.entries(presets)) {\n    if (RESERVED_PRESET_NAMES.has(name)) {\n      throw new Error(\n        `Invalid typography preset name \"${name}\". This name is reserved as a preset modifier.`,\n      );\n    }\n\n    tokens[`$${name}-font-size`] = preset.fontSize;\n    tokens[`$${name}-line-height`] = preset.lineHeight;\n    tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? '0';\n    tokens[`$${name}-font-weight`] = preset.fontWeight;\n\n    if (preset.boldFontWeight !== undefined) {\n      tokens[`$${name}-bold-font-weight`] = preset.boldFontWeight;\n    }\n\n    if (preset.iconSize !== undefined) {\n      tokens[`$${name}-icon-size`] = preset.iconSize;\n    }\n\n    if (preset.textTransform !== undefined) {\n      tokens[`$${name}-text-transform`] = preset.textTransform;\n    }\n\n    if (preset.fontFamily !== undefined) {\n      tokens[`$${name}-font-family`] = preset.fontFamily;\n    }\n\n    if (preset.fontStyle !== undefined) {\n      tokens[`$${name}-font-style`] = preset.fontStyle;\n    }\n  }\n\n  return tokens as ConfigTokens;\n}\n"],"mappings":";AAEA,MAAM,wBAAwB,IAAI,IAAI;CACpC;CACA;CACA;CACA;CACA;CACD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AA0DF,SAAgB,yBACd,SACc;CACd,MAAM,SAAiD,EAAE;AAEzD,MAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,QAAQ,EAAE;AACpD,MAAI,sBAAsB,IAAI,KAAK,CACjC,OAAM,IAAI,MACR,mCAAmC,KAAK,gDACzC;AAGH,SAAO,IAAI,KAAK,eAAe,OAAO;AACtC,SAAO,IAAI,KAAK,iBAAiB,OAAO;AACxC,SAAO,IAAI,KAAK,oBAAoB,OAAO,iBAAiB;AAC5D,SAAO,IAAI,KAAK,iBAAiB,OAAO;AAExC,MAAI,OAAO,mBAAmB,KAAA,EAC5B,QAAO,IAAI,KAAK,sBAAsB,OAAO;AAG/C,MAAI,OAAO,aAAa,KAAA,EACtB,QAAO,IAAI,KAAK,eAAe,OAAO;AAGxC,MAAI,OAAO,kBAAkB,KAAA,EAC3B,QAAO,IAAI,KAAK,oBAAoB,OAAO;AAG7C,MAAI,OAAO,eAAe,KAAA,EACxB,QAAO,IAAI,KAAK,iBAAiB,OAAO;AAG1C,MAAI,OAAO,cAAc,KAAA,EACvB,QAAO,IAAI,KAAK,gBAAgB,OAAO;;AAI3C,QAAO"}

package/dist/utils/warnings.d.ts

@@ -0,0 +1,16 @@
+//#region src/utils/warnings.d.ts
+declare function warn(...args: unknown[]): void;
+declare function deprecationWarning(condition: unknown, {
+  property,
+  name,
+  betterAlternative,
+  reason
+}: {
+  property: string;
+  name: string;
+  betterAlternative: (() => string) | string;
+  reason?: (() => string) | string;
+}): void;
+//#endregion
+export { deprecationWarning, warn };
+//# sourceMappingURL=warnings.d.ts.map

package/dist/utils/warnings.js

@@ -0,0 +1,16 @@
+//#region src/utils/warnings.ts
+const PREFIX = "Tasty";
+function warn(...args) {
+	console.warn(`${PREFIX}:`, ...args);
+}
+function deprecationWarning(condition, { property, name, betterAlternative, reason }) {
+	if (condition) return;
+	console.group(`⚠️ ${PREFIX}: Deprecation in ${name}`);
+	warn(`"${property}" is deprecated, consider better alternative: ${typeof betterAlternative === "function" ? betterAlternative() : betterAlternative}`);
+	if (reason) warn(`Reason: ${typeof reason === "function" ? reason() : reason}`);
+	console.groupEnd();
+}
+//#endregion
+export { deprecationWarning, warn };
+
+//# sourceMappingURL=warnings.js.map

package/dist/utils/warnings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"warnings.js","names":[],"sources":["../../src/utils/warnings.ts"],"sourcesContent":["/* eslint-disable no-console */\nconst PREFIX = 'Tasty';\n\nexport function warn(...args: unknown[]) {\n  console.warn(`${PREFIX}:`, ...args);\n}\n\nexport function deprecationWarning(\n  condition: unknown,\n  {\n    property,\n    name,\n    betterAlternative,\n    reason,\n  }: {\n    property: string;\n    name: string;\n    betterAlternative: (() => string) | string;\n    reason?: (() => string) | string;\n  },\n) {\n  if (condition) return;\n\n  if (process.env.NODE_ENV === 'production') {\n    return warn(\n      `DEPRECATION ${name} \"${property}\" -> ${\n        typeof betterAlternative === 'function'\n          ? betterAlternative()\n          : betterAlternative\n      }`,\n    );\n  }\n\n  // we can make deprecations even better if we add the md syntax in the console.\n  // anyway, everything down below will be stripped in the production build\n  console.group(`⚠️ ${PREFIX}: Deprecation in ${name}`);\n  warn(\n    `\"${property}\" is deprecated, consider better alternative: ${\n      typeof betterAlternative === 'function'\n        ? betterAlternative()\n        : betterAlternative\n    }`,\n  );\n  if (reason) {\n    warn(`Reason: ${typeof reason === 'function' ? reason() : reason}`);\n  }\n  console.groupEnd();\n}\n"],"mappings":";AACA,MAAM,SAAS;AAEf,SAAgB,KAAK,GAAG,MAAiB;AACvC,SAAQ,KAAK,GAAG,OAAO,IAAI,GAAG,KAAK;;AAGrC,SAAgB,mBACd,WACA,EACE,UACA,MACA,mBACA,UAOF;AACA,KAAI,UAAW;AAcf,SAAQ,MAAM,MAAM,OAAO,mBAAmB,OAAO;AACrD,MACE,IAAI,SAAS,gDACX,OAAO,sBAAsB,aACzB,mBAAmB,GACnB,oBAEP;AACD,KAAI,OACF,MAAK,WAAW,OAAO,WAAW,aAAa,QAAQ,GAAG,SAAS;AAErE,SAAQ,UAAU"}

package/dist/zero/babel.d.ts

@@ -0,0 +1,195 @@
+import { CounterStyleDescriptors, FontFaceInput, KeyframesSteps } from "../injector/types.js";
+import { StyleDetails, UnitHandler } from "../parser/types.js";
+import { StyleHandlerDefinition } from "../utils/styles.js";
+import { ConfigTokens, RecipeStyles, Styles } from "../styles/types.js";
+import { TypographyPreset } from "../utils/typography.js";
+import { TastyPlugin } from "../plugins/types.js";
+import * as _$_babel_core0 from "@babel/core";
+import { PluginPass } from "@babel/core";
+
+//#region src/zero/babel.d.ts
+/**
+ * Build-time configuration for zero-runtime mode.
+ * Subset of TastyConfig that applies at build time.
+ */
+interface TastyZeroConfig {
+  /**
+   * Global predefined states for advanced state mapping.
+   * Example: { '@mobile': '@media(w < 768px)', '@dark': '@root(theme=dark)' }
+   */
+  states?: Record<string, string>;
+  /**
+   * Enable development mode features: source comments in generated CSS.
+   * Default: false
+   */
+  devMode?: boolean;
+  /**
+   * Parser LRU cache size (default: 1000).
+   * Larger values improve performance for builds with many unique style values.
+   */
+  parserCacheSize?: number;
+  /**
+   * Custom units for the style parser (merged with built-in units).
+   * Units transform numeric values like `2x` → `calc(2 * var(--gap))`.
+   * @example { em: 'em', vw: 'vw', custom: (n) => `${n * 10}px` }
+   */
+  units?: Record<string, string | UnitHandler>;
+  /**
+   * Custom functions for the style parser (merged with existing).
+   * Functions process parsed style groups and return CSS values.
+   * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }
+   */
+  funcs?: Record<string, (groups: StyleDetails[]) => string>;
+  /**
+   * Plugins that extend tasty with custom functions, units, states, and handlers.
+   * Plugins are processed in order, with later plugins overriding earlier ones.
+   * @example
+   * ```ts
+   * import { okhslPlugin } from '@tenphi/tasty';
+   *
+   * // babel.config.js
+   * module.exports = {
+   *   plugins: [
+   *     ['@tenphi/tasty/babel-plugin', {
+   *       config: { plugins: [okhslPlugin()] }
+   *     }]
+   *   ]
+   * };
+   * ```
+   */
+  plugins?: TastyPlugin[];
+  /**
+   * Global keyframes definitions for static extraction.
+   * Keys are animation names, values are keyframes step definitions.
+   * @example { fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } } }
+   */
+  keyframes?: Record<string, KeyframesSteps>;
+  /**
+   * Global @font-face definitions for static extraction.
+   * Keys are font-family names, values are descriptors or arrays of descriptors.
+   */
+  fontFace?: Record<string, FontFaceInput>;
+  /**
+   * Global @counter-style definitions for static extraction.
+   * Keys are counter-style names, values are descriptor objects.
+   */
+  counterStyle?: Record<string, CounterStyleDescriptors>;
+  /**
+   * Custom style handlers that transform style properties into CSS declarations.
+   * Handlers replace built-in handlers for the same style name.
+   * @example
+   * ```ts
+   * handlers: {
+   *   fill: ({ fill }) => fill ? { 'background-color': fill } : undefined,
+   *   elevation: ({ elevation }) => ({
+   *     'box-shadow': `0 ${elevation}px ${elevation * 2}px rgba(0,0,0,0.1)`,
+   *   }),
+   * }
+   * ```
+   */
+  handlers?: Record<string, StyleHandlerDefinition>;
+  /**
+   * Design tokens injected as CSS custom properties on `:root`.
+   * Values are parsed through the Tasty DSL. Supports state maps.
+   * @example { '$gap': '4px', '#primary': { '': '#purple', '@dark': '#light-purple' } }
+   */
+  tokens?: ConfigTokens;
+  /**
+   * Predefined tokens replaced during style parsing (parse-time substitution).
+   * Use `$name` for custom properties and `#name` for color tokens.
+   * @example { $spacing: '2x', '#accent': '#purple' }
+   */
+  replaceTokens?: Record<`$${string}` | `#${string}`, string | number>;
+  /**
+   * Predefined style recipes -- named style bundles that can be applied via `recipe` style property.
+   * Recipe values are flat tasty styles (no sub-element keys).
+   * @example
+   * ```ts
+   * recipes: {
+   *   card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
+   *   elevated: { shadow: '2x 2x 4x #shadow' },
+   * }
+   * ```
+   */
+  recipes?: Record<string, RecipeStyles>;
+  /**
+   * Typography presets — shorthand for `generateTypographyTokens()`.
+   * Generated tokens are merged under explicit `tokens` (tokens win on conflict).
+   * @example { h1: { fontSize: '32px', lineHeight: '1.2', fontWeight: '700' } }
+   */
+  presets?: Record<string, TypographyPreset>;
+  /**
+   * Tasty styles applied to the `body` tag.
+   * Supports the full Tasty style syntax.
+   * @example { fill: '#surface', color: '#text', preset: 't2', margin: 0 }
+   */
+  bodyStyles?: Styles;
+  /**
+   * Automatically infer and register CSS @property declarations from values.
+   * @default true
+   */
+  autoPropertyTypes?: boolean;
+}
+interface TastyZeroBabelOptions {
+  /** Output path for generated CSS (default: 'tasty.css') */
+  output?: string;
+  /**
+   * Tasty configuration for build-time processing.
+   * Can be a static object or a factory function that returns fresh config.
+   * A factory is called on each plugin invocation, enabling hot reload
+   * of config values that depend on external files (e.g. theme tokens).
+   */
+  config?: TastyZeroConfig | (() => TastyZeroConfig);
+  /**
+   * Absolute path to a TypeScript/JavaScript module that default-exports
+   * a `TastyZeroConfig` object. The module is loaded via jiti on each
+   * plugin invocation, enabling hot reload when the file changes.
+   *
+   * This option is JSON-serializable and is the primary way Turbopack
+   * passes config to the Babel plugin (since Turbopack loader options
+   * must be plain primitives/objects/arrays).
+   *
+   * When both `config` and `configFile` are set, `config` takes precedence.
+   *
+   * @example '/absolute/path/to/tasty-zero.config.ts'
+   */
+  configFile?: string;
+  /**
+   * Absolute file paths whose content affects the generated CSS.
+   * When any of these files change, babel-loader invalidates its cache
+   * and re-runs the plugin with fresh config values.
+   *
+   * Typically includes theme files that define Glaze palettes or token values.
+   * Paths must be absolute (resolved by the Next.js wrapper).
+   */
+  configDeps?: string[];
+  /**
+   * Automatically replace `@tenphi/tasty/static` imports with an import
+   * of the generated CSS file. This eliminates the need for users to
+   * manually import the CSS in their app entry point.
+   *
+   * @default true
+   */
+  injectImport?: boolean;
+  /**
+   * Output mode for extracted CSS.
+   *
+   * - `'file'` (default): CSS is written to a single output file and
+   *   the `@tenphi/tasty/static` import is rewritten to import that file.
+   * - `'inject'`: CSS is embedded inline in the JS output and injected
+   *   at runtime via a tiny injector from `@tenphi/tasty/static/inject`.
+   *   No CSS file is written. Each `tastyStatic` call becomes
+   *   self-contained. Best for reusable components and extensions.
+   *
+   * When `mode` is `'inject'`, `output` and `injectImport` are ignored.
+   *
+   * @default 'file'
+   */
+  mode?: 'file' | 'inject';
+}
+/** Clear the shared CSSWriter cache. Exposed for testing. */
+declare function clearWriterCache(): void;
+declare const _default: (api: object, options: TastyZeroBabelOptions | null | undefined, dirname: string) => _$_babel_core0.PluginObj<PluginPass>;
+//#endregion
+export { TastyZeroBabelOptions, TastyZeroConfig, clearWriterCache, _default as default };
+//# sourceMappingURL=babel.d.ts.map