@telegraph/style-engine 0.3.2 → 0.3.3

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\ntype Axis = \"x\" | \"y\" | \"both\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  axis?: Axis;\n};\n\n// Supported pseudo-class states for the object syntax\n// Prefixed with underscore to avoid collisions with native HTML attributes\n// (e.g. `disabled`) and common component props (e.g. `active`).\nexport const PSEUDO_STATES = [\n  \"_hover\",\n  \"_focus\",\n  \"_active\",\n  \"_focusWithin\",\n  \"_disabled\",\n] as const;\n\nexport type PseudoState = (typeof PSEUDO_STATES)[number];\n\n// Maps pseudo state names to CSS variable prefixes\nconst PSEUDO_CSS_PREFIX: Record<PseudoState, string> = {\n  _hover: \"hover\",\n  _focus: \"focus\",\n  _active: \"active\",\n  _focusWithin: \"focus-within\",\n  _disabled: \"disabled\",\n};\n\n/**\n * Adds pseudo-class variant props to a style props type.\n *\n * Given a base style props type, this creates a new type that also\n * accepts `_hover`, `_focus`, `_active`, `_focusWithin`, and `_disabled`\n * props as objects containing any of the base style props.\n *\n * Prefixed with underscore to avoid collisions with native HTML attributes\n * (e.g. `disabled`) and common component props (e.g. `active`).\n *\n * @example\n * type BoxStyle = { bg: ColorToken; p: SpacingToken };\n * type BoxStyleWithPseudo = WithPseudo<BoxStyle>;\n * // Allows: { bg: \"gray-2\", _hover: { bg: \"gray-3\" }, _focus: { p: \"4\" } }\n */\nexport type WithPseudo<Props> = Props & {\n  _hover?: Partial<Props>;\n  _focus?: Partial<Props>;\n  _active?: Partial<Props>;\n  _focusWithin?: Partial<Props>;\n  _disabled?: Partial<Props>;\n};\n\n// Helper type to create negative spacing values\n// This distributes over union types for proper type expansion\nexport type NegativeSpacing<T extends string | number | symbol> =\n  T extends string ? `-${T}` : never;\n\n// Type that allows both positive and negative spacing values for a given token type\n// Using direct template literal for better TypeScript inference and autocomplete\nexport type WithNegativeSpacing<T extends string | number | symbol> =\n  T extends string ? T | `-${T}` : T;\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// Helper function to parse directional values (handles calc() expressions)\nconst parseDirectionalValues = (\n  value: string,\n): [string, string, string, string] => {\n  const matches: string[] = [];\n  let current = \"\";\n  let depth = 0;\n\n  for (let i = 0; i < value.length; i++) {\n    const char = value[i];\n\n    if (char === \"(\") {\n      depth++;\n      current += char;\n    } else if (char === \")\") {\n      depth--;\n      current += char;\n    } else if (char === \" \" && depth === 0) {\n      // Space at depth 0 means we're between values\n      if (current) {\n        matches.push(current);\n        current = \"\";\n      }\n    } else {\n      current += char;\n    }\n  }\n\n  // Push the last value\n  if (current) {\n    matches.push(current);\n  }\n\n  // Ensure we always have 4 values\n  while (matches.length < 4) {\n    matches.push(\"0\");\n  }\n\n  return [\n    matches[0] || \"0\",\n    matches[1] || \"0\",\n    matches[2] || \"0\",\n    matches[3] || \"0\",\n  ];\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] =\n    parseDirectionalValues(currentValueOfCssVar);\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\ntype ApplyAxisValuesProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  axis: Axis;\n};\n\nconst applyAxisValues = ({\n  currentValueOfCssVar = \"visible visible\",\n  value,\n  axis,\n}: ApplyAxisValuesProps) => {\n  const [x, y] = currentValueOfCssVar.split(\" \");\n\n  // If the axis is x, we need to set the x value and keep the y value.\n  if (axis === \"x\") {\n    return `${value} ${y}`;\n  }\n\n  // If the axis is y, we need to set the y value and keep the x value.\n  if (axis === \"y\") {\n    return `${x} ${value}`;\n  }\n\n  // If the axis is both, we need to set the x and y values.\n  return `${value} ${value}`;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\n// Resolves a single prop value against its matching CssVarProp definition.\n// Returns the mapped CSS variable value string, handling negative spacing.\nconst resolveValue = (\n  matchingCssVar: CssVarProp,\n  propValue: string,\n): string => {\n  const isNegative = typeof propValue === \"string\" && propValue.startsWith(\"-\");\n\n  if (isNegative) {\n    const positiveValue = propValue.slice(1);\n    const positiveVar = matchingCssVar.value.replace(\"VARIABLE\", positiveValue);\n    return `calc(-1 * ${positiveVar})`;\n  }\n\n  return matchingCssVar.value.replace(\"VARIABLE\", propValue);\n};\n\n// Applies a resolved CSS variable value to the styleProp object,\n// handling directional and axis properties.\nconst applyCssVar = <CssVars extends CssVarsPropObject<CssVars>>(\n  styleProp: StyleProp<CssVars>,\n  matchingCssVar: CssVarProp,\n  mappedValue: string,\n  cssVarNameOverride?: string,\n): StyleProp<CssVars> => {\n  const cssVarName = (cssVarNameOverride ??\n    matchingCssVar.cssVar) as keyof StyleProp<CssVars>;\n\n  if (matchingCssVar.direction) {\n    const currentValueOfCssVar = styleProp?.[cssVarName];\n    const directionalValue = applyDirectionalValues({\n      currentValueOfCssVar,\n      value: mappedValue,\n      direction: matchingCssVar.direction,\n    });\n    return { ...styleProp, [cssVarName]: directionalValue };\n  }\n\n  if (matchingCssVar.axis) {\n    const currentValueOfCssVar = styleProp?.[cssVarName];\n    const axisValue = applyAxisValues({\n      currentValueOfCssVar,\n      value: mappedValue,\n      axis: matchingCssVar.axis,\n    });\n    return { ...styleProp, [cssVarName]: axisValue };\n  }\n\n  return { ...styleProp, [cssVarName]: mappedValue };\n};\n\n// Creates a state-prefixed CSS variable name from a base CSS variable.\n// e.g. (\"--background-color\", \"hover\") => \"--hover--background-color\"\nconst createPseudoCssVarName = (\n  baseCssVar: string,\n  pseudoState: PseudoState,\n): string => {\n  const prefix = PSEUDO_CSS_PREFIX[pseudoState];\n  const baseName = baseCssVar.replace(/^--/, \"\");\n  return `--${prefix}--${baseName}`;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n\n    // Check if this is a pseudo-class object prop (hover, focus, active, etc.)\n    if (\n      PSEUDO_STATES.includes(_key as PseudoState) &&\n      typeof props[key] === \"object\" &&\n      props[key] !== null\n    ) {\n      const pseudoState = _key as PseudoState;\n      const pseudoProps = props[key] as Record<string, string | undefined>;\n      const unmatchedPseudoProps: Record<string, string> = {};\n\n      Object.keys(pseudoProps).forEach((pseudoPropKey) => {\n        const propValue = pseudoProps[pseudoPropKey];\n        if (!propValue) return;\n\n        const cssVarsKey = pseudoPropKey as unknown as keyof typeof cssVars;\n        const matchingCssVar = cssVars?.[cssVarsKey];\n\n        if (!matchingCssVar) {\n          // Collect unmatched pseudo props to pass through to otherProps\n          unmatchedPseudoProps[pseudoPropKey] = propValue;\n          return;\n        }\n\n        const mappedValue = resolveValue(matchingCssVar, propValue);\n        const pseudoCssVarName = createPseudoCssVarName(\n          matchingCssVar.cssVar,\n          pseudoState,\n        );\n\n        styleProp = applyCssVar(\n          styleProp,\n          matchingCssVar,\n          mappedValue,\n          pseudoCssVarName,\n        );\n      });\n\n      // Pass through any unmatched pseudo props so downstream components\n      // can process them (e.g. Button passes hover.backgroundColor to Box)\n      if (Object.keys(unmatchedPseudoProps).length > 0) {\n        const existingPseudo =\n          (otherProps as Record<string, unknown>)[_key] || {};\n        Object.assign(otherProps, {\n          [_key]: { ...existingPseudo, ...unmatchedPseudoProps },\n        });\n      }\n\n      // If any pseudo sub-props were matched against cssVars at this level,\n      // mark as interactive so the component adds the scoping class.\n      // This prevents pseudo-class CSS rules from cascading into child elements.\n      if (\n        Object.keys(pseudoProps).length >\n        Object.keys(unmatchedPseudoProps).length\n      ) {\n        interactive = true;\n      }\n\n      return;\n    }\n\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    const mappedValueOfCssVar = resolveValue(matchingCssVar, matchingPropValue);\n\n    styleProp = applyCssVar(styleProp, matchingCssVar, mappedValueOfCssVar);\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["PSEUDO_STATES","PSEUDO_CSS_PREFIX","parseDirectionalValues","value","matches","current","depth","i","char","applyDirectionalValues","currentValueOfCssVar","direction","top","right","bottom","left","newValues","applyAxisValues","axis","x","y","resolveValue","matchingCssVar","propValue","positiveValue","applyCssVar","styleProp","mappedValue","cssVarNameOverride","cssVarName","directionalValue","axisValue","createPseudoCssVarName","baseCssVar","pseudoState","prefix","baseName","getStyleProp","params","cssVars","style","props","otherProps","interactive","_key","key","pseudoProps","unmatchedPseudoProps","pseudoPropKey","cssVarsKey","pseudoCssVarName","existingPseudo","matchingPropValue","mappedValueOfCssVar","useStyleEngine","React"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../tokens/dist/json/tokens.json","../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["{\"border-style\":{\"solid\":\"var(--tgph-border-style-solid)\",\"dashed\":\"var(--tgph-border-style-dashed)\"},\"color\":{\"transparent\":\"var(--tgph-transparent)\",\"white\":\"var(--tgph-white)\",\"black\":\"var(--tgph-black)\",\"surface-1\":\"var(--tgph-surface-1)\",\"surface-2\":\"var(--tgph-surface-2)\",\"surface-3\":\"var(--tgph-surface-3)\",\"alpha-white-1\":\"var(--tgph-alpha-white-1)\",\"alpha-white-2\":\"var(--tgph-alpha-white-2)\",\"alpha-white-3\":\"var(--tgph-alpha-white-3)\",\"alpha-white-4\":\"var(--tgph-alpha-white-4)\",\"alpha-white-5\":\"var(--tgph-alpha-white-5)\",\"alpha-white-6\":\"var(--tgph-alpha-white-6)\",\"alpha-white-7\":\"var(--tgph-alpha-white-7)\",\"alpha-white-8\":\"var(--tgph-alpha-white-8)\",\"alpha-white-9\":\"var(--tgph-alpha-white-9)\",\"alpha-white-10\":\"var(--tgph-alpha-white-10)\",\"alpha-white-11\":\"var(--tgph-alpha-white-11)\",\"alpha-white-12\":\"var(--tgph-alpha-white-12)\",\"alpha-black-1\":\"var(--tgph-alpha-black-1)\",\"alpha-black-2\":\"var(--tgph-alpha-black-2)\",\"alpha-black-3\":\"var(--tgph-alpha-black-3)\",\"alpha-black-4\":\"var(--tgph-alpha-black-4)\",\"alpha-black-5\":\"var(--tgph-alpha-black-5)\",\"alpha-black-6\":\"var(--tgph-alpha-black-6)\",\"alpha-black-7\":\"var(--tgph-alpha-black-7)\",\"alpha-black-8\":\"var(--tgph-alpha-black-8)\",\"alpha-black-9\":\"var(--tgph-alpha-black-9)\",\"alpha-black-10\":\"var(--tgph-alpha-black-10)\",\"alpha-black-11\":\"var(--tgph-alpha-black-11)\",\"alpha-black-12\":\"var(--tgph-alpha-black-12)\",\"gray-1\":\"var(--tgph-gray-1)\",\"gray-2\":\"var(--tgph-gray-2)\",\"gray-3\":\"var(--tgph-gray-3)\",\"gray-4\":\"var(--tgph-gray-4)\",\"gray-5\":\"var(--tgph-gray-5)\",\"gray-6\":\"var(--tgph-gray-6)\",\"gray-7\":\"var(--tgph-gray-7)\",\"gray-8\":\"var(--tgph-gray-8)\",\"gray-9\":\"var(--tgph-gray-9)\",\"gray-10\":\"var(--tgph-gray-10)\",\"gray-11\":\"var(--tgph-gray-11)\",\"gray-12\":\"var(--tgph-gray-12)\",\"beige-1\":\"var(--tgph-beige-1)\",\"beige-2\":\"var(--tgph-beige-2)\",\"beige-3\":\"var(--tgph-beige-3)\",\"beige-4\":\"var(--tgph-beige-4)\",\"beige-5\":\"var(--tgph-beige-5)\",\"beige-6\":\"var(--tgph-beige-6)\",\"beige-7\":\"var(--tgph-beige-7)\",\"beige-8\":\"var(--tgph-beige-8)\",\"beige-9\":\"var(--tgph-beige-9)\",\"beige-10\":\"var(--tgph-beige-10)\",\"beige-11\":\"var(--tgph-beige-11)\",\"beige-12\":\"var(--tgph-beige-12)\",\"accent-1\":\"var(--tgph-accent-1)\",\"accent-2\":\"var(--tgph-accent-2)\",\"accent-3\":\"var(--tgph-accent-3)\",\"accent-4\":\"var(--tgph-accent-4)\",\"accent-5\":\"var(--tgph-accent-5)\",\"accent-6\":\"var(--tgph-accent-6)\",\"accent-7\":\"var(--tgph-accent-7)\",\"accent-8\":\"var(--tgph-accent-8)\",\"accent-9\":\"var(--tgph-accent-9)\",\"accent-10\":\"var(--tgph-accent-10)\",\"accent-11\":\"var(--tgph-accent-11)\",\"accent-12\":\"var(--tgph-accent-12)\",\"green-1\":\"var(--tgph-green-1)\",\"green-2\":\"var(--tgph-green-2)\",\"green-3\":\"var(--tgph-green-3)\",\"green-4\":\"var(--tgph-green-4)\",\"green-5\":\"var(--tgph-green-5)\",\"green-6\":\"var(--tgph-green-6)\",\"green-7\":\"var(--tgph-green-7)\",\"green-8\":\"var(--tgph-green-8)\",\"green-9\":\"var(--tgph-green-9)\",\"green-10\":\"var(--tgph-green-10)\",\"green-11\":\"var(--tgph-green-11)\",\"green-12\":\"var(--tgph-green-12)\",\"yellow-1\":\"var(--tgph-yellow-1)\",\"yellow-2\":\"var(--tgph-yellow-2)\",\"yellow-3\":\"var(--tgph-yellow-3)\",\"yellow-4\":\"var(--tgph-yellow-4)\",\"yellow-5\":\"var(--tgph-yellow-5)\",\"yellow-6\":\"var(--tgph-yellow-6)\",\"yellow-7\":\"var(--tgph-yellow-7)\",\"yellow-8\":\"var(--tgph-yellow-8)\",\"yellow-9\":\"var(--tgph-yellow-9)\",\"yellow-10\":\"var(--tgph-yellow-10)\",\"yellow-11\":\"var(--tgph-yellow-11)\",\"yellow-12\":\"var(--tgph-yellow-12)\",\"blue-1\":\"var(--tgph-blue-1)\",\"blue-2\":\"var(--tgph-blue-2)\",\"blue-3\":\"var(--tgph-blue-3)\",\"blue-4\":\"var(--tgph-blue-4)\",\"blue-5\":\"var(--tgph-blue-5)\",\"blue-6\":\"var(--tgph-blue-6)\",\"blue-7\":\"var(--tgph-blue-7)\",\"blue-8\":\"var(--tgph-blue-8)\",\"blue-9\":\"var(--tgph-blue-9)\",\"blue-10\":\"var(--tgph-blue-10)\",\"blue-11\":\"var(--tgph-blue-11)\",\"blue-12\":\"var(--tgph-blue-12)\",\"red-1\":\"var(--tgph-red-1)\",\"red-2\":\"var(--tgph-red-2)\",\"red-3\":\"var(--tgph-red-3)\",\"red-4\":\"var(--tgph-red-4)\",\"red-5\":\"var(--tgph-red-5)\",\"red-6\":\"var(--tgph-red-6)\",\"red-7\":\"var(--tgph-red-7)\",\"red-8\":\"var(--tgph-red-8)\",\"red-9\":\"var(--tgph-red-9)\",\"red-10\":\"var(--tgph-red-10)\",\"red-11\":\"var(--tgph-red-11)\",\"red-12\":\"var(--tgph-red-12)\",\"purple-1\":\"var(--tgph-purple-1)\",\"purple-2\":\"var(--tgph-purple-2)\",\"purple-3\":\"var(--tgph-purple-3)\",\"purple-4\":\"var(--tgph-purple-4)\",\"purple-5\":\"var(--tgph-purple-5)\",\"purple-6\":\"var(--tgph-purple-6)\",\"purple-7\":\"var(--tgph-purple-7)\",\"purple-8\":\"var(--tgph-purple-8)\",\"purple-9\":\"var(--tgph-purple-9)\",\"purple-10\":\"var(--tgph-purple-10)\",\"purple-11\":\"var(--tgph-purple-11)\",\"purple-12\":\"var(--tgph-purple-12)\"},\"rounded\":{\"0\":\"var(--tgph-rounded-0)\",\"1\":\"var(--tgph-rounded-1)\",\"2\":\"var(--tgph-rounded-2)\",\"3\":\"var(--tgph-rounded-3)\",\"4\":\"var(--tgph-rounded-4)\",\"5\":\"var(--tgph-rounded-5)\",\"6\":\"var(--tgph-rounded-6)\",\"full\":\"var(--tgph-rounded-full)\"},\"shadow\":{\"0\":\"var(--tgph-shadow-0)\",\"1\":\"var(--tgph-shadow-1)\",\"2\":\"var(--tgph-shadow-2)\",\"3\":\"var(--tgph-shadow-3)\",\"inner\":\"var(--tgph-shadow-inner)\"},\"spacing\":{\"0\":\"var(--tgph-spacing-0)\",\"1\":\"var(--tgph-spacing-1)\",\"2\":\"var(--tgph-spacing-2)\",\"3\":\"var(--tgph-spacing-3)\",\"4\":\"var(--tgph-spacing-4)\",\"5\":\"var(--tgph-spacing-5)\",\"6\":\"var(--tgph-spacing-6)\",\"7\":\"var(--tgph-spacing-7)\",\"8\":\"var(--tgph-spacing-8)\",\"9\":\"var(--tgph-spacing-9)\",\"10\":\"var(--tgph-spacing-10)\",\"11\":\"var(--tgph-spacing-11)\",\"12\":\"var(--tgph-spacing-12)\",\"14\":\"var(--tgph-spacing-14)\",\"16\":\"var(--tgph-spacing-16)\",\"20\":\"var(--tgph-spacing-20)\",\"24\":\"var(--tgph-spacing-24)\",\"28\":\"var(--tgph-spacing-28)\",\"32\":\"var(--tgph-spacing-32)\",\"36\":\"var(--tgph-spacing-36)\",\"40\":\"var(--tgph-spacing-40)\",\"44\":\"var(--tgph-spacing-44)\",\"48\":\"var(--tgph-spacing-48)\",\"52\":\"var(--tgph-spacing-52)\",\"56\":\"var(--tgph-spacing-56)\",\"60\":\"var(--tgph-spacing-60)\",\"64\":\"var(--tgph-spacing-64)\",\"72\":\"var(--tgph-spacing-72)\",\"80\":\"var(--tgph-spacing-80)\",\"96\":\"var(--tgph-spacing-96)\",\"120\":\"var(--tgph-spacing-120)\",\"140\":\"var(--tgph-spacing-140)\",\"160\":\"var(--tgph-spacing-160)\",\"px\":\"var(--tgph-spacing-px)\",\"0_5\":\"var(--tgph-spacing-0_5)\",\"1_5\":\"var(--tgph-spacing-1_5)\",\"2_5\":\"var(--tgph-spacing-2_5)\",\"3_5\":\"var(--tgph-spacing-3_5)\",\"full\":\"var(--tgph-spacing-full)\",\"auto\":\"var(--tgph-spacing-auto)\"},\"family\":{\"sans\":\"var(--tgph-family-sans)\",\"mono\":\"var(--tgph-family-mono)\"},\"leading\":{\"0\":\"var(--tgph-leading-0)\",\"1\":\"var(--tgph-leading-1)\",\"2\":\"var(--tgph-leading-2)\",\"3\":\"var(--tgph-leading-3)\",\"4\":\"var(--tgph-leading-4)\",\"5\":\"var(--tgph-leading-5)\",\"6\":\"var(--tgph-leading-6)\",\"7\":\"var(--tgph-leading-7)\",\"8\":\"var(--tgph-leading-8)\",\"9\":\"var(--tgph-leading-9)\",\"code-0\":\"var(--tgph-leading-code-0)\",\"code-1\":\"var(--tgph-leading-code-1)\",\"code-2\":\"var(--tgph-leading-code-2)\",\"code-3\":\"var(--tgph-leading-code-3)\",\"code-4\":\"var(--tgph-leading-code-4)\",\"code-5\":\"var(--tgph-leading-code-5)\",\"code-6\":\"var(--tgph-leading-code-6)\",\"code-7\":\"var(--tgph-leading-code-7)\",\"code-8\":\"var(--tgph-leading-code-8)\",\"code-9\":\"var(--tgph-leading-code-9)\"},\"tracking\":{\"0\":\"var(--tgph-tracking-0)\",\"1\":\"var(--tgph-tracking-1)\",\"2\":\"var(--tgph-tracking-2)\",\"3\":\"var(--tgph-tracking-3)\",\"4\":\"var(--tgph-tracking-4)\",\"5\":\"var(--tgph-tracking-5)\",\"6\":\"var(--tgph-tracking-6)\",\"7\":\"var(--tgph-tracking-7)\",\"8\":\"var(--tgph-tracking-8)\",\"9\":\"var(--tgph-tracking-9)\"},\"text\":{\"0\":\"var(--tgph-text-0)\",\"1\":\"var(--tgph-text-1)\",\"2\":\"var(--tgph-text-2)\",\"3\":\"var(--tgph-text-3)\",\"4\":\"var(--tgph-text-4)\",\"5\":\"var(--tgph-text-5)\",\"6\":\"var(--tgph-text-6)\",\"7\":\"var(--tgph-text-7)\",\"8\":\"var(--tgph-text-8)\",\"9\":\"var(--tgph-text-9)\",\"code-0\":\"var(--tgph-text-code-0)\",\"code-1\":\"var(--tgph-text-code-1)\",\"code-2\":\"var(--tgph-text-code-2)\",\"code-4\":\"var(--tgph-text-code-4)\",\"code-5\":\"var(--tgph-text-code-5)\",\"code-6\":\"var(--tgph-text-code-6)\",\"code-7\":\"var(--tgph-text-code-7)\",\"code-8\":\"var(--tgph-text-code-8)\",\"code-9\":\"var(--tgph-text-code-9)\"},\"weight\":{\"regular\":\"var(--tgph-weight-regular)\",\"medium\":\"var(--tgph-weight-medium)\",\"semi-bold\":\"var(--tgph-weight-semi-bold)\"},\"breakpoint\":{\"sm\":\"var(--tgph-breakpoint-sm)\",\"md\":\"var(--tgph-breakpoint-md)\",\"lg\":\"var(--tgph-breakpoint-lg)\",\"xl\":\"var(--tgph-breakpoint-xl)\",\"2xl\":\"var(--tgph-breakpoint-2xl)\"},\"zIndex\":{\"hidden\":\"var(--tgph-zIndex-hidden)\",\"base\":\"var(--tgph-zIndex-base)\",\"auto\":\"var(--tgph-zIndex-auto)\",\"dropdown\":\"var(--tgph-zIndex-dropdown)\",\"sticky\":\"var(--tgph-zIndex-sticky)\",\"banner\":\"var(--tgph-zIndex-banner)\",\"overlay\":\"var(--tgph-zIndex-overlay)\",\"modal\":\"var(--tgph-zIndex-modal)\",\"popover\":\"var(--tgph-zIndex-popover)\",\"skipLink\":\"var(--tgph-zIndex-skipLink)\",\"toast\":\"var(--tgph-zIndex-toast)\",\"tooltip\":\"var(--tgph-zIndex-tooltip)\"}}","type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\ntype Axis = \"x\" | \"y\" | \"both\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  axis?: Axis;\n};\n\n// Supported pseudo-class states for the object syntax\n// Prefixed with underscore to avoid collisions with native HTML attributes\n// (e.g. `disabled`) and common component props (e.g. `active`).\nexport const PSEUDO_STATES = [\n  \"_hover\",\n  \"_focus\",\n  \"_active\",\n  \"_focusWithin\",\n  \"_disabled\",\n] as const;\n\nexport type PseudoState = (typeof PSEUDO_STATES)[number];\n\n// Maps pseudo state names to CSS variable prefixes\nconst PSEUDO_CSS_PREFIX: Record<PseudoState, string> = {\n  _hover: \"hover\",\n  _focus: \"focus\",\n  _active: \"active\",\n  _focusWithin: \"focus-within\",\n  _disabled: \"disabled\",\n};\n\n/**\n * Adds pseudo-class variant props to a style props type.\n *\n * Given a base style props type, this creates a new type that also\n * accepts `_hover`, `_focus`, `_active`, `_focusWithin`, and `_disabled`\n * props as objects containing any of the base style props.\n *\n * Prefixed with underscore to avoid collisions with native HTML attributes\n * (e.g. `disabled`) and common component props (e.g. `active`).\n *\n * @example\n * type BoxStyle = { bg: ColorToken; p: SpacingToken };\n * type BoxStyleWithPseudo = WithPseudo<BoxStyle>;\n * // Allows: { bg: \"gray-2\", _hover: { bg: \"gray-3\" }, _focus: { p: \"4\" } }\n */\nexport type WithPseudo<Props> = Props & {\n  _hover?: Partial<Props>;\n  _focus?: Partial<Props>;\n  _active?: Partial<Props>;\n  _focusWithin?: Partial<Props>;\n  _disabled?: Partial<Props>;\n};\n\n// Helper type to create negative spacing values\n// This distributes over union types for proper type expansion\nexport type NegativeSpacing<T extends string | number | symbol> =\n  T extends string ? `-${T}` : never;\n\n// Type that allows both positive and negative spacing values for a given token type\n// Using direct template literal for better TypeScript inference and autocomplete\nexport type WithNegativeSpacing<T extends string | number | symbol> =\n  T extends string ? T | `-${T}` : T;\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// Helper function to parse directional values (handles calc() expressions)\nconst parseDirectionalValues = (\n  value: string,\n): [string, string, string, string] => {\n  const matches: string[] = [];\n  let current = \"\";\n  let depth = 0;\n\n  for (let i = 0; i < value.length; i++) {\n    const char = value[i];\n\n    if (char === \"(\") {\n      depth++;\n      current += char;\n    } else if (char === \")\") {\n      depth--;\n      current += char;\n    } else if (char === \" \" && depth === 0) {\n      // Space at depth 0 means we're between values\n      if (current) {\n        matches.push(current);\n        current = \"\";\n      }\n    } else {\n      current += char;\n    }\n  }\n\n  // Push the last value\n  if (current) {\n    matches.push(current);\n  }\n\n  // Ensure we always have 4 values\n  while (matches.length < 4) {\n    matches.push(\"0\");\n  }\n\n  return [\n    matches[0] || \"0\",\n    matches[1] || \"0\",\n    matches[2] || \"0\",\n    matches[3] || \"0\",\n  ];\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] =\n    parseDirectionalValues(currentValueOfCssVar);\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\ntype ApplyAxisValuesProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  axis: Axis;\n};\n\nconst applyAxisValues = ({\n  currentValueOfCssVar = \"visible visible\",\n  value,\n  axis,\n}: ApplyAxisValuesProps) => {\n  const [x, y] = currentValueOfCssVar.split(\" \");\n\n  // If the axis is x, we need to set the x value and keep the y value.\n  if (axis === \"x\") {\n    return `${value} ${y}`;\n  }\n\n  // If the axis is y, we need to set the y value and keep the x value.\n  if (axis === \"y\") {\n    return `${x} ${value}`;\n  }\n\n  // If the axis is both, we need to set the x and y values.\n  return `${value} ${value}`;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\n// Resolves a single prop value against its matching CssVarProp definition.\n// Returns the mapped CSS variable value string, handling negative spacing.\nconst resolveValue = (\n  matchingCssVar: CssVarProp,\n  propValue: string,\n): string => {\n  const isNegative = typeof propValue === \"string\" && propValue.startsWith(\"-\");\n\n  if (isNegative) {\n    const positiveValue = propValue.slice(1);\n    const positiveVar = matchingCssVar.value.replace(\"VARIABLE\", positiveValue);\n    return `calc(-1 * ${positiveVar})`;\n  }\n\n  return matchingCssVar.value.replace(\"VARIABLE\", propValue);\n};\n\n// Applies a resolved CSS variable value to the styleProp object,\n// handling directional and axis properties.\nconst applyCssVar = <CssVars extends CssVarsPropObject<CssVars>>(\n  styleProp: StyleProp<CssVars>,\n  matchingCssVar: CssVarProp,\n  mappedValue: string,\n  cssVarNameOverride?: string,\n): StyleProp<CssVars> => {\n  const cssVarName = (cssVarNameOverride ??\n    matchingCssVar.cssVar) as keyof StyleProp<CssVars>;\n\n  if (matchingCssVar.direction) {\n    const currentValueOfCssVar = styleProp?.[cssVarName];\n    const directionalValue = applyDirectionalValues({\n      currentValueOfCssVar,\n      value: mappedValue,\n      direction: matchingCssVar.direction,\n    });\n    return { ...styleProp, [cssVarName]: directionalValue };\n  }\n\n  if (matchingCssVar.axis) {\n    const currentValueOfCssVar = styleProp?.[cssVarName];\n    const axisValue = applyAxisValues({\n      currentValueOfCssVar,\n      value: mappedValue,\n      axis: matchingCssVar.axis,\n    });\n    return { ...styleProp, [cssVarName]: axisValue };\n  }\n\n  return { ...styleProp, [cssVarName]: mappedValue };\n};\n\n// Creates a state-prefixed CSS variable name from a base CSS variable.\n// e.g. (\"--background-color\", \"hover\") => \"--hover--background-color\"\nconst createPseudoCssVarName = (\n  baseCssVar: string,\n  pseudoState: PseudoState,\n): string => {\n  const prefix = PSEUDO_CSS_PREFIX[pseudoState];\n  const baseName = baseCssVar.replace(/^--/, \"\");\n  return `--${prefix}--${baseName}`;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n\n    // Check if this is a pseudo-class object prop (hover, focus, active, etc.)\n    if (\n      PSEUDO_STATES.includes(_key as PseudoState) &&\n      typeof props[key] === \"object\" &&\n      props[key] !== null\n    ) {\n      const pseudoState = _key as PseudoState;\n      const pseudoProps = props[key] as Record<string, string | undefined>;\n      const unmatchedPseudoProps: Record<string, string> = {};\n\n      Object.keys(pseudoProps).forEach((pseudoPropKey) => {\n        const propValue = pseudoProps[pseudoPropKey];\n        if (!propValue) return;\n\n        const cssVarsKey = pseudoPropKey as unknown as keyof typeof cssVars;\n        const matchingCssVar = cssVars?.[cssVarsKey];\n\n        if (!matchingCssVar) {\n          // Collect unmatched pseudo props to pass through to otherProps\n          unmatchedPseudoProps[pseudoPropKey] = propValue;\n          return;\n        }\n\n        const mappedValue = resolveValue(matchingCssVar, propValue);\n        const pseudoCssVarName = createPseudoCssVarName(\n          matchingCssVar.cssVar,\n          pseudoState,\n        );\n\n        styleProp = applyCssVar(\n          styleProp,\n          matchingCssVar,\n          mappedValue,\n          pseudoCssVarName,\n        );\n      });\n\n      // Pass through any unmatched pseudo props so downstream components\n      // can process them (e.g. Button passes hover.backgroundColor to Box)\n      if (Object.keys(unmatchedPseudoProps).length > 0) {\n        const existingPseudo =\n          (otherProps as Record<string, unknown>)[_key] || {};\n        Object.assign(otherProps, {\n          [_key]: { ...existingPseudo, ...unmatchedPseudoProps },\n        });\n      }\n\n      // If any pseudo sub-props were matched against cssVars at this level,\n      // mark as interactive so the component adds the scoping class.\n      // This prevents pseudo-class CSS rules from cascading into child elements.\n      if (\n        Object.keys(pseudoProps).length >\n        Object.keys(unmatchedPseudoProps).length\n      ) {\n        interactive = true;\n      }\n\n      return;\n    }\n\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    const mappedValueOfCssVar = resolveValue(matchingCssVar, matchingPropValue);\n\n    styleProp = applyCssVar(styleProp, matchingCssVar, mappedValueOfCssVar);\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCyBa,IAAgB;CAC3B;CACA;CACA;CACA;CACA;CACD,EAKK,IAAiD;CACrD,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,cAAc;CACd,WAAW;CACZ,EA0CK,KACJ,MACqC;CACrC,IAAM,IAAoB,EAAE,EACxB,IAAU,IACV,IAAQ;AAEZ,MAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,KAAK;EACrC,IAAM,IAAO,EAAM;AAEnB,EAAI,MAAS,OACX,KACA,KAAW,KACF,MAAS,OAClB,KACA,KAAW,KACF,MAAS,OAAO,MAAU,IAIjC,OADA,EAAQ,KAAK,EAAQ,EACX,MAGZ,KAAW;;AAUf,MALI,KACF,EAAQ,KAAK,EAAQ,EAIhB,EAAQ,SAAS,GACtB,GAAQ,KAAK,IAAI;AAGnB,QAAO;EACL,EAAQ,MAAM;EACd,EAAQ,MAAM;EACd,EAAQ,MAAM;EACd,EAAQ,MAAM;EACf;GAIG,KAA0B,EAC9B,0BAAuB,WACvB,UACA,mBACyB;CACzB,IAAM,CAAC,GAAK,GAAO,GAAQ,KACzB,EAAuB,EAAqB,EAExC,IAAY;EAChB;EACA;EACA;EACA;EACD;AA4DD,QA1DI,MAAc,UAChB,EAAU,MAAM,IAGd,MAAc,YAChB,EAAU,QAAQ,IAGhB,MAAc,aAChB,EAAU,SAAS,IAGjB,MAAc,WAChB,EAAU,OAAO,IAGf,MAAc,UAChB,EAAU,MAAM,GAChB,EAAU,QAAQ,GAClB,EAAU,SAAS,GACnB,EAAU,OAAO,IAGf,MAAc,QAChB,EAAU,OAAO,GACjB,EAAU,QAAQ,IAGhB,MAAc,QAChB,EAAU,MAAM,GAChB,EAAU,SAAS,IAMjB,MAAc,eAChB,EAAU,MAAM,GAChB,EAAU,QAAQ,IAGhB,MAAc,kBAChB,EAAU,SAAS,GACnB,EAAU,OAAO,IAGf,MAAc,gBAChB,EAAU,MAAM,GAChB,EAAU,OAAO,IAGf,MAAc,iBAChB,EAAU,QAAQ,GAClB,EAAU,SAAS,IAGG,OAAO,OAAO,EAAU,CAAC,KAAK,IAAI;GAWtD,KAAmB,EACvB,0BAAuB,mBACvB,UACA,cAC0B;CAC1B,IAAM,CAAC,GAAG,KAAK,EAAqB,MAAM,IAAI;AAa9C,QAVI,MAAS,MACJ,GAAG,EAAM,GAAG,MAIjB,MAAS,MACJ,GAAG,EAAE,GAAG,MAIV,GAAG,EAAM,GAAG;GAiCf,KACJ,GACA,MACW;AAGX,KAFmB,OAAO,KAAc,YAAY,EAAU,WAAW,IAAI,EAE7D;EACd,IAAM,IAAgB,EAAU,MAAM,EAAE;AAExC,SAAO,aADa,EAAe,MAAM,QAAQ,YAAY,EAAc,CAC3C;;AAGlC,QAAO,EAAe,MAAM,QAAQ,YAAY,EAAU;GAKtD,KACJ,GACA,GACA,GACA,MACuB;CACvB,IAAM,IAAc,KAClB,EAAe;AAEjB,KAAI,EAAe,WAAW;EAC5B,IAAM,IAAuB,IAAY,IACnC,IAAmB,EAAuB;GAC9C;GACA,OAAO;GACP,WAAW,EAAe;GAC3B,CAAC;AACF,SAAO;GAAE,GAAG;IAAY,IAAa;GAAkB;;AAGzD,KAAI,EAAe,MAAM;EACvB,IAAM,IAAuB,IAAY,IACnC,IAAY,EAAgB;GAChC;GACA,OAAO;GACP,MAAM,EAAe;GACtB,CAAC;AACF,SAAO;GAAE,GAAG;IAAY,IAAa;GAAW;;AAGlD,QAAO;EAAE,GAAG;GAAY,IAAa;EAAa;GAK9C,KACJ,GACA,MAIO,KAFQ,EAAkB,GAEd,IADF,EAAW,QAAQ,OAAO,GAAG,IAInC,KAIX,MAKG;CACH,IAAM,EAAE,eAAY;AAEpB,KAAI,CAAC,GAAQ,SAAS,OAAO,KAAK,EAAO,MAAM,CAAC,WAAW,EACzD,QAAO;EAAE,WAAW,EAAE;EAAE,YAAY,EAAE;EAAE,aAAa;EAAO;CAK9D,IAAM,EAAE,WAAQ,EAAE,EAAE,GAAG,MAAU,EAAO,OAEpC,IAAgC,GAC9B,IAAyC,EAAE,EAC7C,IAAc;AAsFlB,QApFA,OAAO,KAAK,EAAM,CAAC,SAAS,MAAS;EACnC,IAAM,IAAM;AAGZ,MACE,EAAc,SAAS,EAAoB,IAC3C,OAAO,EAAM,MAAS,YACtB,EAAM,OAAS,MACf;GACA,IAAM,IAAc,GACd,IAAc,EAAM,IACpB,IAA+C,EAAE;AA+BvD,OA7BA,OAAO,KAAK,EAAY,CAAC,SAAS,MAAkB;IAClD,IAAM,IAAY,EAAY;AAC9B,QAAI,CAAC,EAAW;IAGhB,IAAM,IAAiB,IADJ;AAGnB,QAAI,CAAC,GAAgB;AAEnB,OAAqB,KAAiB;AACtC;;IAGF,IAAM,IAAc,EAAa,GAAgB,EAAU,EACrD,IAAmB,EACvB,EAAe,QACf,EACD;AAED,QAAY,EACV,GACA,GACA,GACA,EACD;KACD,EAIE,OAAO,KAAK,EAAqB,CAAC,SAAS,GAAG;IAChD,IAAM,IACH,EAAuC,MAAS,EAAE;AACrD,WAAO,OAAO,GAAY,GACvB,IAAO;KAAE,GAAG;KAAgB,GAAG;KAAsB,EACvD,CAAC;;AAMJ,GACE,OAAO,KAAK,EAAY,CAAC,SACzB,OAAO,KAAK,EAAqB,CAAC,WAElC,IAAc;AAGhB;;EAIF,IAAM,IAAiB,IADJ;AAInB,MAAI,CAAC,GAAgB;AACnB,UAAO,OAAO,GAAY,GAAG,IAAM,EAAM,IAAM,CAAC;AAChD;;EAGF,IAAM,IAAoB,IAAQ;AAElC,MAAI,CAAC,GAAmB;AACtB,UAAO,OAAO,GAAW,GAAG,IAAM,EAAM,IAAM,CAAC;AAC/C;;EAGF,IAAM,IAAsB,EAAa,GAAgB,EAAkB;AAE3E,MAAY,EAAY,GAAW,GAAgB,EAAoB;GACvE,EAEK;EAAE;EAAW;EAAY;EAAa;GCzalC,KAIX,MAEO,EAAM,cAAc,EAAa,EAAO,EAAE,CAAC,EAAO,CAAC"}

package/dist/esm/postcss.mjs

@@ -1,145 +1,110 @@
-const i = require("node:path"), p = require("node:fs"), P = require("postcss");
-function j(t) {
-  let s = t;
-  for (; ; ) {
-    const e = i.join(s, "package.json");
-    if (p.existsSync(e))
-      return s;
-    const n = i.dirname(s);
-    if (n === s) return;
-    s = n;
-  }
+//#region \0rolldown/runtime.js
+var e = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), t = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+}), n = /* @__PURE__ */ e(((e, t) => {
+	t.exports = {};
+})), r = n(), i = n(), a = t("postcss");
+function o(e) {
+	let t = e;
+	for (;;) {
+		let e = r.join(t, "package.json");
+		if (i.existsSync(e)) return t;
+		let n = r.dirname(t);
+		if (n === t) return;
+		t = n;
+	}
 }
-function O(t = process.cwd()) {
-  let s = t, e = !0;
-  for (; e; ) {
-    const n = i.join(s, "package.json");
-    if (p.existsSync(n))
-      try {
-        if (JSON.parse(p.readFileSync(n, "utf8")).workspaces)
-          return s;
-      } catch {
-      }
-    const c = i.dirname(s);
-    c === s && (e = !1), s = c;
-  }
+function s(e = process.cwd()) {
+	let t = e, n = !0;
+	for (; n;) {
+		let e = r.join(t, "package.json");
+		if (i.existsSync(e)) try {
+			if (JSON.parse(i.readFileSync(e, "utf8")).workspaces) return t;
+		} catch {}
+		let a = r.dirname(t);
+		a === t && (n = !1), t = a;
+	}
 }
-const m = (t, s) => {
-  var e;
-  if (!(!t.dependencies || ((e = Object.keys(t.dependencies)) == null ? void 0 : e.length) === 0))
-    return Object.entries(t.dependencies).reduce((n, [c, o]) => (c.startsWith("@telegraph/") && (n[c] = {
-      name: c,
-      version: o,
-      path: i.resolve(s, "node_modules", c)
-    }), n), {});
+var c = (e, t) => {
+	if (!(!e.dependencies || Object.keys(e.dependencies)?.length === 0)) return Object.entries(e.dependencies).reduce((e, [n, i]) => (n.startsWith("@telegraph/") && (e[n] = {
+		name: n,
+		version: i,
+		path: r.resolve(t, "node_modules", n)
+	}), e), {});
 };
-function S(t) {
-  const s = t ? i.dirname(t) : process.cwd(), e = j(s) ?? process.cwd(), n = i.resolve(e, "package.json"), c = JSON.parse(p.readFileSync(n, "utf8")), o = m(c, e), l = O(e), k = (u) => {
-    if (!u || Object.keys(u).length === 0)
-      return u;
-    const r = { ...u };
-    for (const a of Object.values(u)) {
-      let d, f;
-      if (a.version.includes("workspace:") && l)
-        d = i.resolve(
-          l,
-          "node_modules",
-          a.name,
-          "package.json"
-        ), f = l, r[a.name] = {
-          ...a,
-          path: i.resolve(l, "node_modules", a.name)
-        };
-      else {
-        const h = i.resolve(
-          e,
-          "node_modules",
-          a.name,
-          "package.json"
-        ), g = l && i.resolve(
-          l,
-          "node_modules",
-          a.name,
-          "package.json"
-        );
-        p.existsSync(h) ? (d = h, f = e) : g && p.existsSync(g) ? (d = g, f = l, r[a.name] = {
-          ...a,
-          path: i.resolve(l, "node_modules", a.name)
-        }) : (d = h, f = e);
-      }
-      try {
-        const h = JSON.parse(p.readFileSync(d, "utf8")), g = m(h, f);
-        if (Object.assign(r, g), g) {
-          const y = k(g);
-          Object.assign(r, y);
-        }
-      } catch {
-        continue;
-      }
-    }
-    return r;
-  };
-  return o ? k(o) : {};
+function l(e) {
+	let t = o(e ? r.dirname(e) : process.cwd()) ?? process.cwd(), n = r.resolve(t, "package.json"), a = c(JSON.parse(i.readFileSync(n, "utf8")), t), l = s(t), u = (e) => {
+		if (!e || Object.keys(e).length === 0) return e;
+		let n = { ...e };
+		for (let a of Object.values(e)) {
+			let e, o;
+			if (a.version.includes("workspace:") && l) e = r.resolve(l, "node_modules", a.name, "package.json"), o = l, n[a.name] = {
+				...a,
+				path: r.resolve(l, "node_modules", a.name)
+			};
+			else {
+				let s = r.resolve(t, "node_modules", a.name, "package.json"), c = l && r.resolve(l, "node_modules", a.name, "package.json");
+				i.existsSync(s) ? (e = s, o = t) : c && i.existsSync(c) ? (e = c, o = l, n[a.name] = {
+					...a,
+					path: r.resolve(l, "node_modules", a.name)
+				}) : (e = s, o = t);
+			}
+			try {
+				let t = c(JSON.parse(i.readFileSync(e, "utf8")), o);
+				if (Object.assign(n, t), t) {
+					let e = u(t);
+					Object.assign(n, e);
+				}
+			} catch {
+				continue;
+			}
+		}
+		return n;
+	};
+	return a ? u(a) : {};
 }
-function v({
-  fileName: t = "default.css",
-  path: s
-}) {
-  try {
-    const e = `${s}/dist/css/${t}`, n = i.resolve(e);
-    return p.existsSync(n) ? p.readFileSync(n, "utf8") : null;
-  } catch {
-    return null;
-  }
+function u({ fileName: e = "default.css", path: t }) {
+	try {
+		let n = `${t}/dist/css/${e}`, a = r.resolve(n);
+		return i.existsSync(a) ? i.readFileSync(a, "utf8") : null;
+	} catch {
+		return null;
+	}
 }
-const F = async ({
-  root: t,
-  cssFilePath: s,
-  config: e
-}) => {
-  const n = S(s), c = e.components === !0 ? Object.values(n).filter(
-    (r) => !r.name.includes("@telegraph/tokens")
-  ) : [], o = e.tokens.length > 0 ? Object.values(n).filter(
-    (r) => r.name.includes("@telegraph/tokens")
-  ) : [], l = c.map((r) => v({ path: r.path })).filter(Boolean), k = e.tokens.map((r) => o.map(
-    (d) => v({ path: d.path, fileName: `${r}.css` })
-  ).filter(Boolean)).filter(Boolean), u = [...l, ...k];
-  for (const r of u) {
-    const a = P.parse(r);
-    t.append(a);
-  }
-}, J = () => ({
-  postcssPlugin: "@telegraph/style-engine",
-  plugins: [
-    {
-      postcssPlugin: "telegraph",
-      AtRule: {
-        telegraph() {
-        }
-      },
-      async Once(t) {
-        var n, c;
-        const s = (c = (n = t.source) == null ? void 0 : n.input) == null ? void 0 : c.file, e = {
-          tokens: [],
-          components: !1
-        };
-        t.walkAtRules("telegraph", (o) => {
-          o.params === "components" && (e.components = !0, o.remove()), o.params === "tokens-light" && (e.tokens.push("light"), o.remove()), o.params === "tokens-dark" && (e.tokens.push("dark"), o.remove()), o.params === "tokens" && (e.tokens.push("default"), o.remove());
-        }), await F({
-          root: t,
-          cssFilePath: s,
-          config: {
-            tokens: e.tokens,
-            components: e.components
-          }
-        });
-      }
-    }
-  ]
-}), b = Object.assign(J, {
-  postcss: !0
-});
-export {
-  b as default
-};
-//# sourceMappingURL=postcss.mjs.map
+var d = async ({ root: e, cssFilePath: t, config: n }) => {
+	let r = l(t), i = n.components === !0 ? Object.values(r).filter((e) => !e.name.includes("@telegraph/tokens")) : [], o = n.tokens.length > 0 ? Object.values(r).filter((e) => e.name.includes("@telegraph/tokens")) : [], s = i.map((e) => u({ path: e.path })).filter(Boolean), c = n.tokens.map((e) => o.map((t) => u({
+		path: t.path,
+		fileName: `${e}.css`
+	})).filter(Boolean)).filter(Boolean), d = [...s, ...c];
+	for (let t of d) {
+		let n = a.parse(t);
+		e.append(n);
+	}
+}, f = Object.assign(() => ({
+	postcssPlugin: "@telegraph/style-engine",
+	plugins: [{
+		postcssPlugin: "telegraph",
+		AtRule: { telegraph() {} },
+		async Once(e) {
+			let t = e.source?.input?.file, n = {
+				tokens: [],
+				components: !1
+			};
+			e.walkAtRules("telegraph", (e) => {
+				e.params === "components" && (n.components = !0, e.remove()), e.params === "tokens-light" && (n.tokens.push("light"), e.remove()), e.params === "tokens-dark" && (n.tokens.push("dark"), e.remove()), e.params === "tokens" && (n.tokens.push("default"), e.remove());
+			}), await d({
+				root: e,
+				cssFilePath: t,
+				config: {
+					tokens: n.tokens,
+					components: n.components
+				}
+			});
+		}
+	}]
+}), { postcss: !0 });
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=postcss.mjs.map

package/dist/esm/postcss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"postcss.mjs","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst nodePath = require(\"node:path\");\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst nodeFs = require(\"node:fs\");\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n  dependencies?: Record<string, string>;\n  devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n  string,\n  {\n    name: string;\n    version: string;\n    path: string;\n  }\n>;\n\n/**\n * Traverses up the directory tree from a given start path to find the nearest package.json.\n * Returns the directory containing that package.json, or undefined if none is found.\n * Used to resolve the correct consumer package when process.cwd() may be the monorepo root.\n */\nfunction findNearestPackageJsonDir(start: string): string | undefined {\n  let current = start;\n\n  while (true) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      return current;\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) return undefined;\n    current = parent;\n  }\n}\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n  let current = start;\n  let run = true;\n\n  while (run) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      try {\n        const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.workspaces) {\n          return current;\n        }\n      } catch {\n        // malformed package.json, skip\n      }\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) run = false;\n    current = parent;\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n  pkg: PkgJson,\n  pkgPath: string,\n): DepObject | undefined => {\n  if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n  return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n    if (dep.startsWith(\"@telegraph/\")) {\n      acc[dep] = {\n        name: dep,\n        version,\n        path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n      };\n    }\n    return acc;\n  }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n *\n * @param cssFilePath - The absolute path of the CSS file being processed by PostCSS.\n *   When provided, we walk up from the CSS file's directory to find the nearest\n *   package.json. This ensures we read the *consumer's* package.json rather than\n *   the monorepo root's package.json (which has no @telegraph/* deps), fixing the\n *   Turborepo issue where process.cwd() is always the repo root during builds.\n */\nfunction getTelegraphDeps(cssFilePath?: string): DepObject {\n  // Prefer to start from the CSS file's directory so we find the consumer's\n  // package.json. Fall back to process.cwd() for in-memory PostCSS usage.\n  const startDir = cssFilePath ? nodePath.dirname(cssFilePath) : process.cwd();\n  const consumerDir = findNearestPackageJsonDir(startDir) ?? process.cwd();\n\n  const pkgPath = nodePath.resolve(consumerDir, \"package.json\");\n  const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n  const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, consumerDir);\n  const monorepoRoot = findMonorepoRoot(consumerDir);\n\n  const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n    if (!deps || Object.keys(deps).length === 0) {\n      return deps;\n    }\n\n    const allDeps = { ...deps };\n\n    for (const dep of Object.values(deps)) {\n      let pkgJsonPath: string;\n      let searchPath: string;\n\n      if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n        pkgJsonPath = nodePath.resolve(\n          monorepoRoot,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = monorepoRoot;\n        // Workspace deps are hoisted to the monorepo root's node_modules.\n        // The path stored in DepObject was set relative to consumerDir when the\n        // dep was first recorded, so correct it to the monorepo root here so\n        // that getCssStyles() can find the actual dist/css/default.css file.\n        allDeps[dep.name] = {\n          ...dep,\n          path: nodePath.resolve(monorepoRoot, \"node_modules\", dep.name),\n        };\n      } else {\n        // Non-workspace dep: try consumerDir/node_modules first, then fall\n        // back to monorepoRoot/node_modules. Yarn (and other package managers)\n        // hoist all deps to the root node_modules regardless of whether they\n        // use workspace: protocol, so a pinned semver dep like \"0.1.1\" will\n        // typically live at the monorepo root, not the consumer package dir.\n        const localPkgJsonPath = nodePath.resolve(\n          consumerDir,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        const rootPkgJsonPath =\n          monorepoRoot &&\n          nodePath.resolve(\n            monorepoRoot,\n            \"node_modules\",\n            dep.name,\n            \"package.json\",\n          );\n\n        if (nodeFs.existsSync(localPkgJsonPath)) {\n          pkgJsonPath = localPkgJsonPath;\n          searchPath = consumerDir;\n        } else if (rootPkgJsonPath && nodeFs.existsSync(rootPkgJsonPath)) {\n          pkgJsonPath = rootPkgJsonPath;\n          searchPath = monorepoRoot!;\n          // Correct the stored path so getCssStyles() finds the right dist/css/ dir.\n          allDeps[dep.name] = {\n            ...dep,\n            path: nodePath.resolve(monorepoRoot!, \"node_modules\", dep.name),\n          };\n        } else {\n          pkgJsonPath = localPkgJsonPath; // will throw on readFileSync, caught below\n          searchPath = consumerDir;\n        }\n      }\n\n      try {\n        const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n        // Merge new dependencies into allDeps\n        Object.assign(allDeps, deps);\n\n        if (deps) {\n          // Recursively get dependencies of dependencies\n          const nestedDeps = recursivelyGetTelegraphDeps(deps);\n          Object.assign(allDeps, nestedDeps);\n        }\n      } catch (_err) {\n        // Skip if package.json cannot be read\n        continue;\n      }\n    }\n\n    return allDeps;\n  };\n\n  if (topLevelDeps) {\n    return recursivelyGetTelegraphDeps(topLevelDeps);\n  }\n\n  return {};\n}\n\ntype GetCssStylesParams = {\n  fileName?: string;\n  path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n  fileName = \"default.css\",\n  path,\n}: GetCssStylesParams): string | null {\n  try {\n    const cssPath = `${path}/dist/css/${fileName}`;\n    const pkgPath = nodePath.resolve(cssPath);\n\n    if (nodeFs.existsSync(pkgPath)) {\n      return nodeFs.readFileSync(pkgPath, \"utf8\");\n    }\n\n    return null;\n  } catch {\n    return null;\n  }\n}\n\ntype BuildTelegraphCssParams = {\n  root: Root;\n  cssFilePath?: string;\n  config: {\n    tokens: Array<\"light\" | \"dark\" | \"default\">;\n    components: boolean;\n  };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({\n  root,\n  cssFilePath,\n  config,\n}: BuildTelegraphCssParams) => {\n  const deps = getTelegraphDeps(cssFilePath);\n\n  const depsWithoutTokens =\n    config.components === true\n      ? Object.values(deps).filter(\n          (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const tokensDeps =\n    config.tokens.length > 0\n      ? Object.values(deps).filter((dep) =>\n          dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const cssFiles = depsWithoutTokens\n    .map((dep) => getCssStyles({ path: dep.path }))\n    .filter(Boolean) as Array<string>;\n\n  const tokensCssFiles = config.tokens\n    .map((token) => {\n      const cssFile = tokensDeps.map((dep) =>\n        getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n      );\n\n      return cssFile.filter(Boolean) as Array<string>;\n    })\n    .filter(Boolean);\n\n  const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n  for (const content of allCssFiles) {\n    const parsed = postcss.parse(content);\n    root.append(parsed);\n  }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n  return {\n    postcssPlugin: \"@telegraph/style-engine\",\n    plugins: [\n      {\n        postcssPlugin: \"telegraph\",\n        AtRule: {\n          telegraph() {},\n        },\n        async Once(root) {\n          // Use the CSS file's path so getTelegraphDeps walks up from the\n          // consumer package rather than from process.cwd() (which may be the\n          // monorepo root when Turborepo is running the build).\n          const cssFilePath = root.source?.input?.file;\n\n          const run = {\n            tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n            components: false,\n          };\n          root.walkAtRules(\"telegraph\", (atRule) => {\n            if (atRule.params === \"components\") {\n              run.components = true;\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-light\") {\n              run.tokens.push(\"light\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-dark\") {\n              run.tokens.push(\"dark\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens\") {\n              run.tokens.push(\"default\");\n              atRule.remove();\n            }\n          });\n\n          await buildTelegraphCss({\n            root,\n            cssFilePath,\n            config: {\n              tokens: run.tokens,\n              components: run.components,\n            },\n          });\n        },\n      },\n    ],\n  };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n  postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findNearestPackageJsonDir","start","current","pkgJsonPath","parent","findMonorepoRoot","run","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","cssFilePath","startDir","consumerDir","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","localPkgJsonPath","rootPkgJsonPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","_b","atRule","postcss$1"],"mappings":"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"}
+{"version":3,"file":"postcss.mjs","names":[],"sources":["../../__vite-browser-external","../../src/plugins/postcss.ts"],"sourcesContent":["module.exports = {}","import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst nodePath = require(\"node:path\");\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst nodeFs = require(\"node:fs\");\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n  dependencies?: Record<string, string>;\n  devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n  string,\n  {\n    name: string;\n    version: string;\n    path: string;\n  }\n>;\n\n/**\n * Traverses up the directory tree from a given start path to find the nearest package.json.\n * Returns the directory containing that package.json, or undefined if none is found.\n * Used to resolve the correct consumer package when process.cwd() may be the monorepo root.\n */\nfunction findNearestPackageJsonDir(start: string): string | undefined {\n  let current = start;\n\n  while (true) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      return current;\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) return undefined;\n    current = parent;\n  }\n}\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n  let current = start;\n  let run = true;\n\n  while (run) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      try {\n        const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.workspaces) {\n          return current;\n        }\n      } catch {\n        // malformed package.json, skip\n      }\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) run = false;\n    current = parent;\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n  pkg: PkgJson,\n  pkgPath: string,\n): DepObject | undefined => {\n  if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n  return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n    if (dep.startsWith(\"@telegraph/\")) {\n      acc[dep] = {\n        name: dep,\n        version,\n        path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n      };\n    }\n    return acc;\n  }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n *\n * @param cssFilePath - The absolute path of the CSS file being processed by PostCSS.\n *   When provided, we walk up from the CSS file's directory to find the nearest\n *   package.json. This ensures we read the *consumer's* package.json rather than\n *   the monorepo root's package.json (which has no @telegraph/* deps), fixing the\n *   Turborepo issue where process.cwd() is always the repo root during builds.\n */\nfunction getTelegraphDeps(cssFilePath?: string): DepObject {\n  // Prefer to start from the CSS file's directory so we find the consumer's\n  // package.json. Fall back to process.cwd() for in-memory PostCSS usage.\n  const startDir = cssFilePath ? nodePath.dirname(cssFilePath) : process.cwd();\n  const consumerDir = findNearestPackageJsonDir(startDir) ?? process.cwd();\n\n  const pkgPath = nodePath.resolve(consumerDir, \"package.json\");\n  const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n  const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, consumerDir);\n  const monorepoRoot = findMonorepoRoot(consumerDir);\n\n  const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n    if (!deps || Object.keys(deps).length === 0) {\n      return deps;\n    }\n\n    const allDeps = { ...deps };\n\n    for (const dep of Object.values(deps)) {\n      let pkgJsonPath: string;\n      let searchPath: string;\n\n      if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n        pkgJsonPath = nodePath.resolve(\n          monorepoRoot,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = monorepoRoot;\n        // Workspace deps are hoisted to the monorepo root's node_modules.\n        // The path stored in DepObject was set relative to consumerDir when the\n        // dep was first recorded, so correct it to the monorepo root here so\n        // that getCssStyles() can find the actual dist/css/default.css file.\n        allDeps[dep.name] = {\n          ...dep,\n          path: nodePath.resolve(monorepoRoot, \"node_modules\", dep.name),\n        };\n      } else {\n        // Non-workspace dep: try consumerDir/node_modules first, then fall\n        // back to monorepoRoot/node_modules. Yarn (and other package managers)\n        // hoist all deps to the root node_modules regardless of whether they\n        // use workspace: protocol, so a pinned semver dep like \"0.1.1\" will\n        // typically live at the monorepo root, not the consumer package dir.\n        const localPkgJsonPath = nodePath.resolve(\n          consumerDir,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        const rootPkgJsonPath =\n          monorepoRoot &&\n          nodePath.resolve(\n            monorepoRoot,\n            \"node_modules\",\n            dep.name,\n            \"package.json\",\n          );\n\n        if (nodeFs.existsSync(localPkgJsonPath)) {\n          pkgJsonPath = localPkgJsonPath;\n          searchPath = consumerDir;\n        } else if (rootPkgJsonPath && nodeFs.existsSync(rootPkgJsonPath)) {\n          pkgJsonPath = rootPkgJsonPath;\n          searchPath = monorepoRoot!;\n          // Correct the stored path so getCssStyles() finds the right dist/css/ dir.\n          allDeps[dep.name] = {\n            ...dep,\n            path: nodePath.resolve(monorepoRoot!, \"node_modules\", dep.name),\n          };\n        } else {\n          pkgJsonPath = localPkgJsonPath; // will throw on readFileSync, caught below\n          searchPath = consumerDir;\n        }\n      }\n\n      try {\n        const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n        // Merge new dependencies into allDeps\n        Object.assign(allDeps, deps);\n\n        if (deps) {\n          // Recursively get dependencies of dependencies\n          const nestedDeps = recursivelyGetTelegraphDeps(deps);\n          Object.assign(allDeps, nestedDeps);\n        }\n      } catch (_err) {\n        // Skip if package.json cannot be read\n        continue;\n      }\n    }\n\n    return allDeps;\n  };\n\n  if (topLevelDeps) {\n    return recursivelyGetTelegraphDeps(topLevelDeps);\n  }\n\n  return {};\n}\n\ntype GetCssStylesParams = {\n  fileName?: string;\n  path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n  fileName = \"default.css\",\n  path,\n}: GetCssStylesParams): string | null {\n  try {\n    const cssPath = `${path}/dist/css/${fileName}`;\n    const pkgPath = nodePath.resolve(cssPath);\n\n    if (nodeFs.existsSync(pkgPath)) {\n      return nodeFs.readFileSync(pkgPath, \"utf8\");\n    }\n\n    return null;\n  } catch {\n    return null;\n  }\n}\n\ntype BuildTelegraphCssParams = {\n  root: Root;\n  cssFilePath?: string;\n  config: {\n    tokens: Array<\"light\" | \"dark\" | \"default\">;\n    components: boolean;\n  };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({\n  root,\n  cssFilePath,\n  config,\n}: BuildTelegraphCssParams) => {\n  const deps = getTelegraphDeps(cssFilePath);\n\n  const depsWithoutTokens =\n    config.components === true\n      ? Object.values(deps).filter(\n          (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const tokensDeps =\n    config.tokens.length > 0\n      ? Object.values(deps).filter((dep) =>\n          dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const cssFiles = depsWithoutTokens\n    .map((dep) => getCssStyles({ path: dep.path }))\n    .filter(Boolean) as Array<string>;\n\n  const tokensCssFiles = config.tokens\n    .map((token) => {\n      const cssFile = tokensDeps.map((dep) =>\n        getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n      );\n\n      return cssFile.filter(Boolean) as Array<string>;\n    })\n    .filter(Boolean);\n\n  const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n  for (const content of allCssFiles) {\n    const parsed = postcss.parse(content);\n    root.append(parsed);\n  }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n  return {\n    postcssPlugin: \"@telegraph/style-engine\",\n    plugins: [\n      {\n        postcssPlugin: \"telegraph\",\n        AtRule: {\n          telegraph() {},\n        },\n        async Once(root) {\n          // Use the CSS file's path so getTelegraphDeps walks up from the\n          // consumer package rather than from process.cwd() (which may be the\n          // monorepo root when Turborepo is running the build).\n          const cssFilePath = root.source?.input?.file;\n\n          const run = {\n            tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n            components: false,\n          };\n          root.walkAtRules(\"telegraph\", (atRule) => {\n            if (atRule.params === \"components\") {\n              run.components = true;\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-light\") {\n              run.tokens.push(\"light\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-dark\") {\n              run.tokens.push(\"dark\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens\") {\n              run.tokens.push(\"default\");\n              atRule.remove();\n            }\n          });\n\n          await buildTelegraphCss({\n            root,\n            cssFilePath,\n            config: {\n              tokens: run.tokens,\n              components: run.components,\n            },\n          });\n        },\n      },\n    ],\n  };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n  postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/style-engine",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "A wrappar around vanilla extract to style telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/style-engine",
   "author": "@knocklabs",
@@ -38,23 +38,23 @@
   },
   "dependencies": {
     "@telegraph/tokens": "^0.2.0",
-    "postcss": "^8.5.6"
+    "postcss": "^8.5.13"
   },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.5",
     "@knocklabs/typescript-config": "^0.0.2",
-    "@telegraph/prettier-config": "^0.0.7",
+    "@telegraph/prettier-config": "^0.0.8",
     "@telegraph/vite-config": "^0.0.15",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.6.0",
     "@types/postcss-import": "^14.0.3",
-    "@types/react": "^19.2.9",
-    "eslint": "^10.2.0",
-    "globby": "^16.1.1",
+    "@types/react": "^19.2.14",
+    "eslint": "^10.2.1",
+    "globby": "^16.2.0",
     "lightningcss": "^1.32.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "typescript": "^5.9.3",
-    "vite": "^6.4.1"
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",