@pandacss/eslint-plugin 0.0.8 → 0.0.9

package/dist/utils/worker.js

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(worker_exports);
 var import_node2 = require("@pandacss/node");
 var import_synckit = require("synckit");
 
-// ../node_modules/.pnpm/@pandacss+preset-base@0.28.0/node_modules/@pandacss/preset-base/dist/index.mjs
+// ../node_modules/.pnpm/@pandacss+preset-base@0.30.1/node_modules/@pandacss/preset-base/dist/index.mjs
 var conditions = {
   hover: "&:is(:hover, [data-hover])",
   focus: "&:is(:focus, [data-focus])",
@@ -129,6 +129,16 @@ var conditions = {
   horizontal: "&[data-orientation=horizontal]",
   vertical: "&[data-orientation=vertical]"
 };
+var createColorMixTransform = (prop) => (value, args) => {
+  const mix = args.utils.colorMix(value);
+  if (mix.invalid)
+    return { [prop]: value };
+  const cssVar = "--mix-" + prop;
+  return {
+    [cssVar]: mix.value,
+    [prop]: `var(${cssVar}, ${mix.color})`
+  };
+};
 var background = {
   backgroundPosition: {
     shorthand: "bgPosition",
@@ -159,12 +169,14 @@ var background = {
   background: {
     shorthand: "bg",
     className: "bg",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("background")
   },
   backgroundColor: {
     shorthand: "bgColor",
     className: "bg",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("backgroundColor")
   },
   backgroundOrigin: {
     shorthand: "bgOrigin",
@@ -239,32 +251,26 @@ var background = {
   gradientFrom: {
     className: "from",
     values: "colors",
-    transform(value) {
-      return {
-        "--gradient-from": value
-      };
-    }
+    transform: createColorMixTransform("--gradient-from")
   },
   gradientTo: {
     className: "to",
     values: "colors",
-    transform(value) {
-      return {
-        "--gradient-to": value
-      };
-    }
+    transform: createColorMixTransform("--gradient-to")
   },
   gradientVia: {
     className: "via",
     values: "colors",
-    transform(value) {
+    transform(value, args) {
+      const transformed = gradientVia(value, args);
       return {
-        "--gradient-via-stops": "var(--gradient-from), var(--gradient-via), var(--gradient-to)",
-        "--gradient-via": value
+        ...transformed,
+        "--gradient-via-stops": "var(--gradient-from), var(--gradient-via), var(--gradient-to)"
       };
     }
   }
 };
+var gradientVia = createColorMixTransform("--gradient-via");
 var border = {
   borderRadius: {
     className: "rounded",
@@ -409,7 +415,8 @@ var border = {
   },
   borderColor: {
     className: "border",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderColor")
   },
   borderInline: {
     className: "border-x",
@@ -424,7 +431,8 @@ var border = {
   borderInlineColor: {
     className: "border-x",
     values: "colors",
-    shorthand: "borderXColor"
+    shorthand: "borderXColor",
+    transform: createColorMixTransform("borderInlineColor")
   },
   borderBlock: {
     className: "border-y",
@@ -439,7 +447,8 @@ var border = {
   borderBlockColor: {
     className: "border-y",
     values: "colors",
-    shorthand: "borderYColor"
+    shorthand: "borderYColor",
+    transform: createColorMixTransform("borderBlockColor")
   },
   borderLeft: {
     className: "border-l",
@@ -447,7 +456,8 @@ var border = {
   },
   borderLeftColor: {
     className: "border-l",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderLeftColor")
   },
   borderInlineStart: {
     className: "border-s",
@@ -462,7 +472,8 @@ var border = {
   borderInlineStartColor: {
     className: "border-s",
     values: "colors",
-    shorthand: "borderStartColor"
+    shorthand: "borderStartColor",
+    transform: createColorMixTransform("borderInlineStartColor")
   },
   borderRight: {
     className: "border-r",
@@ -470,7 +481,8 @@ var border = {
   },
   borderRightColor: {
     className: "border-r",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderRightColor")
   },
   borderInlineEnd: {
     className: "border-e",
@@ -485,7 +497,8 @@ var border = {
   borderInlineEndColor: {
     className: "border-e",
     values: "colors",
-    shorthand: "borderEndColor"
+    shorthand: "borderEndColor",
+    transform: createColorMixTransform("borderInlineEndColor")
   },
   borderTop: {
     className: "border-t",
@@ -493,7 +506,8 @@ var border = {
   },
   borderTopColor: {
     className: "border-t",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderTopColor")
   },
   borderBottom: {
     className: "border-b",
@@ -501,7 +515,8 @@ var border = {
   },
   borderBottomColor: {
     className: "border-b",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderBottomColor")
   },
   borderBlockEnd: {
     className: "border-be",
@@ -509,7 +524,8 @@ var border = {
   },
   borderBlockEndColor: {
     className: "border-be",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderBlockEndColor")
   },
   borderBlockStart: {
     className: "border-bs",
@@ -517,7 +533,21 @@ var border = {
   },
   borderBlockStartColor: {
     className: "border-bs",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderBlockStartColor")
+  }
+};
+var container = {
+  container: {
+    className: "cq"
+  },
+  containerName: {
+    className: "cq-name",
+    property: "containerName",
+    values: "containerNames"
+  },
+  containerType: {
+    className: "cq-type"
   }
 };
 var display = {
@@ -579,11 +609,9 @@ var divide = {
   divideColor: {
     className: "divide",
     values: "colors",
-    transform(value) {
+    transform(value, args) {
       return {
-        "& > :not([hidden]) ~ :not([hidden])": {
-          borderColor: value
-        }
+        "& > :not([hidden]) ~ :not([hidden])": divideColor(value, args)
       };
     }
   },
@@ -599,6 +627,7 @@ var divide = {
     }
   }
 };
+var divideColor = createColorMixTransform("borderColor");
 var effects = {
   opacity: {
     values: "opacity"
@@ -612,11 +641,7 @@ var effects = {
     shorthand: "shadowColor",
     className: "shadow",
     values: "colors",
-    transform(value) {
-      return {
-        "--shadow-color": value
-      };
-    }
+    transform: createColorMixTransform("--shadow-color")
   },
   mixBlendMode: {
     className: "mix-blend"
@@ -1042,11 +1067,13 @@ var helpers = {
 var interactivity = {
   accentColor: {
     className: "accent",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("accentColor")
   },
   caretColor: {
     className: "caret",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("caretColor")
   },
   scrollBehavior: {
     className: "scroll"
@@ -1419,7 +1446,8 @@ var outline = {
   outlineColor: {
     className: "ring",
     values: "colors",
-    shorthand: "ringColor"
+    shorthand: "ringColor",
+    transform: createColorMixTransform("outlineColor")
   },
   outline: {
     className: "ring",
@@ -1438,6 +1466,56 @@ var outline = {
     values: "spacing"
   }
 };
+var polyfill = {
+  appearance: {
+    className: "appearance",
+    transform(value) {
+      return { appearance: value, WebkitAppearance: value };
+    }
+  },
+  backfaceVisibility: {
+    className: "backface",
+    transform(value) {
+      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
+    }
+  },
+  clipPath: {
+    className: "clip-path",
+    transform(value) {
+      return { clipPath: value, WebkitClipPath: value };
+    }
+  },
+  hyphens: {
+    className: "hyphens",
+    transform(value) {
+      return { hyphens: value, WebkitHyphens: value };
+    }
+  },
+  mask: {
+    className: "mask",
+    transform(value) {
+      return { mask: value, WebkitMask: value };
+    }
+  },
+  maskImage: {
+    className: "mask-image",
+    transform(value) {
+      return { maskImage: value, WebkitMaskImage: value };
+    }
+  },
+  maskSize: {
+    className: "mask-size",
+    transform(value) {
+      return { maskSize: value, WebkitMaskSize: value };
+    }
+  },
+  textSizeAdjust: {
+    className: "text-size-adjust",
+    transform(value) {
+      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
+    }
+  }
+};
 var widthValues = (theme2) => ({
   auto: "auto",
   ...theme2("sizes"),
@@ -1663,11 +1741,13 @@ var spacing = {
 var svg = {
   fill: {
     className: "fill",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("fill")
   },
   stroke: {
     className: "stroke",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("stroke")
   },
   strokeWidth: {
     className: "stroke-w",
@@ -1855,7 +1935,8 @@ var transitions = {
 var typography = {
   color: {
     className: "text",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("color")
   },
   fontFamily: {
     className: "font",
@@ -1900,11 +1981,13 @@ var typography = {
   },
   textDecorationColor: {
     className: "text-decor",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("textDecorationColor")
   },
   textEmphasisColor: {
     className: "text-emphasis",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("textEmphasisColor")
   },
   textDecorationStyle: {
     className: "decoration"
@@ -1972,56 +2055,6 @@ var typography = {
     }
   }
 };
-var polyfill = {
-  appearance: {
-    className: "appearance",
-    transform(value) {
-      return { appearance: value, WebkitAppearance: value };
-    }
-  },
-  backfaceVisibility: {
-    className: "backface",
-    transform(value) {
-      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
-    }
-  },
-  clipPath: {
-    className: "clip-path",
-    transform(value) {
-      return { clipPath: value, WebkitClipPath: value };
-    }
-  },
-  hyphens: {
-    className: "hyphens",
-    transform(value) {
-      return { hyphens: value, WebkitHyphens: value };
-    }
-  },
-  mask: {
-    className: "mask",
-    transform(value) {
-      return { mask: value, WebkitMask: value };
-    }
-  },
-  maskImage: {
-    className: "mask-image",
-    transform(value) {
-      return { maskImage: value, WebkitMaskImage: value };
-    }
-  },
-  maskSize: {
-    className: "mask-size",
-    transform(value) {
-      return { maskSize: value, WebkitMaskSize: value };
-    }
-  },
-  textSizeAdjust: {
-    className: "text-size-adjust",
-    transform(value) {
-      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
-    }
-  }
-};
 var utilities = Object.assign(
   {},
   layout,
@@ -2042,7 +2075,8 @@ var utilities = Object.assign(
   interactivity,
   svg,
   helpers,
-  polyfill
+  polyfill,
+  container
 );
 function definePattern(config2) {
   return config2;
@@ -2084,8 +2118,12 @@ var stack = definePattern({
     direction: { type: "property", value: "flexDirection" },
     gap: { type: "property", value: "gap" }
   },
+  defaultValues: {
+    direction: "column",
+    gap: "10px"
+  },
   transform(props) {
-    const { align, justify, direction = "column", gap = "10px", ...rest } = props;
+    const { align, justify, direction, gap, ...rest } = props;
     return {
       display: "flex",
       flexDirection: direction,
@@ -2102,8 +2140,11 @@ var vstack = definePattern({
     justify: { type: "property", value: "justifyContent" },
     gap: { type: "property", value: "gap" }
   },
+  defaultValues: {
+    gap: "10px"
+  },
   transform(props) {
-    const { justify, gap = "10px", ...rest } = props;
+    const { justify, gap, ...rest } = props;
     return {
       display: "flex",
       alignItems: "center",
@@ -2120,8 +2161,11 @@ var hstack = definePattern({
     justify: { type: "property", value: "justifyContent" },
     gap: { type: "property", value: "gap" }
   },
+  defaultValues: {
+    gap: "10px"
+  },
   transform(props) {
-    const { justify, gap = "10px", ...rest } = props;
+    const { justify, gap, ...rest } = props;
     return {
       display: "flex",
       alignItems: "center",
@@ -2189,10 +2233,12 @@ var grid = definePattern({
     columns: { type: "number" },
     minChildWidth: { type: "token", value: "sizes", property: "width" }
   },
-  transform(props, { map }) {
-    const regex = /\d+(cm|in|pt|em|px|rem|vh|vmax|vmin|vw|ch|lh|%)$/;
-    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
-    const getValue = (v) => regex.test(v) ? v : `token(sizes.${v}, ${v})`;
+  defaultValues(props) {
+    return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
+  },
+  transform(props, { map, isCssUnit }) {
+    const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+    const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
     return {
       display: "grid",
       gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
@@ -2248,7 +2294,7 @@ var wrap = definePattern({
     };
   }
 });
-var container = definePattern({
+var container2 = definePattern({
   transform(props) {
     return {
       position: "relative",
@@ -2311,8 +2357,12 @@ var divider = definePattern({
     thickness: { type: "token", value: "sizes", property: "borderWidth" },
     color: { type: "token", value: "colors", property: "borderColor" }
   },
+  defaultValues: {
+    orientation: "horizontal",
+    thickness: "1px"
+  },
   transform(props, { map }) {
-    const { orientation = "horizontal", thickness = "1px", color, ...rest } = props;
+    const { orientation, thickness, color, ...rest } = props;
     return {
       "--thickness": thickness,
       width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
@@ -2374,8 +2424,12 @@ var float = definePattern({
       ]
     }
   },
+  defaultValues(props) {
+    const offset = props.offset || "0";
+    return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
+  },
   transform(props, { map }) {
-    const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props;
+    const { offset, offsetX, offsetY, placement, ...rest } = props;
     return {
       display: "inline-flex",
       justifyContent: "center",
@@ -2416,11 +2470,16 @@ var bleed = definePattern({
     inline: { type: "property", value: "marginInline" },
     block: { type: "property", value: "marginBlock" }
   },
-  transform(props) {
-    const { inline = "0", block = "0", ...rest } = props;
+  defaultValues: {
+    inline: "0",
+    block: "0"
+  },
+  transform(props, { map, isCssUnit, isCssVar }) {
+    const { inline, block, ...rest } = props;
+    const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
     return {
-      "--bleed-x": `spacing.${inline}`,
-      "--bleed-y": `spacing.${block}`,
+      "--bleed-x": map(inline, valueFn),
+      "--bleed-y": map(block, valueFn),
       marginInline: "calc(var(--bleed-x, 0) * -1)",
       marginBlock: "calc(var(--bleed-y, 0) * -1)",
       ...rest
@@ -2435,6 +2494,23 @@ var visuallyHidden = definePattern({
     };
   }
 });
+var cq = definePattern({
+  properties: {
+    name: { type: "token", value: "containerNames", property: "containerName" },
+    type: { type: "property", value: "containerType" }
+  },
+  defaultValues: {
+    type: "inline-size"
+  },
+  transform(props) {
+    const { name, type, ...rest } = props;
+    return {
+      containerType: type,
+      containerName: name,
+      ...rest
+    };
+  }
+});
 var patterns = {
   box,
   flex,
@@ -2451,11 +2527,12 @@ var patterns = {
   grid,
   gridItem,
   wrap,
-  container,
+  container: container2,
   divider,
   float,
   bleed,
-  visuallyHidden
+  visuallyHidden,
+  cq
 };
 var definePreset = (preset22) => preset22;
 var preset = definePreset({
@@ -2465,7 +2542,7 @@ var preset = definePreset({
 });
 var src_default = preset;
 
-// ../node_modules/.pnpm/@pandacss+preset-panda@0.28.0/node_modules/@pandacss/preset-panda/dist/index.mjs
+// ../node_modules/.pnpm/@pandacss+preset-panda@0.30.1/node_modules/@pandacss/preset-panda/dist/index.mjs
 var breakpoints = {
   sm: "640px",
   md: "768px",
@@ -2473,6 +2550,20 @@ var breakpoints = {
   xl: "1280px",
   "2xl": "1536px"
 };
+var containerSizes = {
+  xs: "320px",
+  sm: "384px",
+  md: "448px",
+  lg: "512px",
+  xl: "576px",
+  "2xl": "672px",
+  "3xl": "768px",
+  "4xl": "896px",
+  "5xl": "1024px",
+  "6xl": "1152px",
+  "7xl": "1280px",
+  "8xl": "1440px"
+};
 var keyframes = {
   spin: {
     to: {
@@ -3092,7 +3183,8 @@ var preset2 = definePreset2({
     keyframes,
     breakpoints,
     tokens,
-    textStyles
+    textStyles,
+    containerSizes
   }
 });
 var src_default2 = preset2;
@@ -3433,11 +3525,11 @@ async function getExtendWarnings() {
   }
   return Array.from(warnings);
 }
-async function filterInvalidTokenz(ctx, paths) {
-  return paths.filter((path2) => !ctx.utility.tokens.get(path2));
+async function filterInvalidTokens(ctx, paths) {
+  return paths.filter((path2) => !ctx.utility.tokens.view.get(path2));
 }
 async function isColorToken(ctx, value) {
-  return !!ctx.utility.tokens.values.get("colors")?.get(value);
+  return !!ctx.utility.tokens.view.categoryMap.get("colors")?.get(value);
 }
 async function isColorAttribute(ctx, _attr) {
   const longhand = await resolveLongHand(ctx, _attr);
@@ -3511,8 +3603,8 @@ async function runAsync(action, opts, ...args) {
       return isColorAttribute(ctx, ...args);
     case "isColorToken":
       return isColorToken(ctx, ...args);
-    case "filterInvalidTokenz":
-      return filterInvalidTokenz(ctx, ...args);
+    case "filterInvalidTokens":
+      return filterInvalidTokens(ctx, ...args);
     case "getExtendWarnings":
       return getExtendWarnings();
   }