@pikacss/core 0.0.50 → 0.0.51

package/README.md

@@ -23,7 +23,7 @@ const css = engine.renderAtomicStyles(true, { atomicStyleIds: ids })
 
 ## Documentation
 
-See the [full documentation](https://pikacss.com/guide/core-features/).
+See the [full documentation](https://pikacss.com/api/core).
 
 ## License
 

package/dist/index.d.mts

@@ -418,23 +418,27 @@ declare module '@pikacss/core' {
 declare function shortcuts(): EnginePlugin;
 declare class ShortcutResolver extends RecursiveResolver<InternalStyleItem> {}
 //#endregion
-//#region src/internal/generated-property-semantics.d.ts
-declare const VARIABLE_SEMANTIC_FAMILIES: readonly ["color", "length", "time", "number", "percentage", "angle", "image", "url", "position", "easing", "font-family"];
-type VariableSemanticFamily = typeof VARIABLE_SEMANTIC_FAMILIES[number];
-//#endregion
 //#region src/internal/plugins/variables.d.ts
 type ResolvedCSSProperty = keyof ResolvedCSSProperties;
+declare const VARIABLE_SEMANTIC_TYPE_PROPERTIES: {
+  readonly color: readonly ["accent-color", "background-color", "border-block-color", "border-block-end-color", "border-block-start-color", "border-bottom-color", "border-inline-color", "border-inline-end-color", "border-inline-start-color", "border-left-color", "border-right-color", "border-top-color", "caret-color", "color", "column-rule-color", "flood-color", "lighting-color", "outline-color", "stop-color", "stroke-color", "text-decoration-color", "text-emphasis-color"];
+  readonly length: readonly ["block-size", "border-bottom-width", "border-left-width", "border-right-width", "border-spacing", "border-top-width", "bottom", "font-size", "height", "inline-size", "inset-block-end", "inset-block-start", "inset-inline-end", "inset-inline-start", "left", "letter-spacing", "max-height", "max-width", "min-height", "min-width", "outline-offset", "right", "top", "width"];
+  readonly time: readonly ["animation-delay", "animation-duration", "transition-delay", "transition-duration"];
+  readonly number: readonly ["fill-opacity", "flex-grow", "flex-shrink", "flood-opacity", "opacity", "order", "orphans", "stop-opacity", "stroke-opacity", "widows"];
+  readonly easing: readonly ["animation-timing-function", "transition-timing-function"];
+  readonly 'font-family': readonly ["font-family"];
+};
 /**
  * Semantic type label for a CSS variable, used to derive which CSS properties it can auto-complete as a value for.
  *
- * @remarks Accepts any known `VariableSemanticFamily` (e.g. `'color'`, `'length'`) or an arbitrary string. Known families are expanded to their associated CSS property list at registration time.
+ * @remarks Supported semantic families are `'color'`, `'length'`, `'time'`, `'number'`, `'easing'`, and `'font-family'`. Each expands to the CSS properties with a real autocomplete mapping at registration time.
  *
  * @example
  * ```ts
  * const type: VariableSemanticType = 'color'
  * ```
  */
-type VariableSemanticType = VariableSemanticFamily | UnionString;
+type VariableSemanticType = keyof typeof VARIABLE_SEMANTIC_TYPE_PROPERTIES;
 /**
  * Controls how a CSS variable participates in the autocomplete type surface.
  *
@@ -534,15 +538,28 @@ type VariablesDefinition = { [key in UnionString | ResolvedSelector]?: Variable
  * @example
  * ```ts
  * const config: VariablesConfig = {
- *   variables: { '--color-primary': '#3b82f6' },
+ *   colors: { '--color-primary': '#3b82f6' },
+ *   others: { '--shadow-elevated': '0 12px 40px rgb(0 0 0 / 0.12)' },
  *   pruneUnused: true,
  *   safeList: ['--color-primary'],
  * }
  * ```
  */
 interface VariablesConfig {
-  /** One or more variable definition objects to register. */
-  variables: Arrayable<VariablesDefinition>;
+  /** Color variables. These automatically infer `semanticType: 'color'`. */
+  colors?: Arrayable<VariablesDefinition>;
+  /** Length variables. These automatically infer `semanticType: 'length'`. */
+  lengths?: Arrayable<VariablesDefinition>;
+  /** Time variables. These automatically infer `semanticType: 'time'`. */
+  times?: Arrayable<VariablesDefinition>;
+  /** Number variables. These automatically infer `semanticType: 'number'`. */
+  numbers?: Arrayable<VariablesDefinition>;
+  /** Easing variables. These automatically infer `semanticType: 'easing'`. */
+  easings?: Arrayable<VariablesDefinition>;
+  /** Font-family variables. These automatically infer `semanticType: 'font-family'`. */
+  fontFamilies?: Arrayable<VariablesDefinition>;
+  /** Variables without a semantic bucket. These keep the default untyped autocomplete behaviour. */
+  others?: Arrayable<VariablesDefinition>;
   /**
    * Default pruning policy for variables that are not referenced by any atomic style or preflight.
    *

package/dist/index.mjs

@@ -2438,6 +2438,14 @@ const VARIABLE_SEMANTIC_FAMILY_PROPERTIES = {
 };
 //#endregion
 //#region src/internal/plugins/variables.ts
+const VARIABLE_SEMANTIC_TYPE_PROPERTIES = {
+	"color": VARIABLE_SEMANTIC_FAMILY_PROPERTIES.color,
+	"length": VARIABLE_SEMANTIC_FAMILY_PROPERTIES.length,
+	"time": VARIABLE_SEMANTIC_FAMILY_PROPERTIES.time,
+	"number": VARIABLE_SEMANTIC_FAMILY_PROPERTIES.number,
+	"easing": VARIABLE_SEMANTIC_FAMILY_PROPERTIES.easing,
+	"font-family": VARIABLE_SEMANTIC_FAMILY_PROPERTIES["font-family"]
+};
 /**
 * Built-in engine plugin that provides CSS custom properties (variables) with smart pruning and autocomplete integration.
 *
@@ -2458,7 +2466,7 @@ function variables() {
 		name: "core:variables",
 		rawConfigConfigured(config) {
 			resolveVariables = createResolveVariablesFn({ pruneUnused: config.variables?.pruneUnused });
-			rawVariables = [config.variables?.variables ?? []].flat();
+			rawVariables = normalizeVariablesConfig(config.variables);
 			safeSet = new Set(config.variables?.safeList ?? []);
 		},
 		configureEngine(engine) {
@@ -2526,13 +2534,69 @@ function variables() {
 		}
 	});
 }
-function createResolveVariablesFn({ pruneUnused: defaultPruneUnused = true } = {}) {
-	function isVariableScopeObject(value) {
-		return typeof value === "object" && value !== null && !Array.isArray(value);
+function normalizeVariablesConfig(config) {
+	if (config == null) return [];
+	const merged = {};
+	mergeVariablesBucket(merged, config.colors, "color");
+	mergeVariablesBucket(merged, config.lengths, "length");
+	mergeVariablesBucket(merged, config.times, "time");
+	mergeVariablesBucket(merged, config.numbers, "number");
+	mergeVariablesBucket(merged, config.easings, "easing");
+	mergeVariablesBucket(merged, config.fontFamilies, "font-family");
+	mergeVariablesBucket(merged, config.others);
+	return Object.keys(merged).length > 0 ? [merged] : [];
+}
+function mergeVariablesBucket(target, definitions, semanticType) {
+	if (definitions == null) return;
+	[definitions].flat().forEach((definition) => mergeVariablesDefinition(target, applyBucketSemanticType(definition, semanticType)));
+}
+function mergeVariablesDefinition(target, source) {
+	for (const [key, value] of Object.entries(source)) {
+		if (!key.startsWith("--") && isPlainObjectRecord(value) && isPlainObjectRecord(target[key])) {
+			mergeVariablesDefinition(target[key], value);
+			continue;
+		}
+		target[key] = value;
 	}
+	return target;
+}
+function applyBucketSemanticType(definition, semanticType) {
+	const result = {};
+	for (const [key, value] of Object.entries(definition)) {
+		if (key.startsWith("--")) {
+			if (semanticType == null) {
+				result[key] = value;
+				continue;
+			}
+			if (isPlainObjectRecord(value)) {
+				const variableValue = value;
+				result[key] = {
+					...variableValue,
+					semanticType: mergeSemanticTypes(semanticType, variableValue.semanticType)
+				};
+				continue;
+			}
+			result[key] = {
+				value,
+				semanticType
+			};
+			continue;
+		}
+		result[key] = isPlainObjectRecord(value) ? applyBucketSemanticType(value, semanticType) : value;
+	}
+	return result;
+}
+function mergeSemanticTypes(semanticType, existingSemanticType) {
+	const merged = Array.from(new Set([semanticType, ...existingSemanticType == null ? [] : [existingSemanticType].flat()]));
+	return merged.length === 1 ? merged[0] : merged;
+}
+function isPlainObjectRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function createResolveVariablesFn({ pruneUnused: defaultPruneUnused = true } = {}) {
 	function _resolveVariables(variables, levels, result) {
 		for (const [key, value] of Object.entries(variables)) if (key.startsWith("--")) {
-			const { value: varValue, semanticType, autocomplete = {}, pruneUnused = defaultPruneUnused } = typeof value === "object" && value !== null && !Array.isArray(value) ? value : { value };
+			const { value: varValue, semanticType, autocomplete = {}, pruneUnused = defaultPruneUnused } = isPlainObjectRecord(value) ? value : { value };
 			result.push({
 				name: key,
 				value: varValue,
@@ -2548,7 +2612,7 @@ function createResolveVariablesFn({ pruneUnused: defaultPruneUnused = true } = {
 				pruneUnused
 			});
 		} else {
-			if (!isVariableScopeObject(value)) {
+			if (!isPlainObjectRecord(value)) {
 				log.warn(`Invalid variables scope for selector "${key}". Expected a nested object, received ${typeof value}. Skipping.`);
 				continue;
 			}
@@ -2570,7 +2634,7 @@ function resolveAutocompleteValueTargets({ name, asValueOf, semanticType }) {
 		targets.add(target);
 	});
 	semanticTypes.forEach((family) => {
-		const properties = VARIABLE_SEMANTIC_FAMILY_PROPERTIES[family];
+		const properties = VARIABLE_SEMANTIC_TYPE_PROPERTIES[family];
 		if (properties != null) {
 			properties.forEach((property) => targets.add(property));
 			return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pikacss/core",
   "type": "module",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "author": "DevilTea <ch19980814@gmail.com>",
   "license": "MIT",
   "homepage": "https://pikacss.com",