Switch from auto fixable to suggestions

Author: anubra266

.changeset/curvy-phones-tap.md

@@ -0,0 +1,5 @@
+---
+"@pandacss/eslint-plugin": patch
+---
+
+Switch from auto fixable to suggestions

docs/rules/no-config-function-in-source.md

@@ -8,8 +8,6 @@ Prohibit the use of config functions outside the Panda config.
 
 📋 This rule is enabled in `plugin:@pandacss/recommended`.
 
-🔧 The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
-
 ## Rule details
 
 ❌ Examples of **incorrect** code for a file named `App.tsx`:
@@ -47,23 +45,6 @@ export default defineConfig({
 });
 ```
 
-🔧 Examples of code **fixed** by this rule for a file named `App.tsx`:
-```js
-import {  defineKeyframes } from '@pandacss/dev'; /* → */ import {   } from '@pandacss/dev';
-import { css } from './panda/css';                /* → */ import { css } from './panda/css';
-                                                  /* → */
-const keyframes = defineKeyframes({               /* → */
-  fadeIn: {                                       /* → */
-    '0%': { opacity: '0' },                       /* → */ const styles = css({
-    '100%': { opacity: '1' },                     /* → */   animation: 'fadeIn 1s ease-in-out',
-  },                                              /* → */ });
-});                                               /* → */
-                                                  /* → */
-const styles = css({                              /* → */
-  animation: 'fadeIn 1s ease-in-out',             /* → */
-});                                               /* → */
-```
-
 ## Resources
 
 * [Rule source](/plugin/src/rules/no-config-function-in-source.ts)

docs/rules/no-debug.md

@@ -8,8 +8,6 @@ Disallow the inclusion of the debug attribute when shipping code to the producti
 
 📋 This rule is enabled in `plugin:@pandacss/recommended`.
 
-🔧 The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
-
 ## Rule details
 
 ❌ Examples of **incorrect** code:
@@ -34,17 +32,6 @@ import { css } from './panda/css';
 const styles = css.raw({ color: 'gray.50' })
 ```
 
-🔧 Examples of code **fixed** by this rule:
-```js
-import { css } from './panda/css';                        /* → */ import { css } from './panda/css';
-                                                          /* → */
-const styles = css({ bg: 'gray.900', debug: true });      /* → */ const styles = css({ bg: 'gray.900', });
-
-import { css } from './panda/css';                        /* → */ import { css } from './panda/css';
-                                                          /* → */
-const styles = css.raw({ color: 'gray.50', debug: true }) /* → */ const styles = css.raw({ color: 'gray.50', })
-```
-
 ## Resources
 
 * [Rule source](/plugin/src/rules/no-debug.ts)

docs/rules/no-dynamic-styling.md

@@ -2,7 +2,8 @@
 
 # no-dynamic-styling
 
-Ensure user doesn't use dynamic styling at any point. Prefer to use static styles, leverage css variables or recipes for known dynamic styles.
+Ensure user doesn't use dynamic styling at any point. 
+Prefer to use static styles, leverage css variables or recipes for known dynamic styles.
 
 📋 This rule is enabled in `plugin:@pandacss/all`.
 

docs/rules/no-escape-hatch.md

@@ -6,8 +6,6 @@ Prohibit the use of escape hatch syntax in the code.
 
 📋 This rule is enabled in `plugin:@pandacss/all`.
 
-🔧 The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
-
 ## Rule details
 
 ❌ Examples of **incorrect** code:
@@ -48,25 +46,6 @@ function App(){
 }
 ```
 
-🔧 Examples of code **fixed** by this rule:
-```js
-import { css } from './panda/css';                           /* → */ import { css } from './panda/css';
-                                                             /* → */
-const styles = css({ marginLeft: '[4px]' });                 /* → */ const styles = css({ marginLeft: '4px' });
-
-import { css } from './panda/css';                           /* → */ import { css } from './panda/css';
-                                                             /* → */
-function App(){                                              /* → */ function App(){
-  return  <div className={css({ background: '[#111]' })} />; /* → */   return  <div className={css({ background: '#111' })} />;
-};                                                           /* → */ };
-
-import { Circle } from './panda/jsx';                        /* → */ import { Circle } from './panda/jsx';
-                                                             /* → */
-function App(){                                              /* → */ function App(){
-  return  <Circle _hover={{ position: '[absolute]' }} />;    /* → */   return  <Circle _hover={{ position: 'absolute' }} />;
-}                                                            /* → */ }
-```
-
 ## Resources
 
 * [Rule source](/plugin/src/rules/no-escape-hatch.ts)

docs/rules/no-property-renaming.md

@@ -2,7 +2,8 @@
 
 # no-property-renaming
 
-Ensure user does not rename a property for a pattern or style prop. It doesn't get tracked.
+Ensure user does not rename a property for a pattern or style prop. 
+It doesn't get tracked.
 
 📋 This rule is enabled in `plugin:@pandacss/all`.
 
@@ -22,27 +23,6 @@ import { css } from './panda/css';
 
 function Text(props){
   return <p className={css({ textStyle: props.variant })} />;
-};
-
-import { Circle } from './panda/jsx';
-
-function CustomCircle(props){
-  const { circleSize = '3' } = props
-  return (
-    <Circle
-      size={circleSize}
-    />
-  )
-};
-
-import { Circle } from './panda/jsx';
-
-function CustomCircle(props){
-  return (
-    <Circle
-      size={props.circleSize}
-    />
-  )
 }
 ```
 

docs/rules/no-shorthand-prop.md

@@ -6,8 +6,6 @@ Discourage the use of shorthand properties and promote the preference for longha
 
 📋 This rule is enabled in `plugin:@pandacss/all`.
 
-🔧 The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
-
 ## Rule details
 
 ❌ Examples of **incorrect** code:
@@ -48,25 +46,6 @@ function App(){
 }
 ```
 
-🔧 Examples of code **fixed** by this rule:
-```js
-import { css } from './panda/css';                    /* → */ import { css } from './panda/css';
-                                                      /* → */
-const styles = css({ ml: '4' });                      /* → */ const styles = css({ marginLeft: '4' });
-
-import { css } from './panda/css';                    /* → */ import { css } from './panda/css';
-                                                      /* → */
-function App(){                                       /* → */ function App(){
-  return  <div className={css({ bg: 'red.100' })} />; /* → */   return  <div className={css({ background: 'red.100' })} />;
-};                                                    /* → */ };
-
-import { Circle } from './panda/jsx';                 /* → */ import { Circle } from './panda/jsx';
-                                                      /* → */
-function App(){                                       /* → */ function App(){
-  return  <Circle _hover={{  pos: 'absolute' }} />;   /* → */   return  <Circle _hover={{  position: 'absolute' }} />;
-}                                                     /* → */ }
-```
-
 ## Resources
 
 * [Rule source](/plugin/src/rules/no-shorthand-prop.ts)

docs/rules/no-unsafe-token-fn-usage.md

@@ -6,8 +6,6 @@ Prevent users from using the token function in situations where they could simpl
 
 📋 This rule is enabled in `plugin:@pandacss/all`.
 
-🔧 The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
-
 ## Rule details
 
 ❌ Examples of **incorrect** code:
@@ -18,17 +16,17 @@ import { css } from './panda/css';
 const styles = css({ bg: token('colors.red.300') });
 
 import { token } from './panda/tokens';
-import { css } from './panda/css';
+  import { css } from './panda/css';
 
-function App(){
-  return  <div className={css({ bg: 'token(colors.red.300)' })} />;
-};
+  function App(){
+    return  <div className={css({ bg: 'token(colors.red.300)' })} />;
+  };
 
 import { Circle } from './panda/jsx';
 
-function App(){
-  return  <Circle margin='{sizes.4}' />;
-}
+  function App(){
+    return  <Circle margin='{sizes.4}' />;
+  }
 ```
 
 ✔️ Examples of **correct** code:
@@ -51,27 +49,6 @@ function App(){
 }
 ```
 
-🔧 Examples of code **fixed** by this rule:
-```js
-import { token } from './panda/tokens';                             /* → */ import { token } from './panda/tokens';
-import { css } from './panda/css';                                  /* → */ import { css } from './panda/css';
-                                                                    /* → */
-const styles = css({ bg: token('colors.red.300') });                /* → */ const styles = css({ bg: 'red.300' });
-
-import { token } from './panda/tokens';                             /* → */ import { token } from './panda/tokens';
-import { css } from './panda/css';                                  /* → */ import { css } from './panda/css';
-                                                                    /* → */
-function App(){                                                     /* → */ function App(){
-  return  <div className={css({ bg: 'token(colors.red.300)' })} />; /* → */   return  <div className={css({ bg: 'red.300' })} />;
-};                                                                  /* → */ };
-
-import { Circle } from './panda/jsx';                               /* → */ import { Circle } from './panda/jsx';
-                                                                    /* → */
-function App(){                                                     /* → */ function App(){
-  return  <Circle margin='{sizes.4}' />;                            /* → */   return  <Circle margin='4' />;
-}                                                                   /* → */ }
-```
-
 ## Resources
 
 * [Rule source](/plugin/src/rules/no-unsafe-token-fn-usage.ts)

plugin/src/rules/no-config-function-in-source.ts

@@ -11,10 +11,11 @@ const rule: Rule = createRule({
       description: 'Prohibit the use of config functions outside the Panda config.',
     },
     messages: {
-      configFunction: 'Remove `{{name}}` usage. Config functions should only be used in panda config',
+      configFunction: 'Unnecessary`{{name}}` call. \nConfig functions should only be used in panda config.',
+      delete: 'Delete `{{name}}` call.',
     },
     type: 'suggestion',
-    fixable: 'code',
+    hasSuggestions: true,
     schema: [],
   },
   defaultOptions: [],
@@ -31,16 +32,24 @@ const rule: Rule = createRule({
           data: {
             name: node.callee.name,
           },
-          fix(fixer) {
-            const declaration = getAncestor(isVariableDeclaration, node)
-            const importSpec = getImportSpecifiers(context).find(
-              (s) => isIdentifier(node.callee) && s.specifier.local.name === node.callee.name,
-            )
-            return [
-              fixer.remove(declaration ?? node),
-              importSpec?.specifier ? fixer.remove(importSpec?.specifier) : ({} as any),
-            ]
-          },
+          suggest: [
+            {
+              messageId: 'delete',
+              data: {
+                name: node.callee.name,
+              },
+              fix(fixer) {
+                const declaration = getAncestor(isVariableDeclaration, node)
+                const importSpec = getImportSpecifiers(context).find(
+                  (s) => isIdentifier(node.callee) && s.specifier.local.name === node.callee.name,
+                )
+                return [
+                  fixer.remove(declaration ?? node),
+                  importSpec?.specifier ? fixer.remove(importSpec?.specifier) : ({} as any),
+                ]
+              },
+            },
+          ],
         })
       },
     }

plugin/src/rules/no-debug.ts

@@ -11,10 +11,12 @@ const rule: Rule = createRule({
       description: 'Disallow the inclusion of the debug attribute when shipping code to the production environment.',
     },
     messages: {
-      debug: 'Remove the debug utility.',
+      debug: 'Unnecessary debug utility.',
+      prop: 'Remove the debug prop.',
+      property: 'Remove the debug property.',
     },
     type: 'suggestion',
-    fixable: 'code',
+    hasSuggestions: true,
     schema: [],
   },
   defaultOptions: [],
@@ -27,7 +29,12 @@ const rule: Rule = createRule({
         context.report({
           node,
           messageId: 'debug',
-          fix: (fixer) => fixer.remove(node),
+          suggest: [
+            {
+              messageId: 'prop',
+              fix: (fixer) => fixer.remove(node),
+            },
+          ],
         })
       },
 
@@ -38,7 +45,12 @@ const rule: Rule = createRule({
         context.report({
           node: node.key,
           messageId: 'debug',
-          fix: (fixer) => fixer.removeRange([node.range[0], node.range[1] + 1]),
+          suggest: [
+            {
+              messageId: 'property',
+              fix: (fixer) => fixer.removeRange([node.range[0], node.range[1] + 1]),
+            },
+          ],
         })
       },
     }