eslint-plugin-panda (#2739)

eslint.config.js

@@ -1,3 +1,4 @@
+import panda from '@pandacss/eslint-plugin'
 import stylisticTs from '@stylistic/eslint-plugin'
 import typescriptEslint from '@typescript-eslint/eslint-plugin'
 import typescriptParser from '@typescript-eslint/parser'
@@ -28,6 +29,7 @@ const commonPlugins = {
   '@typescript-eslint': typescriptEslint,
   import: importPlugin,
   'react-hooks': reactHooks,
+  '@pandacss': panda,
 }
 
 const commonRules = {
@@ -191,6 +193,14 @@ export default [
       // react-refresh
 
       'react-refresh/only-export-components': 'error',
+      // pandacss
+
+      ...panda.configs.recommended.rules,
+      '@pandacss/no-config-function-in-source': 'off',
+      '@pandacss/prefer-longhand-properties': 'error',
+      '@pandacss/no-dynamic-styling': 'off',
+      '@pandacss/no-hardcoded-color': 'error',
+      '@pandacss/no-property-renaming': 'error',
     },
   },
 

package.json

@@ -151,6 +151,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@capacitor/cli": "^6.2.0",
     "@pandacss/dev": "^0.47.0",
+    "@pandacss/eslint-plugin": "^0.2.3",
     "@sinonjs/fake-timers": "^13.0.4",
     "@stylistic/eslint-plugin": "^2.11.0",
     "@testing-library/dom": "^10.4.0",

src/colors.config.ts

@@ -63,6 +63,8 @@ const colors = {
     pinkAgainstFg: 'rgba(233, 12, 89, 1)',
     brightBlue: 'rgba(70, 223, 240, 1)', // #46dff0
     exportTextareaColor: 'rgba(170, 170, 170, 1)', // #aaa, also used in anchorButton
+    inherit: 'inherit',
+    currentColor: 'currentColor',
   },
   light: {
     // Background colors in capacitor app needs to be in hexadecimal codes
@@ -128,6 +130,8 @@ const colors = {
     pinkAgainstFg: 'rgba(227, 179, 196, 1)',
     brightBlue: 'rgba(70, 223, 240, 1)', // #46dff0
     exportTextareaColor: 'rgba(85, 85, 85, 1)',
+    inherit: 'inherit',
+    currentColor: 'currentColor',
   },
 } as const
 

src/components/Bullet.tsx

@@ -414,9 +414,7 @@ const Bullet = ({
     const isHolding = state.draggedSimplePath && head(state.draggedSimplePath) === head(simplePath)
     return isHolding || isDragging || isMulticursor
   })
-  const bulletIsDivider = useSelector(state =>
-    isDivider(getThoughtById(state, thoughtId)?.value) ? 'none' : undefined,
-  )
+  const bulletIsDivider = useSelector(state => isDivider(getThoughtById(state, thoughtId)?.value))
 
   /** Returns true if the thought is pending. */
   const pending = useSelector(state => {
@@ -593,7 +591,7 @@ const Bullet = ({
               marginLeft: '-3px',
             },
           },
-          display: bulletIsDivider,
+          display: bulletIsDivider ? 'none' : undefined,
           position: 'absolute',
           verticalAlign: 'top',
           cursor: 'pointer',

src/components/LayoutTree.tsx

@@ -459,7 +459,7 @@ const TreeNode = ({
   const marginRight = isTableCol1 ? xCol2 - (width || 0) - x - (bulletWidth || 0) : 0
 
   // Speed up the tree-node's transition (normally layoutNodeAnimationDuration) by 50% on New (Sub)Thought only.
-  const layoutTransition = isLastActionNewThought
+  const transition = isLastActionNewThought
     ? `left {durations.layoutNodeAnimationFast} ease-out,top {durations.layoutNodeAnimationFast} ease-out`
     : `left {durations.layoutNodeAnimation} ease-out,top {durations.layoutNodeAnimation} ease-out`
 
@@ -470,7 +470,7 @@ const TreeNode = ({
       // It should not be based on editable values such as Path, value, rank, etc, otherwise moving the thought would make it appear to be a completely new thought to React.
       className={css({
         position: 'absolute',
-        transition: layoutTransition,
+        transition,
       })}
       style={{
         // Cannot use transform because it creates a new stacking context, which causes later siblings' DropChild to be covered by previous siblings'.

src/components/Toolbar.tsx

@@ -211,7 +211,7 @@ const Toolbar: FC<ToolbarProps> = ({ customize, onSelect, selected }) => {
             textAlign: 'right',
             maxWidth: '100%',
             userSelect: 'none',
-            WebkitTapHighlightColor: '{colors.bgTransparent}',
+            WebkitTapHighlightColor: 'bgTransparent',
             whiteSpace: 'nowrap',
             ...(!customize && {
               zIndex: 'toolbarContainer',

src/components/modals/Auth.tsx

@@ -194,7 +194,7 @@ const ModalAuth = () => {
           </button>
         )}
 
-        {error && <span className={css({ color: 'crimson' })}>{error}</span>}
+        {error && <span className={css({ color: 'error' })}>{error}</span>}
       </div>
     </ModalComponent>
   )

src/components/modals/Signup.tsx

@@ -172,7 +172,7 @@ const ModalSignup = () => {
       {/* Show validation or submit error. */}
       {(validationError || submitError) && (
         <div className={css({ display: 'flex', minHeight: '100px', flexDirection: 'column' })}>
-          <span className={css({ color: 'crimson', paddingBottom: '30px', fontSize: '18px' })}>
+          <span className={css({ color: 'error', paddingBottom: '30px', fontSize: '18px' })}>
             {validationError || submitError}
           </span>
         </div>

src/util/getHideCaretAnimationName.ts

@@ -23,7 +23,7 @@ export const hideCaretAnimationNames = [
 
 const hideCaret = cva({
   base: {
-    animationDuration: '{durations.layoutSlowShift}',
+    animationDuration: 'layoutSlowShift',
   },
   variants: {
     animation: hideCaretAnimationNames.reduce(