@tokenami/config 0.0.77 → 0.0.78--canary.391.13467326933.0

package/dist/index.cjs

@@ -1,11 +1,15 @@
 'use strict';
 
+var hash = require('@emotion/hash');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var hash__default = /*#__PURE__*/_interopDefault(hash);
+
 // src/config.ts
 function createConfig(config) {
   return config;
 }
-
-// src/common.ts
 var gridPropertyRegex = /--_grid/;
 var GridProperty = {
   safeParse: (input) => validate(gridPropertyRegex, input)
@@ -111,6 +115,16 @@ function getTokenValueParts(tokenValue2) {
 function getCSSPropertiesForAlias(alias, aliases) {
   return (aliases == null ? void 0 : aliases[alias]) || [alias];
 }
+function generateClassName(properties) {
+  const entries = Object.entries(properties).map(([property, value]) => [property, String(value)]).sort(([keyA], [keyB]) => keyA.localeCompare(keyB));
+  const str = JSON.stringify(entries);
+  return `tk-${hash__default.default(str)}`;
+}
+function createLonghandProperty(tokenProperty2, cssProperty) {
+  const parts = getTokenPropertySplit(tokenProperty2);
+  const aliasRegex = new RegExp(`${parts.alias}$`);
+  return tokenProperty2.replace(aliasRegex, cssProperty);
+}
 var escapeSpecialCharsRegex = /[&#.:;>~*[\]=,"'()+{}]/g;
 function parseProperty(str, options) {
   const { escapeSpecialChars = true } = options || {};
@@ -124,6 +138,16 @@ function stringifyProperty(property) {
 }
 var encodeColon = (str) => str.replace(/:/g, ";");
 var decodeColon = (str) => str.replace(/;/g, ":");
+function* iterateAliasProperties(styleEntries, config) {
+  for (const [key, value] of styleEntries) {
+    const tokenProperty2 = key;
+    const parts = getTokenPropertySplit(tokenProperty2);
+    const cssProperties = getCSSPropertiesForAlias(parts.alias, config.aliases);
+    const isCalc = typeof value === "number" && value !== 0;
+    yield [key, value, { isCalc, cssProperties }];
+  }
+}
+var calcProperty = (property) => property + "__calc";
 
 // src/shorthands.ts
 var shorthandsToLonghands = [
@@ -209,7 +233,10 @@ exports.TokenProperty = TokenProperty;
 exports.TokenValue = TokenValue;
 exports.VariantProperty = VariantProperty;
 exports.arbitraryValue = arbitraryValue;
+exports.calcProperty = calcProperty;
 exports.createConfig = createConfig;
+exports.createLonghandProperty = createLonghandProperty;
+exports.generateClassName = generateClassName;
 exports.getArbitrarySelector = getArbitrarySelector;
 exports.getCSSPropertiesForAlias = getCSSPropertiesForAlias;
 exports.getTokenPropertyName = getTokenPropertyName;
@@ -217,6 +244,7 @@ exports.getTokenPropertyParts = getTokenPropertyParts;
 exports.getTokenPropertySplit = getTokenPropertySplit;
 exports.getTokenValueParts = getTokenValueParts;
 exports.gridProperty = gridProperty;
+exports.iterateAliasProperties = iterateAliasProperties;
 exports.mapShorthandToLonghands = mapShorthandToLonghands;
 exports.parseProperty = parseProperty;
 exports.parsedTokenProperty = parsedTokenProperty;

package/dist/index.d.cts

@@ -110,11 +110,18 @@ declare function getTokenValueParts(tokenValue: TokenValue): {
     token: string;
 };
 declare function getCSSPropertiesForAlias(alias: string, aliases: Config['aliases']): string[];
+declare function generateClassName(properties: Record<string, any>): string;
+declare function createLonghandProperty(tokenProperty: TokenProperty, cssProperty: string): `--${string}`;
 declare function parseProperty<T extends string>(str: T, options?: {
     escapeSpecialChars?: boolean;
 }): T;
 declare function stringifyProperty<T extends string>(property: T): T;
+declare function iterateAliasProperties(styleEntries: [key: string, value: any][], config: Pick<Config, 'aliases'>): Generator<[string, any, {
+    isCalc: boolean;
+    cssProperties: string[];
+}]>;
+declare const calcProperty: (property: string) => `--${string}`;
 
 declare const mapShorthandToLonghands: Map<"flex" | "grid" | "all" | "border-block-color" | "border-block-style" | "border-block-width" | "border-inline-color" | "border-inline-style" | "border-inline-width" | "font-variant" | "animation" | "background" | "background-position" | "border" | "border-block" | "border-block-end" | "border-block-start" | "border-bottom" | "border-color" | "border-image" | "border-inline" | "border-inline-end" | "border-inline-start" | "border-left" | "border-radius" | "border-right" | "border-style" | "border-top" | "border-width" | "column-rule" | "columns" | "contain-intrinsic-size" | "container" | "flex-flow" | "font" | "gap" | "grid-area" | "grid-column" | "grid-row" | "grid-template" | "inset" | "inset-block" | "inset-inline" | "list-style" | "margin" | "margin-block" | "margin-inline" | "mask" | "mask-border" | "offset" | "outline" | "overflow" | "overscroll-behavior" | "padding" | "padding-block" | "padding-inline" | "place-content" | "place-items" | "place-self" | "scroll-margin" | "scroll-margin-block" | "scroll-margin-inline" | "scroll-padding" | "scroll-padding-block" | "scroll-padding-inline" | "scroll-timeline" | "text-decoration" | "text-emphasis" | "transition", string[]>;
 
-export { type Aliases, ArbitraryValue, type CSSProperties, type CSSProperty, type Config, GridProperty, GridValue, type Theme, type ThemeModes, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, getArbitrarySelector, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, mapShorthandToLonghands, parseProperty, parsedTokenProperty, parsedVariantProperty, stringifyProperty, tokenProperty, tokenValue, variantProperty };
+export { type Aliases, ArbitraryValue, type CSSProperties, type CSSProperty, type Config, GridProperty, GridValue, type Theme, type ThemeModes, TokenProperty, TokenValue, VariantProperty, arbitraryValue, calcProperty, createConfig, createLonghandProperty, generateClassName, getArbitrarySelector, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, iterateAliasProperties, mapShorthandToLonghands, parseProperty, parsedTokenProperty, parsedVariantProperty, stringifyProperty, tokenProperty, tokenValue, variantProperty };

package/dist/index.d.ts

@@ -110,11 +110,18 @@ declare function getTokenValueParts(tokenValue: TokenValue): {
     token: string;
 };
 declare function getCSSPropertiesForAlias(alias: string, aliases: Config['aliases']): string[];
+declare function generateClassName(properties: Record<string, any>): string;
+declare function createLonghandProperty(tokenProperty: TokenProperty, cssProperty: string): `--${string}`;
 declare function parseProperty<T extends string>(str: T, options?: {
     escapeSpecialChars?: boolean;
 }): T;
 declare function stringifyProperty<T extends string>(property: T): T;
+declare function iterateAliasProperties(styleEntries: [key: string, value: any][], config: Pick<Config, 'aliases'>): Generator<[string, any, {
+    isCalc: boolean;
+    cssProperties: string[];
+}]>;
+declare const calcProperty: (property: string) => `--${string}`;
 
 declare const mapShorthandToLonghands: Map<"flex" | "grid" | "all" | "border-block-color" | "border-block-style" | "border-block-width" | "border-inline-color" | "border-inline-style" | "border-inline-width" | "font-variant" | "animation" | "background" | "background-position" | "border" | "border-block" | "border-block-end" | "border-block-start" | "border-bottom" | "border-color" | "border-image" | "border-inline" | "border-inline-end" | "border-inline-start" | "border-left" | "border-radius" | "border-right" | "border-style" | "border-top" | "border-width" | "column-rule" | "columns" | "contain-intrinsic-size" | "container" | "flex-flow" | "font" | "gap" | "grid-area" | "grid-column" | "grid-row" | "grid-template" | "inset" | "inset-block" | "inset-inline" | "list-style" | "margin" | "margin-block" | "margin-inline" | "mask" | "mask-border" | "offset" | "outline" | "overflow" | "overscroll-behavior" | "padding" | "padding-block" | "padding-inline" | "place-content" | "place-items" | "place-self" | "scroll-margin" | "scroll-margin-block" | "scroll-margin-inline" | "scroll-padding" | "scroll-padding-block" | "scroll-padding-inline" | "scroll-timeline" | "text-decoration" | "text-emphasis" | "transition", string[]>;
 
-export { type Aliases, ArbitraryValue, type CSSProperties, type CSSProperty, type Config, GridProperty, GridValue, type Theme, type ThemeModes, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, getArbitrarySelector, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, mapShorthandToLonghands, parseProperty, parsedTokenProperty, parsedVariantProperty, stringifyProperty, tokenProperty, tokenValue, variantProperty };
+export { type Aliases, ArbitraryValue, type CSSProperties, type CSSProperty, type Config, GridProperty, GridValue, type Theme, type ThemeModes, TokenProperty, TokenValue, VariantProperty, arbitraryValue, calcProperty, createConfig, createLonghandProperty, generateClassName, getArbitrarySelector, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, iterateAliasProperties, mapShorthandToLonghands, parseProperty, parsedTokenProperty, parsedVariantProperty, stringifyProperty, tokenProperty, tokenValue, variantProperty };

package/dist/index.js

@@ -1,9 +1,9 @@
+import hash from '@emotion/hash';
+
 // src/config.ts
 function createConfig(config) {
   return config;
 }
-
-// src/common.ts
 var gridPropertyRegex = /--_grid/;
 var GridProperty = {
   safeParse: (input) => validate(gridPropertyRegex, input)
@@ -109,6 +109,16 @@ function getTokenValueParts(tokenValue2) {
 function getCSSPropertiesForAlias(alias, aliases) {
   return (aliases == null ? void 0 : aliases[alias]) || [alias];
 }
+function generateClassName(properties) {
+  const entries = Object.entries(properties).map(([property, value]) => [property, String(value)]).sort(([keyA], [keyB]) => keyA.localeCompare(keyB));
+  const str = JSON.stringify(entries);
+  return `tk-${hash(str)}`;
+}
+function createLonghandProperty(tokenProperty2, cssProperty) {
+  const parts = getTokenPropertySplit(tokenProperty2);
+  const aliasRegex = new RegExp(`${parts.alias}$`);
+  return tokenProperty2.replace(aliasRegex, cssProperty);
+}
 var escapeSpecialCharsRegex = /[&#.:;>~*[\]=,"'()+{}]/g;
 function parseProperty(str, options) {
   const { escapeSpecialChars = true } = options || {};
@@ -122,6 +132,16 @@ function stringifyProperty(property) {
 }
 var encodeColon = (str) => str.replace(/:/g, ";");
 var decodeColon = (str) => str.replace(/;/g, ":");
+function* iterateAliasProperties(styleEntries, config) {
+  for (const [key, value] of styleEntries) {
+    const tokenProperty2 = key;
+    const parts = getTokenPropertySplit(tokenProperty2);
+    const cssProperties = getCSSPropertiesForAlias(parts.alias, config.aliases);
+    const isCalc = typeof value === "number" && value !== 0;
+    yield [key, value, { isCalc, cssProperties }];
+  }
+}
+var calcProperty = (property) => property + "__calc";
 
 // src/shorthands.ts
 var shorthandsToLonghands = [
@@ -200,4 +220,4 @@ var replacedAmpersands = shorthandsToLonghands.map(
 );
 var mapShorthandToLonghands = new Map(replacedAmpersands);
 
-export { ArbitraryValue, GridProperty, GridValue, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, getArbitrarySelector, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, mapShorthandToLonghands, parseProperty, parsedTokenProperty, parsedVariantProperty, stringifyProperty, tokenProperty, tokenValue, variantProperty };
+export { ArbitraryValue, GridProperty, GridValue, TokenProperty, TokenValue, VariantProperty, arbitraryValue, calcProperty, createConfig, createLonghandProperty, generateClassName, getArbitrarySelector, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, iterateAliasProperties, mapShorthandToLonghands, parseProperty, parsedTokenProperty, parsedVariantProperty, stringifyProperty, tokenProperty, tokenValue, variantProperty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenami/config",
-  "version": "0.0.77",
+  "version": "0.0.78--canary.391.13467326933.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -32,11 +32,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@emotion/hash": "^0.9.2",
     "csstype": "^3.1.2"
   },
   "devDependencies": {
     "tsup": "^7.0.0",
     "typescript": "^5.1.3"
   },
-  "gitHead": "bab5d0c16edf10d173a93bc80e274e3e34cbe33d"
+  "gitHead": "3a94df9615df16ae83234c3cc9d153255167c5f2"
 }