@pandacss/eslint-plugin 0.0.14 → 0.0.16

package/dist/index.js

@@ -7957,7 +7957,7 @@ init_cjs_shims();
 
 // package.json
 var name = "@pandacss/eslint-plugin";
-var version = "0.0.14";
+var version = "0.0.16";
 
 // src/configs/all.ts
 init_cjs_shims();
@@ -8170,7 +8170,7 @@ var isPandaAttribute = (node, context) => {
       return;
     return isStyledProperty(node, context, callee);
   }
-  return isInJSXProp(node, context);
+  return isInJSXProp(node, context) && isStyledProperty(node, context);
 };
 var resolveLonghand = (name2, context) => {
   return syncAction("resolveLongHand", getSyncOpts(context), name2);
@@ -8715,6 +8715,8 @@ var rule8 = createRule({
           return;
         if (!isInPandaFunction(node, context) && !isInJSXProp(node, context))
           return;
+        if (isStyledProperty(node, context))
+          return;
         const invalidLiteral = isLiteral(node.key) && typeof node.key.value === "string" && !node.key.value.includes("&");
         const invalidTemplateLiteral = isTemplateLiteral(node.key) && !node.key.quasis[0].value.raw.includes("&");
         if (invalidLiteral || invalidTemplateLiteral) {
@@ -8837,11 +8839,162 @@ var rule9 = createRule({
 });
 var no_invalid_token_paths_default = rule9;
 
-// src/rules/no-property-renaming.ts
+// src/rules/no-margin-properties.ts
 init_cjs_shims();
-var RULE_NAME10 = "no-property-renaming";
+var RULE_NAME10 = "no-margin-properties";
 var rule10 = createRule({
   name: RULE_NAME10,
+  meta: {
+    docs: {
+      description: "Discourage using margin properties for spacing; prefer defining spacing in parent elements with `flex` or `grid` using the `gap` property for a more resilient layout. Margins make components less reusable in other contexts."
+    },
+    messages: {
+      noMargin: "Use flex or grid with the `gap` property to define spacing in parent elements for a more resilient layout."
+    },
+    type: "suggestion",
+    schema: []
+  },
+  defaultOptions: [],
+  create(context) {
+    const getLonghand = (name2) => resolveLonghand(name2, context) ?? name2;
+    const sendReport = (node) => {
+      if (!getLonghand(node.name).toLowerCase().includes("margin"))
+        return;
+      return context.report({
+        node,
+        messageId: "noMargin"
+      });
+    };
+    return {
+      JSXAttribute(node) {
+        if (!isJSXIdentifier(node.name))
+          return;
+        if (!isPandaProp(node, context))
+          return;
+        sendReport(node.name);
+      },
+      Property(node) {
+        if (!isIdentifier(node.key))
+          return;
+        if (!isPandaAttribute(node, context))
+          return;
+        sendReport(node.key);
+      }
+    };
+  }
+});
+var no_margin_properties_default = rule10;
+
+// src/rules/no-physical-properties.ts
+init_cjs_shims();
+
+// src/utils/physical-properties.ts
+init_cjs_shims();
+var physicalProperties = {
+  borderBottom: "borderBlockEnd",
+  borderBottomColor: "borderBlockEndColor",
+  borderBottomStyle: "borderBlockEndStyle",
+  borderBottomWidth: "borderBlockEndWidth",
+  borderTop: "borderBlockStart",
+  borderTopColor: "borderBlockStartColor",
+  borderTopStyle: "borderBlockStartStyle",
+  borderTopWidth: "borderBlockStartWidth",
+  borderRight: "borderInlineEnd",
+  borderRightColor: "borderInlineEndColor",
+  borderRightStyle: "borderInlineEndStyle",
+  borderRightWidth: "borderInlineEndWidth",
+  borderLeft: "borderInlineStart",
+  borderLeftColor: "borderInlineStartColor",
+  borderLeftStyle: "borderInlineStartStyle",
+  borderLeftWidth: "borderInlineStartWidth",
+  borderTopLeftRadius: "borderStartStartRadius",
+  borderBottomLeftRadius: "borderEndStartRadius",
+  borderTopRightRadius: "borderStartEndRadius",
+  borderBottomRightRadius: "borderEndEndRadius",
+  marginBottom: "marginBlockEnd",
+  marginTop: "marginBlockStart",
+  marginRight: "marginInlineEnd",
+  marginLeft: "marginInlineStart",
+  paddingBottom: "paddingBlockEnd",
+  paddingTop: "paddingBlockStart",
+  paddingRight: "paddingInlineEnd",
+  paddingLeft: "paddingInlineStart",
+  left: "insetInlineStart",
+  right: "insetInlineEnd",
+  top: "insetBlockStart",
+  bottom: "insetBlockEnd"
+};
+
+// src/rules/no-physical-properties.ts
+var RULE_NAME11 = "no-physical-properties";
+var rule11 = createRule({
+  name: RULE_NAME11,
+  meta: {
+    docs: {
+      description: "Encourage the use of [logical properties](https://mdn.io/logical-properties-basic-concepts) over physical proeprties, to foster a responsive and adaptable user interface."
+    },
+    messages: {
+      physical: "Use logical property of {{physical}} instead. Prefer `{{logical}}`",
+      replace: "Replace `{{physical}}` with `{{logical}}`"
+    },
+    type: "suggestion",
+    hasSuggestions: true,
+    schema: []
+  },
+  defaultOptions: [],
+  create(context) {
+    const getLonghand = (name2) => resolveLonghand(name2, context) ?? name2;
+    const sendReport = (node) => {
+      if (!(getLonghand(node.name) in physicalProperties))
+        return;
+      const logical = physicalProperties[getLonghand(node.name)];
+      const longhand = resolveLonghand(node.name, context);
+      return context.report({
+        node,
+        messageId: "physical",
+        data: {
+          physical: `\`${node.name}\`${longhand ? ` - \`${longhand}\`` : ""}`,
+          logical
+        },
+        suggest: [
+          {
+            messageId: "replace",
+            data: {
+              physical: node.name,
+              logical
+            },
+            fix: (fixer) => {
+              return fixer.replaceTextRange(node.range, logical);
+            }
+          }
+        ]
+      });
+    };
+    return {
+      JSXAttribute(node) {
+        if (!isJSXIdentifier(node.name))
+          return;
+        if (!isPandaProp(node, context))
+          return;
+        sendReport(node.name);
+      },
+      Property(node) {
+        if (!isIdentifier(node.key))
+          return;
+        if (!isPandaAttribute(node, context))
+          return;
+        sendReport(node.key);
+      }
+    };
+  }
+});
+var no_physical_properties_default = rule11;
+
+// src/rules/no-property-renaming.ts
+init_cjs_shims();
+var RULE_NAME12 = "no-property-renaming";
+var rule12 = createRule({
+  name: RULE_NAME12,
   meta: {
     docs: {
       description: "Ensure user does not rename a property for a pattern or style prop. \nIt doesn't get tracked."
@@ -8864,6 +9017,14 @@ var rule10 = createRule({
         }
       });
     };
+    const handleReport = (node, value, attr) => {
+      if (isIdentifier(value) && attr !== value.name) {
+        return sendReport(node, attr, value.name);
+      }
+      if (isMemberExpression(value) && isIdentifier(value.property) && attr !== value.property.name) {
+        return sendReport(node, attr, value.property.name);
+      }
+    };
     return {
       JSXAttribute(node) {
         if (!node.value)
@@ -8874,12 +9035,7 @@ var rule10 = createRule({
           return;
         const attr = node.name.name.toString();
         const expression = node.value.expression;
-        if (isIdentifier(expression) && attr !== expression.name) {
-          return sendReport(node, attr, expression.name);
-        }
-        if (isMemberExpression(expression) && isIdentifier(expression.property) && attr !== expression.property.name) {
-          return sendReport(node, attr, expression.property.name);
-        }
+        handleReport(node, expression, attr);
       },
       Property(node) {
         if (!isIdentifier(node.key))
@@ -8890,25 +9046,20 @@ var rule10 = createRule({
           return;
         const attr = node.key.name.toString();
         const value = node.value;
-        if (isIdentifier(value) && attr !== value.name) {
-          return sendReport(node, attr, value.name);
-        }
-        if (isMemberExpression(value) && isIdentifier(value.property) && attr !== value.property.name) {
-          return sendReport(node, attr, value.property.name);
-        }
+        handleReport(node, value, attr);
       }
     };
   }
 });
-var no_property_renaming_default = rule10;
+var no_property_renaming_default = rule12;
 
 // src/rules/no-unsafe-token-fn-usage.ts
 init_cjs_shims();
-var import_utils15 = require("@typescript-eslint/utils");
+var import_utils17 = require("@typescript-eslint/utils");
 var import_shared3 = require("@pandacss/shared");
-var RULE_NAME11 = "no-unsafe-token-fn-usage";
-var rule11 = createRule({
-  name: RULE_NAME11,
+var RULE_NAME13 = "no-unsafe-token-fn-usage";
+var rule13 = createRule({
+  name: RULE_NAME13,
   meta: {
     docs: {
       description: "Prevent users from using the token function in situations where they could simply use the raw design token."
@@ -9004,13 +9155,13 @@ var rule11 = createRule({
     };
   }
 });
-var no_unsafe_token_fn_usage_default = rule11;
+var no_unsafe_token_fn_usage_default = rule13;
 
 // src/rules/prefer-longhand-properties.ts
 init_cjs_shims();
-var RULE_NAME12 = "prefer-longhand-properties";
-var rule12 = createRule({
-  name: RULE_NAME12,
+var RULE_NAME14 = "prefer-longhand-properties";
+var rule14 = createRule({
+  name: RULE_NAME14,
   meta: {
     docs: {
       description: "Discourage the use of shorthand properties and promote the preference for longhand properties in the codebase."
@@ -9025,10 +9176,12 @@ var rule12 = createRule({
   },
   defaultOptions: [],
   create(context) {
-    const sendReport = (node, name2) => {
-      const longhand = resolveLonghand(name2, context);
+    const sendReport = (node) => {
+      const longhand = resolveLonghand(node.name, context);
+      if (!longhand)
+        return;
       const data = {
-        shorthand: name2,
+        shorthand: node.name,
         longhand
       };
       return context.report({
@@ -9052,31 +9205,25 @@ var rule12 = createRule({
           return;
         if (!isPandaProp(node, context))
           return;
-        const longhand = resolveLonghand(node.name.name, context);
-        if (!longhand)
-          return;
-        sendReport(node.name, node.name.name);
+        sendReport(node.name);
       },
       Property(node) {
         if (!isIdentifier(node.key))
           return;
         if (!isPandaAttribute(node, context))
           return;
-        const longhand = resolveLonghand(node.key.name, context);
-        if (!longhand)
-          return;
-        sendReport(node.key, node.key.name);
+        sendReport(node.key);
       }
     };
   }
 });
-var prefer_longhand_properties_default = rule12;
+var prefer_longhand_properties_default = rule14;
 
 // src/rules/prefer-shorthand-properties.ts
 init_cjs_shims();
-var RULE_NAME13 = "prefer-shorthand-properties";
-var rule13 = createRule({
-  name: RULE_NAME13,
+var RULE_NAME15 = "prefer-shorthand-properties";
+var rule15 = createRule({
+  name: RULE_NAME15,
   meta: {
     docs: {
       description: "Discourage the use of longhand properties and promote the preference for shorthand properties in the codebase."
@@ -9091,13 +9238,16 @@ var rule13 = createRule({
   },
   defaultOptions: [],
   create(context) {
-    const sendReport = (node, name2) => {
-      const shorthands = resolveShorthands(name2, context);
+    const sendReport = (node) => {
+      const longhand = resolveLonghand(node.name, context);
+      if (longhand)
+        return;
+      const shorthands = resolveShorthands(node.name, context);
       if (!shorthands)
         return;
       const shorthand = shorthands.map((s) => `\`${s}\``)?.join(", ");
       const data = {
-        longhand: name2,
+        longhand: node.name,
         shorthand
       };
       return context.report({
@@ -9121,25 +9271,19 @@ var rule13 = createRule({
           return;
         if (!isPandaProp(node, context))
           return;
-        const longhand = resolveLonghand(node.name.name, context);
-        if (longhand)
-          return;
-        sendReport(node.name, node.name.name);
+        sendReport(node.name);
       },
       Property(node) {
         if (!isIdentifier(node.key))
           return;
         if (!isPandaAttribute(node, context))
           return;
-        const longhand = resolveLonghand(node.key.name, context);
-        if (longhand)
-          return;
-        sendReport(node.key, node.key.name);
+        sendReport(node.key);
       }
     };
   }
 });
-var prefer_shorthand_properties_default = rule13;
+var prefer_shorthand_properties_default = rule15;
 
 // src/rules/prefer-atomic-properties.ts
 init_cjs_shims();
@@ -9259,9 +9403,9 @@ var compositeProperties = {
 };
 
 // src/rules/prefer-atomic-properties.ts
-var RULE_NAME14 = "prefer-atomic-properties";
-var rule14 = createRule({
-  name: RULE_NAME14,
+var RULE_NAME16 = "prefer-atomic-properties";
+var rule16 = createRule({
+  name: RULE_NAME16,
   meta: {
     docs: {
       description: "Encourage the use of atomic properties instead of composite properties in the codebase."
@@ -9281,14 +9425,16 @@ var rule14 = createRule({
       if (isValidProperty(longhand, context) && Object.hasOwn(compositeProperties, longhand))
         return longhand;
     };
-    const sendReport = (node, name2) => {
-      const cmp = resolveCompositeProperty(name2);
-      const atomics = compositeProperties[cmp].map((name3) => `\`${name3}\``).join(",\n");
+    const sendReport = (node) => {
+      const cmp = resolveCompositeProperty(node.name);
+      if (!cmp)
+        return;
+      const atomics = compositeProperties[cmp].map((name2) => `\`${name2}\``).join(",\n");
       return context.report({
         node,
         messageId: "atomic",
         data: {
-          composite: name2,
+          composite: node.name,
           atomics
         }
       });
@@ -9299,31 +9445,25 @@ var rule14 = createRule({
           return;
         if (!isPandaProp(node, context))
           return;
-        const cmp = resolveCompositeProperty(node.name.name);
-        if (!cmp)
-          return;
-        sendReport(node, node.name.name);
+        sendReport(node.name);
       },
       Property(node) {
         if (!isIdentifier(node.key))
           return;
         if (!isPandaAttribute(node, context))
           return;
-        const cmp = resolveCompositeProperty(node.key.name);
-        if (!cmp)
-          return;
-        sendReport(node.key, node.key.name);
+        sendReport(node.key);
       }
     };
   }
 });
-var prefer_atomic_properties_default = rule14;
+var prefer_atomic_properties_default = rule16;
 
 // src/rules/prefer-composite-properties.ts
 init_cjs_shims();
-var RULE_NAME15 = "prefer-composite-properties";
-var rule15 = createRule({
-  name: RULE_NAME15,
+var RULE_NAME17 = "prefer-composite-properties";
+var rule17 = createRule({
+  name: RULE_NAME17,
   meta: {
     docs: {
       description: "Encourage the use of composite properties instead of atomic properties in the codebase."
@@ -9342,14 +9482,16 @@ var rule15 = createRule({
         return;
       return Object.keys(compositeProperties).find((cpd) => compositeProperties[cpd].includes(longhand));
     };
-    const sendReport = (node, name2) => {
-      const cmp = resolveCompositeProperty(name2);
+    const sendReport = (node) => {
+      const cmp = resolveCompositeProperty(node.name);
+      if (!cmp)
+        return;
       return context.report({
         node,
         messageId: "composite",
         data: {
           composite: cmp,
-          atomic: name2
+          atomic: node.name
         }
       });
     };
@@ -9359,31 +9501,25 @@ var rule15 = createRule({
           return;
         if (!isPandaProp(node, context))
           return;
-        const atm = resolveCompositeProperty(node.name.name);
-        if (!atm)
-          return;
-        sendReport(node, node.name.name);
+        sendReport(node.name);
       },
       Property(node) {
         if (!isIdentifier(node.key))
           return;
         if (!isPandaAttribute(node, context))
           return;
-        const atm = resolveCompositeProperty(node.key.name);
-        if (!atm)
-          return;
-        sendReport(node.key, node.key.name);
+        sendReport(node.key);
       }
     };
   }
 });
-var prefer_composite_properties_default = rule15;
+var prefer_composite_properties_default = rule17;
 
 // src/rules/prefer-unified-property-style.ts
 init_cjs_shims();
-var RULE_NAME16 = "prefer-unified-property-style";
-var rule16 = createRule({
-  name: RULE_NAME16,
+var RULE_NAME18 = "prefer-unified-property-style";
+var rule18 = createRule({
+  name: RULE_NAME18,
   meta: {
     docs: {
       description: "Discourage against mixing atomic and composite forms of the same property in a style declaration. Atomic styles give more consistent results"
@@ -9398,10 +9534,10 @@ var rule16 = createRule({
   create(context) {
     const getLonghand = (name2) => resolveLonghand(name2, context) ?? name2;
     const resolveCompositeProperty = (name2) => {
-      if (Object.hasOwn(compositeProperties, name2))
+      if (name2 in compositeProperties)
         return name2;
       const longhand = getLonghand(name2);
-      if (isValidProperty(longhand, context) && Object.hasOwn(compositeProperties, longhand))
+      if (isValidProperty(longhand, context) && longhand in compositeProperties)
         return longhand;
     };
     const sendReport = (node, cmp, siblings) => {
@@ -9450,7 +9586,7 @@ var rule16 = createRule({
     };
   }
 });
-var prefer_unified_property_style_default = rule16;
+var prefer_unified_property_style_default = rule18;
 
 // src/rules/index.ts
 var rules = {
@@ -9463,13 +9599,15 @@ var rules = {
   [RULE_NAME7]: no_important_default,
   [RULE_NAME9]: no_invalid_token_paths_default,
   [RULE_NAME8]: no_invalid_nesting_default,
-  [RULE_NAME10]: no_property_renaming_default,
-  [RULE_NAME11]: no_unsafe_token_fn_usage_default,
-  [RULE_NAME12]: prefer_longhand_properties_default,
-  [RULE_NAME13]: prefer_shorthand_properties_default,
-  [RULE_NAME14]: prefer_atomic_properties_default,
-  [RULE_NAME15]: prefer_composite_properties_default,
-  [RULE_NAME16]: prefer_unified_property_style_default
+  [RULE_NAME10]: no_margin_properties_default,
+  [RULE_NAME11]: no_physical_properties_default,
+  [RULE_NAME12]: no_property_renaming_default,
+  [RULE_NAME13]: no_unsafe_token_fn_usage_default,
+  [RULE_NAME14]: prefer_longhand_properties_default,
+  [RULE_NAME15]: prefer_shorthand_properties_default,
+  [RULE_NAME16]: prefer_atomic_properties_default,
+  [RULE_NAME17]: prefer_composite_properties_default,
+  [RULE_NAME18]: prefer_unified_property_style_default
 };
 
 // src/configs/all.ts

package/dist/index.mjs

@@ -10,7 +10,7 @@ var name, version;
 var init_package = __esm({
   "package.json"() {
     name = "@pandacss/eslint-plugin";
-    version = "0.0.14";
+    version = "0.0.16";
   }
 });
 
@@ -8146,7 +8146,7 @@ var init_helpers = __esm({
           return;
         return isStyledProperty(node, context, callee);
       }
-      return isInJSXProp(node, context);
+      return isInJSXProp(node, context) && isStyledProperty(node, context);
     };
     resolveLonghand = (name2, context) => {
       return syncAction("resolveLongHand", getSyncOpts(context), name2);
@@ -8763,6 +8763,8 @@ var init_no_invalid_nesting = __esm({
               return;
             if (!isInPandaFunction(node, context) && !isInJSXProp(node, context))
               return;
+            if (isStyledProperty(node, context))
+              return;
             const invalidLiteral = isLiteral(node.key) && typeof node.key.value === "string" && !node.key.value.includes("&");
             const invalidTemplateLiteral = isTemplateLiteral(node.key) && !node.key.quasis[0].value.raw.includes("&");
             if (invalidLiteral || invalidTemplateLiteral) {
@@ -8896,8 +8898,182 @@ var init_no_invalid_token_paths = __esm({
   }
 });
 
+// src/rules/no-margin-properties.ts
+var RULE_NAME10, rule10, no_margin_properties_default;
+var init_no_margin_properties = __esm({
+  "src/rules/no-margin-properties.ts"() {
+    "use strict";
+    init_esm_shims();
+    init_helpers();
+    init_utils();
+    init_nodes();
+    RULE_NAME10 = "no-margin-properties";
+    rule10 = createRule({
+      name: RULE_NAME10,
+      meta: {
+        docs: {
+          description: "Discourage using margin properties for spacing; prefer defining spacing in parent elements with `flex` or `grid` using the `gap` property for a more resilient layout. Margins make components less reusable in other contexts."
+        },
+        messages: {
+          noMargin: "Use flex or grid with the `gap` property to define spacing in parent elements for a more resilient layout."
+        },
+        type: "suggestion",
+        schema: []
+      },
+      defaultOptions: [],
+      create(context) {
+        const getLonghand = (name2) => resolveLonghand(name2, context) ?? name2;
+        const sendReport = (node) => {
+          if (!getLonghand(node.name).toLowerCase().includes("margin"))
+            return;
+          return context.report({
+            node,
+            messageId: "noMargin"
+          });
+        };
+        return {
+          JSXAttribute(node) {
+            if (!isJSXIdentifier(node.name))
+              return;
+            if (!isPandaProp(node, context))
+              return;
+            sendReport(node.name);
+          },
+          Property(node) {
+            if (!isIdentifier(node.key))
+              return;
+            if (!isPandaAttribute(node, context))
+              return;
+            sendReport(node.key);
+          }
+        };
+      }
+    });
+    no_margin_properties_default = rule10;
+  }
+});
+
+// src/utils/physical-properties.ts
+var physicalProperties;
+var init_physical_properties = __esm({
+  "src/utils/physical-properties.ts"() {
+    "use strict";
+    init_esm_shims();
+    physicalProperties = {
+      borderBottom: "borderBlockEnd",
+      borderBottomColor: "borderBlockEndColor",
+      borderBottomStyle: "borderBlockEndStyle",
+      borderBottomWidth: "borderBlockEndWidth",
+      borderTop: "borderBlockStart",
+      borderTopColor: "borderBlockStartColor",
+      borderTopStyle: "borderBlockStartStyle",
+      borderTopWidth: "borderBlockStartWidth",
+      borderRight: "borderInlineEnd",
+      borderRightColor: "borderInlineEndColor",
+      borderRightStyle: "borderInlineEndStyle",
+      borderRightWidth: "borderInlineEndWidth",
+      borderLeft: "borderInlineStart",
+      borderLeftColor: "borderInlineStartColor",
+      borderLeftStyle: "borderInlineStartStyle",
+      borderLeftWidth: "borderInlineStartWidth",
+      borderTopLeftRadius: "borderStartStartRadius",
+      borderBottomLeftRadius: "borderEndStartRadius",
+      borderTopRightRadius: "borderStartEndRadius",
+      borderBottomRightRadius: "borderEndEndRadius",
+      marginBottom: "marginBlockEnd",
+      marginTop: "marginBlockStart",
+      marginRight: "marginInlineEnd",
+      marginLeft: "marginInlineStart",
+      paddingBottom: "paddingBlockEnd",
+      paddingTop: "paddingBlockStart",
+      paddingRight: "paddingInlineEnd",
+      paddingLeft: "paddingInlineStart",
+      left: "insetInlineStart",
+      right: "insetInlineEnd",
+      top: "insetBlockStart",
+      bottom: "insetBlockEnd"
+    };
+  }
+});
+
+// src/rules/no-physical-properties.ts
+var RULE_NAME11, rule11, no_physical_properties_default;
+var init_no_physical_properties = __esm({
+  "src/rules/no-physical-properties.ts"() {
+    "use strict";
+    init_esm_shims();
+    init_helpers();
+    init_utils();
+    init_nodes();
+    init_physical_properties();
+    RULE_NAME11 = "no-physical-properties";
+    rule11 = createRule({
+      name: RULE_NAME11,
+      meta: {
+        docs: {
+          description: "Encourage the use of [logical properties](https://mdn.io/logical-properties-basic-concepts) over physical proeprties, to foster a responsive and adaptable user interface."
+        },
+        messages: {
+          physical: "Use logical property of {{physical}} instead. Prefer `{{logical}}`",
+          replace: "Replace `{{physical}}` with `{{logical}}`"
+        },
+        type: "suggestion",
+        hasSuggestions: true,
+        schema: []
+      },
+      defaultOptions: [],
+      create(context) {
+        const getLonghand = (name2) => resolveLonghand(name2, context) ?? name2;
+        const sendReport = (node) => {
+          if (!(getLonghand(node.name) in physicalProperties))
+            return;
+          const logical = physicalProperties[getLonghand(node.name)];
+          const longhand = resolveLonghand(node.name, context);
+          return context.report({
+            node,
+            messageId: "physical",
+            data: {
+              physical: `\`${node.name}\`${longhand ? ` - \`${longhand}\`` : ""}`,
+              logical
+            },
+            suggest: [
+              {
+                messageId: "replace",
+                data: {
+                  physical: node.name,
+                  logical
+                },
+                fix: (fixer) => {
+                  return fixer.replaceTextRange(node.range, logical);
+                }
+              }
+            ]
+          });
+        };
+        return {
+          JSXAttribute(node) {
+            if (!isJSXIdentifier(node.name))
+              return;
+            if (!isPandaProp(node, context))
+              return;
+            sendReport(node.name);
+          },
+          Property(node) {
+            if (!isIdentifier(node.key))
+              return;
+            if (!isPandaAttribute(node, context))
+              return;
+            sendReport(node.key);
+          }
+        };
+      }
+    });
+    no_physical_properties_default = rule11;
+  }
+});
+
 // src/rules/no-property-renaming.ts
-var RULE_NAME10, rule10, no_property_renaming_default;
+var RULE_NAME12, rule12, no_property_renaming_default;
 var init_no_property_renaming = __esm({
   "src/rules/no-property-renaming.ts"() {
     "use strict";
@@ -8905,9 +9081,9 @@ var init_no_property_renaming = __esm({
     init_utils();
     init_helpers();
     init_nodes();
-    RULE_NAME10 = "no-property-renaming";
-    rule10 = createRule({
-      name: RULE_NAME10,
+    RULE_NAME12 = "no-property-renaming";
+    rule12 = createRule({
+      name: RULE_NAME12,
       meta: {
         docs: {
           description: "Ensure user does not rename a property for a pattern or style prop. \nIt doesn't get tracked."
@@ -8930,6 +9106,14 @@ var init_no_property_renaming = __esm({
             }
           });
         };
+        const handleReport = (node, value, attr) => {
+          if (isIdentifier(value) && attr !== value.name) {
+            return sendReport(node, attr, value.name);
+          }
+          if (isMemberExpression(value) && isIdentifier(value.property) && attr !== value.property.name) {
+            return sendReport(node, attr, value.property.name);
+          }
+        };
         return {
           JSXAttribute(node) {
             if (!node.value)
@@ -8940,12 +9124,7 @@ var init_no_property_renaming = __esm({
               return;
             const attr = node.name.name.toString();
             const expression = node.value.expression;
-            if (isIdentifier(expression) && attr !== expression.name) {
-              return sendReport(node, attr, expression.name);
-            }
-            if (isMemberExpression(expression) && isIdentifier(expression.property) && attr !== expression.property.name) {
-              return sendReport(node, attr, expression.property.name);
-            }
+            handleReport(node, expression, attr);
           },
           Property(node) {
             if (!isIdentifier(node.key))
@@ -8956,24 +9135,19 @@ var init_no_property_renaming = __esm({
               return;
             const attr = node.key.name.toString();
             const value = node.value;
-            if (isIdentifier(value) && attr !== value.name) {
-              return sendReport(node, attr, value.name);
-            }
-            if (isMemberExpression(value) && isIdentifier(value.property) && attr !== value.property.name) {
-              return sendReport(node, attr, value.property.name);
-            }
+            handleReport(node, value, attr);
           }
         };
       }
     });
-    no_property_renaming_default = rule10;
+    no_property_renaming_default = rule12;
   }
 });
 
 // src/rules/no-unsafe-token-fn-usage.ts
 import "@typescript-eslint/utils";
 import { getArbitraryValue as getArbitraryValue3 } from "@pandacss/shared";
-var RULE_NAME11, rule11, no_unsafe_token_fn_usage_default;
+var RULE_NAME13, rule13, no_unsafe_token_fn_usage_default;
 var init_no_unsafe_token_fn_usage = __esm({
   "src/rules/no-unsafe-token-fn-usage.ts"() {
     "use strict";
@@ -8981,9 +9155,9 @@ var init_no_unsafe_token_fn_usage = __esm({
     init_helpers();
     init_utils();
     init_nodes();
-    RULE_NAME11 = "no-unsafe-token-fn-usage";
-    rule11 = createRule({
-      name: RULE_NAME11,
+    RULE_NAME13 = "no-unsafe-token-fn-usage";
+    rule13 = createRule({
+      name: RULE_NAME13,
       meta: {
         docs: {
           description: "Prevent users from using the token function in situations where they could simply use the raw design token."
@@ -9079,12 +9253,12 @@ var init_no_unsafe_token_fn_usage = __esm({
         };
       }
     });
-    no_unsafe_token_fn_usage_default = rule11;
+    no_unsafe_token_fn_usage_default = rule13;
   }
 });
 
 // src/rules/prefer-longhand-properties.ts
-var RULE_NAME12, rule12, prefer_longhand_properties_default;
+var RULE_NAME14, rule14, prefer_longhand_properties_default;
 var init_prefer_longhand_properties = __esm({
   "src/rules/prefer-longhand-properties.ts"() {
     "use strict";
@@ -9092,9 +9266,9 @@ var init_prefer_longhand_properties = __esm({
     init_helpers();
     init_utils();
     init_nodes();
-    RULE_NAME12 = "prefer-longhand-properties";
-    rule12 = createRule({
-      name: RULE_NAME12,
+    RULE_NAME14 = "prefer-longhand-properties";
+    rule14 = createRule({
+      name: RULE_NAME14,
       meta: {
         docs: {
           description: "Discourage the use of shorthand properties and promote the preference for longhand properties in the codebase."
@@ -9109,10 +9283,12 @@ var init_prefer_longhand_properties = __esm({
       },
       defaultOptions: [],
       create(context) {
-        const sendReport = (node, name2) => {
-          const longhand = resolveLonghand(name2, context);
+        const sendReport = (node) => {
+          const longhand = resolveLonghand(node.name, context);
+          if (!longhand)
+            return;
           const data = {
-            shorthand: name2,
+            shorthand: node.name,
             longhand
           };
           return context.report({
@@ -9136,30 +9312,24 @@ var init_prefer_longhand_properties = __esm({
               return;
             if (!isPandaProp(node, context))
               return;
-            const longhand = resolveLonghand(node.name.name, context);
-            if (!longhand)
-              return;
-            sendReport(node.name, node.name.name);
+            sendReport(node.name);
           },
           Property(node) {
             if (!isIdentifier(node.key))
               return;
             if (!isPandaAttribute(node, context))
               return;
-            const longhand = resolveLonghand(node.key.name, context);
-            if (!longhand)
-              return;
-            sendReport(node.key, node.key.name);
+            sendReport(node.key);
           }
         };
       }
     });
-    prefer_longhand_properties_default = rule12;
+    prefer_longhand_properties_default = rule14;
   }
 });
 
 // src/rules/prefer-shorthand-properties.ts
-var RULE_NAME13, rule13, prefer_shorthand_properties_default;
+var RULE_NAME15, rule15, prefer_shorthand_properties_default;
 var init_prefer_shorthand_properties = __esm({
   "src/rules/prefer-shorthand-properties.ts"() {
     "use strict";
@@ -9167,9 +9337,9 @@ var init_prefer_shorthand_properties = __esm({
     init_helpers();
     init_utils();
     init_nodes();
-    RULE_NAME13 = "prefer-shorthand-properties";
-    rule13 = createRule({
-      name: RULE_NAME13,
+    RULE_NAME15 = "prefer-shorthand-properties";
+    rule15 = createRule({
+      name: RULE_NAME15,
       meta: {
         docs: {
           description: "Discourage the use of longhand properties and promote the preference for shorthand properties in the codebase."
@@ -9184,13 +9354,16 @@ var init_prefer_shorthand_properties = __esm({
       },
       defaultOptions: [],
       create(context) {
-        const sendReport = (node, name2) => {
-          const shorthands = resolveShorthands(name2, context);
+        const sendReport = (node) => {
+          const longhand = resolveLonghand(node.name, context);
+          if (longhand)
+            return;
+          const shorthands = resolveShorthands(node.name, context);
           if (!shorthands)
             return;
           const shorthand = shorthands.map((s) => `\`${s}\``)?.join(", ");
           const data = {
-            longhand: name2,
+            longhand: node.name,
             shorthand
           };
           return context.report({
@@ -9214,25 +9387,19 @@ var init_prefer_shorthand_properties = __esm({
               return;
             if (!isPandaProp(node, context))
               return;
-            const longhand = resolveLonghand(node.name.name, context);
-            if (longhand)
-              return;
-            sendReport(node.name, node.name.name);
+            sendReport(node.name);
           },
           Property(node) {
             if (!isIdentifier(node.key))
               return;
             if (!isPandaAttribute(node, context))
               return;
-            const longhand = resolveLonghand(node.key.name, context);
-            if (longhand)
-              return;
-            sendReport(node.key, node.key.name);
+            sendReport(node.key);
           }
         };
       }
     });
-    prefer_shorthand_properties_default = rule13;
+    prefer_shorthand_properties_default = rule15;
   }
 });
 
@@ -9357,7 +9524,7 @@ var init_composite_properties = __esm({
 });
 
 // src/rules/prefer-atomic-properties.ts
-var RULE_NAME14, rule14, prefer_atomic_properties_default;
+var RULE_NAME16, rule16, prefer_atomic_properties_default;
 var init_prefer_atomic_properties = __esm({
   "src/rules/prefer-atomic-properties.ts"() {
     "use strict";
@@ -9366,9 +9533,9 @@ var init_prefer_atomic_properties = __esm({
     init_utils();
     init_composite_properties();
     init_nodes();
-    RULE_NAME14 = "prefer-atomic-properties";
-    rule14 = createRule({
-      name: RULE_NAME14,
+    RULE_NAME16 = "prefer-atomic-properties";
+    rule16 = createRule({
+      name: RULE_NAME16,
       meta: {
         docs: {
           description: "Encourage the use of atomic properties instead of composite properties in the codebase."
@@ -9388,14 +9555,16 @@ var init_prefer_atomic_properties = __esm({
           if (isValidProperty(longhand, context) && Object.hasOwn(compositeProperties, longhand))
             return longhand;
         };
-        const sendReport = (node, name2) => {
-          const cmp = resolveCompositeProperty(name2);
-          const atomics = compositeProperties[cmp].map((name3) => `\`${name3}\``).join(",\n");
+        const sendReport = (node) => {
+          const cmp = resolveCompositeProperty(node.name);
+          if (!cmp)
+            return;
+          const atomics = compositeProperties[cmp].map((name2) => `\`${name2}\``).join(",\n");
           return context.report({
             node,
             messageId: "atomic",
             data: {
-              composite: name2,
+              composite: node.name,
               atomics
             }
           });
@@ -9406,30 +9575,24 @@ var init_prefer_atomic_properties = __esm({
               return;
             if (!isPandaProp(node, context))
               return;
-            const cmp = resolveCompositeProperty(node.name.name);
-            if (!cmp)
-              return;
-            sendReport(node, node.name.name);
+            sendReport(node.name);
           },
           Property(node) {
             if (!isIdentifier(node.key))
               return;
             if (!isPandaAttribute(node, context))
               return;
-            const cmp = resolveCompositeProperty(node.key.name);
-            if (!cmp)
-              return;
-            sendReport(node.key, node.key.name);
+            sendReport(node.key);
           }
         };
       }
     });
-    prefer_atomic_properties_default = rule14;
+    prefer_atomic_properties_default = rule16;
   }
 });
 
 // src/rules/prefer-composite-properties.ts
-var RULE_NAME15, rule15, prefer_composite_properties_default;
+var RULE_NAME17, rule17, prefer_composite_properties_default;
 var init_prefer_composite_properties = __esm({
   "src/rules/prefer-composite-properties.ts"() {
     "use strict";
@@ -9438,9 +9601,9 @@ var init_prefer_composite_properties = __esm({
     init_utils();
     init_composite_properties();
     init_nodes();
-    RULE_NAME15 = "prefer-composite-properties";
-    rule15 = createRule({
-      name: RULE_NAME15,
+    RULE_NAME17 = "prefer-composite-properties";
+    rule17 = createRule({
+      name: RULE_NAME17,
       meta: {
         docs: {
           description: "Encourage the use of composite properties instead of atomic properties in the codebase."
@@ -9459,14 +9622,16 @@ var init_prefer_composite_properties = __esm({
             return;
           return Object.keys(compositeProperties).find((cpd) => compositeProperties[cpd].includes(longhand));
         };
-        const sendReport = (node, name2) => {
-          const cmp = resolveCompositeProperty(name2);
+        const sendReport = (node) => {
+          const cmp = resolveCompositeProperty(node.name);
+          if (!cmp)
+            return;
           return context.report({
             node,
             messageId: "composite",
             data: {
               composite: cmp,
-              atomic: name2
+              atomic: node.name
             }
           });
         };
@@ -9476,30 +9641,24 @@ var init_prefer_composite_properties = __esm({
               return;
             if (!isPandaProp(node, context))
               return;
-            const atm = resolveCompositeProperty(node.name.name);
-            if (!atm)
-              return;
-            sendReport(node, node.name.name);
+            sendReport(node.name);
           },
           Property(node) {
             if (!isIdentifier(node.key))
               return;
             if (!isPandaAttribute(node, context))
               return;
-            const atm = resolveCompositeProperty(node.key.name);
-            if (!atm)
-              return;
-            sendReport(node.key, node.key.name);
+            sendReport(node.key);
           }
         };
       }
     });
-    prefer_composite_properties_default = rule15;
+    prefer_composite_properties_default = rule17;
   }
 });
 
 // src/rules/prefer-unified-property-style.ts
-var RULE_NAME16, rule16, prefer_unified_property_style_default;
+var RULE_NAME18, rule18, prefer_unified_property_style_default;
 var init_prefer_unified_property_style = __esm({
   "src/rules/prefer-unified-property-style.ts"() {
     "use strict";
@@ -9508,9 +9667,9 @@ var init_prefer_unified_property_style = __esm({
     init_utils();
     init_composite_properties();
     init_nodes();
-    RULE_NAME16 = "prefer-unified-property-style";
-    rule16 = createRule({
-      name: RULE_NAME16,
+    RULE_NAME18 = "prefer-unified-property-style";
+    rule18 = createRule({
+      name: RULE_NAME18,
       meta: {
         docs: {
           description: "Discourage against mixing atomic and composite forms of the same property in a style declaration. Atomic styles give more consistent results"
@@ -9525,10 +9684,10 @@ var init_prefer_unified_property_style = __esm({
       create(context) {
         const getLonghand = (name2) => resolveLonghand(name2, context) ?? name2;
         const resolveCompositeProperty = (name2) => {
-          if (Object.hasOwn(compositeProperties, name2))
+          if (name2 in compositeProperties)
             return name2;
           const longhand = getLonghand(name2);
-          if (isValidProperty(longhand, context) && Object.hasOwn(compositeProperties, longhand))
+          if (isValidProperty(longhand, context) && longhand in compositeProperties)
             return longhand;
         };
         const sendReport = (node, cmp, siblings) => {
@@ -9577,7 +9736,7 @@ var init_prefer_unified_property_style = __esm({
         };
       }
     });
-    prefer_unified_property_style_default = rule16;
+    prefer_unified_property_style_default = rule18;
   }
 });
 
@@ -9596,6 +9755,8 @@ var init_rules = __esm({
     init_no_important();
     init_no_invalid_nesting();
     init_no_invalid_token_paths();
+    init_no_margin_properties();
+    init_no_physical_properties();
     init_no_property_renaming();
     init_no_unsafe_token_fn_usage();
     init_prefer_longhand_properties();
@@ -9613,13 +9774,15 @@ var init_rules = __esm({
       [RULE_NAME7]: no_important_default,
       [RULE_NAME9]: no_invalid_token_paths_default,
       [RULE_NAME8]: no_invalid_nesting_default,
-      [RULE_NAME10]: no_property_renaming_default,
-      [RULE_NAME11]: no_unsafe_token_fn_usage_default,
-      [RULE_NAME12]: prefer_longhand_properties_default,
-      [RULE_NAME13]: prefer_shorthand_properties_default,
-      [RULE_NAME14]: prefer_atomic_properties_default,
-      [RULE_NAME15]: prefer_composite_properties_default,
-      [RULE_NAME16]: prefer_unified_property_style_default
+      [RULE_NAME10]: no_margin_properties_default,
+      [RULE_NAME11]: no_physical_properties_default,
+      [RULE_NAME12]: no_property_renaming_default,
+      [RULE_NAME13]: no_unsafe_token_fn_usage_default,
+      [RULE_NAME14]: prefer_longhand_properties_default,
+      [RULE_NAME15]: prefer_shorthand_properties_default,
+      [RULE_NAME16]: prefer_atomic_properties_default,
+      [RULE_NAME17]: prefer_composite_properties_default,
+      [RULE_NAME18]: prefer_unified_property_style_default
     };
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/eslint-plugin",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Eslint plugin for Panda CSS",
   "author": "Abraham Aremu <anubra266@gmail.com>",
   "main": "dist/index.js",