@pandacss/token-dictionary 0.0.0-dev-20221121152823

package/dist/index.js

@@ -0,0 +1,694 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  TokenDictionary: () => TokenDictionary2
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/create-dictionary.ts
+var import_shared7 = require("@pandacss/shared");
+
+// src/dictionary.ts
+var import_shared3 = require("@pandacss/shared");
+var import_ts_pattern = require("ts-pattern");
+
+// src/token.ts
+var import_shared2 = require("@pandacss/shared");
+
+// src/utils.ts
+var import_shared = require("@pandacss/shared");
+var REFERENCE_REGEX = /(\$[^\s,]+\w)|({([^}]*)})/g;
+function getReferences(value) {
+  if (typeof value !== "string")
+    return [];
+  const matches = value.match(REFERENCE_REGEX);
+  if (!matches)
+    return [];
+  return matches.map((match2) => match2.replace(/[{}]/g, "")).map((value2) => value2.trim());
+}
+function hasReference(value) {
+  return REFERENCE_REGEX.test(value);
+}
+function mapToJson(map) {
+  const obj = {};
+  map.forEach((value, key) => {
+    if (value instanceof Map) {
+      obj[key] = Object.fromEntries(value);
+    } else {
+      obj[key] = value;
+    }
+  });
+  return obj;
+}
+var isToken = (value) => {
+  return (0, import_shared.isObject)(value) && "value" in value;
+};
+function assertTokenFormat(token) {
+  if (!isToken(token)) {
+    throw new Error(`Invalid token format: ${JSON.stringify(token)}`);
+  }
+}
+
+// src/token.ts
+var Token = class {
+  name;
+  value;
+  originalValue;
+  path;
+  type;
+  description;
+  extensions;
+  constructor(data) {
+    this.name = data.name;
+    this.value = data.value;
+    this.originalValue = data.value;
+    this.path = data.path ?? [];
+    if (data.type) {
+      this.type = data.type;
+    }
+    if (data.description) {
+      this.description = data.description;
+    }
+    this.extensions = data.extensions ?? {};
+    this.extensions.condition = data.extensions?.condition ?? "base";
+    this.setType();
+  }
+  get isConditional() {
+    return !!this.extensions?.conditions;
+  }
+  get hasReference() {
+    return !!this.extensions?.references;
+  }
+  get isComposite() {
+    return (0, import_shared2.isObject)(this.originalValue) || Array.isArray(this.originalValue);
+  }
+  expandReferences() {
+    if (!this.hasReference)
+      return this.value;
+    const references = this.extensions.references ?? {};
+    this.value = Object.keys(references).reduce((valueStr, key) => {
+      const referenceToken = references[key];
+      if (referenceToken.isConditional) {
+        return valueStr;
+      }
+      const value = referenceToken.expandReferences();
+      return valueStr.replace(`{${key}}`, value);
+    }, this.value);
+    delete this.extensions.references;
+    return this.value;
+  }
+  get isReference() {
+    return hasReference(this.originalValue);
+  }
+  get references() {
+    return getReferences(this.originalValue);
+  }
+  clone() {
+    return new Token({
+      name: this.name,
+      value: this.value,
+      type: this.type,
+      path: [...this.path],
+      description: this.description,
+      extensions: cloneDeep(this.extensions)
+    });
+  }
+  getConditionTokens() {
+    if (!this.isConditional)
+      return;
+    const conditions = this.extensions.conditions ?? {};
+    const conditionalTokens = Object.entries(conditions).filter(([key]) => key !== "base").map(([key, value]) => {
+      const token = this.clone();
+      token.value = value;
+      token.extensions.condition = key;
+      return token;
+    });
+    return conditionalTokens;
+  }
+  setExtensions(extensions) {
+    this.extensions = { ...this.extensions, ...extensions };
+    this.setType();
+    return this;
+  }
+  setType() {
+    if (this.type)
+      return;
+    if (this.extensions.category) {
+      this.type = TokenTypes[this.extensions.category];
+    }
+  }
+};
+function cloneDeep(value) {
+  if (value instanceof Token) {
+    return value.clone();
+  }
+  if (Array.isArray(value)) {
+    return value.map((child) => cloneDeep(child));
+  }
+  if (typeof value === "object" && value !== null) {
+    return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, cloneDeep(v)]));
+  }
+  return value;
+}
+var TokenTypes = {
+  colors: "color",
+  spacing: "dimension",
+  sizing: "dimension",
+  shadows: "shadow",
+  fonts: "fontFamily",
+  fontSizes: "fontSize",
+  fontWeights: "fontWeight",
+  letterSpacings: "letterSpacing",
+  durations: "duration",
+  transitions: "transition",
+  radii: "borderRadius",
+  gradients: "gradient",
+  easings: "cubicBezier",
+  borders: "border",
+  components: "cti"
+};
+
+// src/dictionary.ts
+var TokenDictionary = class {
+  allTokens = [];
+  prefix;
+  get allNames() {
+    return Array.from(new Set(this.allTokens.map((token) => token.name)));
+  }
+  constructor(options) {
+    const { tokens = {}, semanticTokens = {}, prefix } = options;
+    this.prefix = prefix;
+    (0, import_shared3.walkObject)(
+      tokens,
+      (token, path) => {
+        assertTokenFormat(token);
+        const category = path[0];
+        const name = path.join(".");
+        const node = new Token({ ...token, name, path });
+        node.setExtensions({
+          category,
+          prop: path.slice(1).join(".")
+        });
+        this.allTokens.push(node);
+      },
+      { stop: isToken }
+    );
+    (0, import_shared3.walkObject)(
+      semanticTokens,
+      (token, path) => {
+        assertTokenFormat(token);
+        const category = path[0];
+        const name = path.join(".");
+        const normalizedToken = (0, import_shared3.isString)(token.value) ? { value: { base: token.value } } : token;
+        const { value, ...restData } = normalizedToken;
+        const node = new Token({
+          ...restData,
+          name,
+          value: value.base || "",
+          path
+        });
+        node.setExtensions({
+          category,
+          conditions: value,
+          prop: path.slice(1).join(".")
+        });
+        this.allTokens.push(node);
+      },
+      { stop: isToken }
+    );
+  }
+  getByName = (0, import_shared3.memo)((name) => {
+    for (const token of this.allTokens) {
+      if (token.name === name)
+        return token;
+    }
+  });
+  transforms = /* @__PURE__ */ new Map();
+  registerTransform(...transforms2) {
+    transforms2.forEach((transform) => {
+      transform.type ||= "value";
+      transform.enforce ||= "pre";
+      this.transforms.set(transform.name, transform);
+    });
+    return this;
+  }
+  execTransform(name) {
+    const transform = this.transforms.get(name);
+    if (!transform)
+      return;
+    this.allTokens.forEach((token) => {
+      if (token.extensions.hasReference)
+        return;
+      if (typeof transform.match === "function" && !transform.match(token))
+        return;
+      const transformed = transform.transform(token, { prefix: this.prefix });
+      (0, import_ts_pattern.match)(transform).with({ type: "extensions" }, () => {
+        token.setExtensions(transformed);
+      }).with({ type: "value" }, () => {
+        token.value = transformed;
+        if (token.isComposite) {
+          token.originalValue = transformed;
+        }
+      }).otherwise(() => {
+        token[transform.type] = transformed;
+      });
+    });
+  }
+  transformTokens(enforce) {
+    this.transforms.forEach((transform) => {
+      if (transform.enforce === enforce) {
+        this.execTransform(transform.name);
+      }
+    });
+    return this;
+  }
+  middlewares = [];
+  registerMiddleware(...middlewares2) {
+    for (const middleware of middlewares2) {
+      middleware.enforce ||= "pre";
+      this.middlewares.push(middleware);
+    }
+    return this;
+  }
+  applyMiddlewares(enforce) {
+    this.middlewares.forEach((middleware) => {
+      if (middleware.enforce === enforce) {
+        middleware.transform(this, { prefix: this.prefix });
+      }
+    });
+  }
+  getReferences(value) {
+    const refs = getReferences(value);
+    return refs.map((ref) => this.getByName(ref)).filter(Boolean);
+  }
+  usesReference(value) {
+    if (!(0, import_shared3.isString)(value))
+      return false;
+    return this.getReferences(value).length > 0;
+  }
+  addReferences() {
+    this.allTokens.forEach((token) => {
+      if (!this.usesReference(token.value))
+        return;
+      const references = this.getReferences(token.value);
+      token.setExtensions({
+        references: references.reduce((object, reference) => {
+          object[reference.name] = reference;
+          return object;
+        }, {})
+      });
+    });
+    return this;
+  }
+  filter(pattern) {
+    const predicate = typeof pattern === "function" ? pattern : (0, import_ts_pattern.isMatching)(pattern);
+    return this.allTokens.filter(predicate);
+  }
+  addConditionalTokens() {
+    const tokens = [];
+    this.allTokens.forEach((token) => {
+      tokens.push(token);
+      const conditionalTokens = token.getConditionTokens();
+      if (conditionalTokens && conditionalTokens.length > 0) {
+        tokens.push(...conditionalTokens);
+      }
+    });
+    this.allTokens = tokens;
+    return this;
+  }
+  expandReferences() {
+    this.allTokens.forEach((token) => {
+      token.expandReferences();
+    });
+    return this;
+  }
+  build() {
+    this.applyMiddlewares("pre");
+    this.transformTokens("pre");
+    this.addConditionalTokens();
+    this.addReferences();
+    this.expandReferences();
+    this.applyMiddlewares("post");
+    this.transformTokens("post");
+  }
+  get isEmpty() {
+    return this.allTokens.length === 0;
+  }
+};
+
+// src/format.ts
+var import_shared4 = require("@pandacss/shared");
+var formats = {
+  groupByCondition(dictionary) {
+    const grouped = /* @__PURE__ */ new Map();
+    dictionary.allTokens.forEach((token) => {
+      const { condition } = token.extensions;
+      if (!condition)
+        return;
+      grouped.get(condition) || grouped.set(condition, /* @__PURE__ */ new Set());
+      grouped.set(condition, grouped.get(condition).add(token));
+    });
+    return grouped;
+  },
+  groupByPalette(dictionary) {
+    const grouped = /* @__PURE__ */ new Map();
+    dictionary.allTokens.forEach((token) => {
+      const { palette } = token.extensions;
+      if (!palette || token.extensions.isVirtual)
+        return;
+      grouped.get(palette) || grouped.set(palette, /* @__PURE__ */ new Map());
+      const virtualName = token.name.replace(palette, "palette");
+      const virtualToken = dictionary.getByName(virtualName);
+      if (!virtualToken)
+        return;
+      const virtualVar = virtualToken.extensions.var;
+      grouped.get(palette).set(virtualVar, token.extensions.varRef);
+    });
+    return grouped;
+  },
+  groupByCategory(dictionary) {
+    const grouped = /* @__PURE__ */ new Map();
+    dictionary.allTokens.forEach((token) => {
+      const { category, prop } = token.extensions;
+      if (!category)
+        return;
+      grouped.get(category) || grouped.set(category, /* @__PURE__ */ new Map());
+      grouped.set(category, grouped.get(category).set(prop, token));
+    });
+    return grouped;
+  },
+  getFlattenedValues(dictionary) {
+    const grouped = formats.groupByCategory(dictionary);
+    const result = /* @__PURE__ */ new Map();
+    grouped.forEach((tokens, category) => {
+      result.get(category) || result.set(category, /* @__PURE__ */ new Map());
+      tokens.forEach((token) => {
+        const { prop, varRef, isNegative } = token.extensions;
+        const value = isNegative ? token.isConditional ? token.originalValue : token.value : varRef;
+        result.set(category, result.get(category).set(prop, value));
+      });
+    });
+    return result;
+  },
+  getVars(dictionary) {
+    const grouped = formats.groupByCondition(dictionary);
+    const result = /* @__PURE__ */ new Map();
+    grouped.forEach((tokens, condition) => {
+      result.get(condition) || result.set(condition, /* @__PURE__ */ new Map());
+      tokens.forEach((token) => {
+        if (token.extensions.isNegative)
+          return;
+        result.get(condition).set(token.extensions.var, token.value);
+      });
+    });
+    return result;
+  },
+  createVarGetter(dictionary) {
+    const flatValues = mapToJson(formats.getFlattenedValues(dictionary));
+    return function getToken(path, fallback) {
+      return (0, import_shared4.getDotPath)(flatValues, path, fallback);
+    };
+  },
+  getPaletteValues(dictionary) {
+    const values = /* @__PURE__ */ new Set();
+    dictionary.allTokens.forEach((token) => {
+      const { palette } = token.extensions;
+      if (!palette || token.extensions.isVirtual)
+        return;
+      values.add(palette);
+    });
+    return values;
+  }
+};
+
+// src/middleware.ts
+var import_shared5 = require("@pandacss/shared");
+var addNegativeTokens = {
+  enforce: "pre",
+  transform(dictionary, { prefix }) {
+    const tokens = dictionary.filter({
+      extensions: { category: "spacing" }
+    });
+    tokens.forEach((token) => {
+      const originalPath = [...token.path];
+      const originalVar = (0, import_shared5.cssVar)(originalPath.join("-"), { prefix });
+      const node = token.clone();
+      node.setExtensions({
+        isNegative: true,
+        prop: `-${token.extensions.prop}`,
+        originalPath
+      });
+      node.value = import_shared5.calc.negate(originalVar);
+      const last = node.path.at(-1);
+      if (last != null) {
+        node.path[node.path.length - 1] = `-${last}`;
+      }
+      if (node.path) {
+        node.name = node.path.join(".");
+      }
+      dictionary.allTokens.push(node);
+    });
+  }
+};
+var addVirtualPalette = {
+  enforce: "post",
+  transform(dictionary) {
+    const tokens = dictionary.filter({
+      extensions: { category: "colors" }
+    });
+    const keys = /* @__PURE__ */ new Set();
+    const palettes = /* @__PURE__ */ new Map();
+    tokens.forEach((token) => {
+      const palette = token.extensions.palette;
+      if (!palette)
+        return;
+      const list = palettes.get(palette) || [];
+      keys.add(token.path.at(-1));
+      list.push(token);
+      palettes.set(palette, list);
+    });
+    keys.forEach((key) => {
+      const node = new Token({
+        name: `colors.palette.${key}`,
+        value: `{colors.palette.${key}}`,
+        path: ["colors", "palette", key]
+      });
+      node.setExtensions({
+        category: "colors",
+        prop: `palette.${key}`,
+        isVirtual: true
+      });
+      dictionary.allTokens.push(node);
+    });
+    dictionary.transformTokens("pre");
+  }
+};
+var removeEmptyTokens = {
+  enforce: "post",
+  transform(dictionary) {
+    dictionary.allTokens = dictionary.allTokens.filter((token) => token.value !== "");
+  }
+};
+var middlewares = [addNegativeTokens, addVirtualPalette, removeEmptyTokens];
+
+// src/transform.ts
+var import_shared6 = require("@pandacss/shared");
+var import_ts_pattern2 = require("ts-pattern");
+var isCompositeShadow = (0, import_ts_pattern2.isMatching)({
+  inset: import_ts_pattern2.P.optional(import_ts_pattern2.P.boolean),
+  offsetX: import_ts_pattern2.P.number,
+  offsetY: import_ts_pattern2.P.number,
+  blur: import_ts_pattern2.P.number,
+  spread: import_ts_pattern2.P.number,
+  color: import_ts_pattern2.P.string
+});
+var transformShadow = {
+  name: "tokens/shadow",
+  match: (token) => token.extensions.category === "shadows",
+  transform(token, { prefix }) {
+    if ((0, import_shared6.isString)(token.value)) {
+      return token.value;
+    }
+    if (Array.isArray(token.value)) {
+      return token.value.map((value) => this.transform({ value }, { prefix })).join(", ");
+    }
+    if (isCompositeShadow(token.value)) {
+      const { offsetX, offsetY, blur, spread, color, inset } = token.value;
+      return `${inset ? "inset " : ""}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`;
+    }
+    return token.value;
+  }
+};
+var isCompositeGradient = (0, import_ts_pattern2.isMatching)({
+  type: import_ts_pattern2.P.string,
+  placement: import_ts_pattern2.P.string,
+  stops: import_ts_pattern2.P.array({
+    color: import_ts_pattern2.P.string,
+    position: import_ts_pattern2.P.number
+  })
+});
+var transformGradient = {
+  name: "tokens/gradient",
+  match: (token) => token.extensions.category === "gradients",
+  transform(token) {
+    if ((0, import_shared6.isString)(token.value)) {
+      return token.value;
+    }
+    if (isCompositeGradient(token.value)) {
+      const { type, stops, placement } = token.value;
+      const rawStops = stops.map((stop) => {
+        const { color, position } = stop;
+        return `${color} ${position}px`;
+      });
+      return `${type}-gradient(${placement}, ${rawStops.join(", ")})`;
+    }
+    return token.value;
+  }
+};
+var transformFonts = {
+  name: "tokens/fonts",
+  match: (token) => token.extensions.category === "fonts",
+  transform(token) {
+    if (Array.isArray(token.value)) {
+      return token.value.join(", ");
+    }
+    return token.value;
+  }
+};
+var transformEasings = {
+  name: "tokens/easings",
+  match: (token) => token.extensions.category === "easings",
+  transform(token) {
+    if ((0, import_shared6.isString)(token.value)) {
+      return token.value;
+    }
+    return `cubic-bezier(${token.value.join(", ")})`;
+  }
+};
+var transformBorders = {
+  name: "tokens/borders",
+  match: (token) => token.extensions.category === "borders",
+  transform(token) {
+    if ((0, import_shared6.isString)(token.value)) {
+      return token.value;
+    }
+    const { width, style, color } = token.value;
+    return `${width}px ${style} ${color}`;
+  }
+};
+var addCssVariables = {
+  type: "extensions",
+  name: "tokens/css-var",
+  transform(token, { prefix }) {
+    const { isNegative, originalPath } = token.extensions;
+    const pathValue = isNegative ? originalPath : token.path;
+    const variable = (0, import_shared6.cssVar)(pathValue.join("-"), { prefix });
+    return {
+      var: variable.var,
+      varRef: variable.ref
+    };
+  }
+};
+var addConditionalCssVariables = {
+  enforce: "post",
+  name: "tokens/conditionals",
+  transform(token, { prefix }) {
+    const refs = getReferences(token.value);
+    if (!refs.length)
+      return token.value;
+    refs.forEach((ref) => {
+      const variable = (0, import_shared6.cssVar)(ref.split(".").join("-"), { prefix }).ref;
+      token.value = token.value.replace(`{${ref}}`, variable);
+    });
+    return token.value;
+  }
+};
+function getPaletteName(path) {
+  if (path.includes("colorPalette"))
+    return "";
+  const clone = [...path];
+  clone.pop();
+  clone.shift();
+  return clone.join(".");
+}
+var addPalette = {
+  type: "extensions",
+  name: "tokens/colors/palette",
+  match(token) {
+    return token.extensions.category === "colors";
+  },
+  transform(token) {
+    return { palette: getPaletteName(token.path) };
+  }
+};
+var transforms = [
+  transformShadow,
+  transformGradient,
+  transformFonts,
+  transformEasings,
+  transformBorders,
+  addCssVariables,
+  addConditionalCssVariables,
+  addPalette
+];
+
+// src/create-dictionary.ts
+var TokenDictionary2 = class extends TokenDictionary {
+  constructor(options) {
+    super(options);
+    this.registerTransform(...transforms);
+    this.registerMiddleware(...middlewares);
+    this.build();
+  }
+  get get() {
+    return formats.createVarGetter(this);
+  }
+  get conditionMap() {
+    return formats.groupByCondition(this);
+  }
+  get categoryMap() {
+    return formats.groupByCategory(this);
+  }
+  get values() {
+    return formats.getFlattenedValues(this);
+  }
+  get palettes() {
+    return (0, import_shared7.mapToJson)(formats.groupByPalette(this));
+  }
+  get vars() {
+    return formats.getVars(this);
+  }
+  getValue(path) {
+    const result = this.values.get(path);
+    if (result != null) {
+      return Object.fromEntries(result);
+    }
+  }
+  getTokenVar(path) {
+    const json = (0, import_shared7.mapToJson)(this.values);
+    return (0, import_shared7.getDotPath)(json, path);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TokenDictionary
+});