@pandacss/eslint-plugin 0.0.8 → 0.0.10

package/dist/utils/worker.mjs

@@ -1,6 +1,6 @@
 import {
   init_esm_shims
-} from "../chunk-6BVJTDXV.mjs";
+} from "../chunk-HALLAYDZ.mjs";
 
 // src/utils/worker.ts
 init_esm_shims();
@@ -13,7 +13,7 @@ init_esm_shims();
 // ../fixture/src/config.ts
 init_esm_shims();
 
-// ../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
 init_esm_shims();
 var conditions = {
   hover: "&:is(:hover, [data-hover])",
@@ -105,6 +105,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",
@@ -135,12 +145,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",
@@ -215,32 +227,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",
@@ -385,7 +391,8 @@ var border = {
   },
   borderColor: {
     className: "border",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderColor")
   },
   borderInline: {
     className: "border-x",
@@ -400,7 +407,8 @@ var border = {
   borderInlineColor: {
     className: "border-x",
     values: "colors",
-    shorthand: "borderXColor"
+    shorthand: "borderXColor",
+    transform: createColorMixTransform("borderInlineColor")
   },
   borderBlock: {
     className: "border-y",
@@ -415,7 +423,8 @@ var border = {
   borderBlockColor: {
     className: "border-y",
     values: "colors",
-    shorthand: "borderYColor"
+    shorthand: "borderYColor",
+    transform: createColorMixTransform("borderBlockColor")
   },
   borderLeft: {
     className: "border-l",
@@ -423,7 +432,8 @@ var border = {
   },
   borderLeftColor: {
     className: "border-l",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderLeftColor")
   },
   borderInlineStart: {
     className: "border-s",
@@ -438,7 +448,8 @@ var border = {
   borderInlineStartColor: {
     className: "border-s",
     values: "colors",
-    shorthand: "borderStartColor"
+    shorthand: "borderStartColor",
+    transform: createColorMixTransform("borderInlineStartColor")
   },
   borderRight: {
     className: "border-r",
@@ -446,7 +457,8 @@ var border = {
   },
   borderRightColor: {
     className: "border-r",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderRightColor")
   },
   borderInlineEnd: {
     className: "border-e",
@@ -461,7 +473,8 @@ var border = {
   borderInlineEndColor: {
     className: "border-e",
     values: "colors",
-    shorthand: "borderEndColor"
+    shorthand: "borderEndColor",
+    transform: createColorMixTransform("borderInlineEndColor")
   },
   borderTop: {
     className: "border-t",
@@ -469,7 +482,8 @@ var border = {
   },
   borderTopColor: {
     className: "border-t",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderTopColor")
   },
   borderBottom: {
     className: "border-b",
@@ -477,7 +491,8 @@ var border = {
   },
   borderBottomColor: {
     className: "border-b",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderBottomColor")
   },
   borderBlockEnd: {
     className: "border-be",
@@ -485,7 +500,8 @@ var border = {
   },
   borderBlockEndColor: {
     className: "border-be",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderBlockEndColor")
   },
   borderBlockStart: {
     className: "border-bs",
@@ -493,7 +509,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 = {
@@ -555,11 +585,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)
       };
     }
   },
@@ -575,6 +603,7 @@ var divide = {
     }
   }
 };
+var divideColor = createColorMixTransform("borderColor");
 var effects = {
   opacity: {
     values: "opacity"
@@ -588,11 +617,7 @@ var effects = {
     shorthand: "shadowColor",
     className: "shadow",
     values: "colors",
-    transform(value) {
-      return {
-        "--shadow-color": value
-      };
-    }
+    transform: createColorMixTransform("--shadow-color")
   },
   mixBlendMode: {
     className: "mix-blend"
@@ -1018,11 +1043,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"
@@ -1395,7 +1422,8 @@ var outline = {
   outlineColor: {
     className: "ring",
     values: "colors",
-    shorthand: "ringColor"
+    shorthand: "ringColor",
+    transform: createColorMixTransform("outlineColor")
   },
   outline: {
     className: "ring",
@@ -1414,6 +1442,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"),
@@ -1639,11 +1717,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",
@@ -1831,7 +1911,8 @@ var transitions = {
 var typography = {
   color: {
     className: "text",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("color")
   },
   fontFamily: {
     className: "font",
@@ -1876,11 +1957,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"
@@ -1948,56 +2031,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,
@@ -2018,7 +2051,8 @@ var utilities = Object.assign(
   interactivity,
   svg,
   helpers,
-  polyfill
+  polyfill,
+  container
 );
 function definePattern(config2) {
   return config2;
@@ -2060,8 +2094,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,
@@ -2078,8 +2116,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",
@@ -2096,8 +2137,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",
@@ -2165,10 +2209,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,
@@ -2224,7 +2270,7 @@ var wrap = definePattern({
     };
   }
 });
-var container = definePattern({
+var container2 = definePattern({
   transform(props) {
     return {
       position: "relative",
@@ -2287,8 +2333,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%"),
@@ -2350,8 +2400,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",
@@ -2392,11 +2446,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
@@ -2411,6 +2470,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,
@@ -2427,11 +2503,12 @@ var patterns = {
   grid,
   gridItem,
   wrap,
-  container,
+  container: container2,
   divider,
   float,
   bleed,
-  visuallyHidden
+  visuallyHidden,
+  cq
 };
 var definePreset = (preset22) => preset22;
 var preset = definePreset({
@@ -2441,7 +2518,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
 init_esm_shims();
 var breakpoints = {
   sm: "640px",
@@ -2450,6 +2527,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: {
@@ -3069,7 +3160,8 @@ var preset2 = definePreset2({
     keyframes,
     breakpoints,
     tokens,
-    textStyles
+    textStyles,
+    containerSizes
   }
 });
 var src_default2 = preset2;
@@ -3417,11 +3509,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);
@@ -3440,8 +3532,9 @@ async function isConfigFile(fileName) {
 async function isValidFile(ctx, fileName) {
   return ctx.getFiles().includes(fileName);
 }
-async function resolveShorthand(ctx, name) {
-  return ctx.utility.resolveShorthand(name);
+async function resolveShorthands(ctx, name) {
+  console.log("name", name, ctx.utility.getPropShorthandsMap().get(name));
+  return ctx.utility.getPropShorthandsMap().get(name);
 }
 async function resolveLongHand(ctx, name) {
   const reverseShorthandsMap = /* @__PURE__ */ new Map();
@@ -3485,8 +3578,8 @@ async function runAsync(action, opts, ...args) {
       return isValidProperty(ctx, ...args);
     case "resolveLongHand":
       return resolveLongHand(ctx, ...args);
-    case "resolveShorthand":
-      return resolveShorthand(ctx, ...args);
+    case "resolveShorthands":
+      return resolveShorthands(ctx, ...args);
     case "isConfigFile":
       return isConfigFile(opts.currentFile);
     case "isValidFile":
@@ -3495,8 +3588,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();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/eslint-plugin",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Eslint plugin for Panda CSS",
   "author": "Abraham Aremu <anubra266@gmail.com>",
   "main": "dist/index.js",
@@ -26,10 +26,10 @@
     "dist"
   ],
   "dependencies": {
-    "@pandacss/config": "^0.29.1",
-    "@pandacss/generator": "^0.29.1",
-    "@pandacss/node": "^0.29.1",
-    "@pandacss/shared": "^0.29.1",
+    "@pandacss/config": "^0.30.1",
+    "@pandacss/generator": "^0.30.1",
+    "@pandacss/node": "^0.30.1",
+    "@pandacss/shared": "^0.30.1",
     "@typescript-eslint/utils": "^6.19.1",
     "hookable": "^5.5.3",
     "synckit": "^0.9.0"