@pandacss/token-dictionary 0.0.0-dev-20221121152823

package/dist/index.mjs

@@ -0,0 +1,667 @@
+// src/create-dictionary.ts
+import { getDotPath as getDotPath2, mapToJson as mapToJson2 } from "@pandacss/shared";
+
+// src/dictionary.ts
+import { isString, memo, walkObject } from "@pandacss/shared";
+import { isMatching, match } from "ts-pattern";
+
+// src/token.ts
+import { isObject as isObject2 } from "@pandacss/shared";
+
+// src/utils.ts
+import { isObject } from "@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 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 isObject2(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;
+    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 }
+    );
+    walkObject(
+      semanticTokens,
+      (token, path) => {
+        assertTokenFormat(token);
+        const category = path[0];
+        const name = path.join(".");
+        const normalizedToken = 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 = 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 });
+      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 (!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 : 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
+import { getDotPath } from "@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 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
+import { calc, cssVar } from "@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 = cssVar(originalPath.join("-"), { prefix });
+      const node = token.clone();
+      node.setExtensions({
+        isNegative: true,
+        prop: `-${token.extensions.prop}`,
+        originalPath
+      });
+      node.value = 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
+import { cssVar as cssVar2, isString as isString2 } from "@pandacss/shared";
+import { isMatching as isMatching2, P } from "ts-pattern";
+var isCompositeShadow = isMatching2({
+  inset: P.optional(P.boolean),
+  offsetX: P.number,
+  offsetY: P.number,
+  blur: P.number,
+  spread: P.number,
+  color: P.string
+});
+var transformShadow = {
+  name: "tokens/shadow",
+  match: (token) => token.extensions.category === "shadows",
+  transform(token, { prefix }) {
+    if (isString2(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 = isMatching2({
+  type: P.string,
+  placement: P.string,
+  stops: P.array({
+    color: P.string,
+    position: P.number
+  })
+});
+var transformGradient = {
+  name: "tokens/gradient",
+  match: (token) => token.extensions.category === "gradients",
+  transform(token) {
+    if (isString2(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 (isString2(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 (isString2(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 = cssVar2(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 = cssVar2(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 mapToJson2(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 = mapToJson2(this.values);
+    return getDotPath2(json, path);
+  }
+};
+export {
+  TokenDictionary2 as TokenDictionary
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@pandacss/token-dictionary",
+  "version": "0.0.0-dev-20221121152823",
+  "description": "Common error messages for css panda",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "author": "Segun Adebayo <joseshegs@gmail.com>",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "ts-pattern": "4.0.6",
+    "@pandacss/shared": "0.0.0-dev-20221121152823"
+  },
+  "devDependencies": {
+    "@pandacss/fixture": "0.0.0-dev-20221121152823"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "build-fast": "tsup src/index.ts --format=esm,cjs --no-dts",
+    "dev": "pnpm build-fast --watch"
+  }
+}