feat: prettier plugin sva/defineSlotRecipe sorting + custom pandaFunc…

…tions
astahmer · Mar 15, 2024 · e404253 · e404253
1 parent 19d7e78
commit e404253
Show file tree

Hide file tree

Showing 9 changed files with 297 additions and 53 deletions.
diff --git a/.changeset/rich-avocados-check.md b/.changeset/rich-avocados-check.md
@@ -0,0 +1,5 @@
+---
+'@pandabox/prettier-plugin': minor
+---
+
+Better sorting for sva/defineSlotRecipe sorting + allow sorting custom functions using the `pandaFunctions` option
diff --git a/README.md b/README.md
@@ -2,6 +2,28 @@
 
 This will be the home for utilities around Panda CSS.
 
+# @pandabox/prettier-plugin
+
+Prettier plugin for Panda CSS.
+
+Will sort style props based on your local `panda.config.ts`:
+
+- in any Panda function like `css({ ... })` or `stack({ ... })`
+- in the `css` prop of any JSX component
+- etc...
+
+## Installation
+
+```bash
+pnpm add -D prettier @pandabox/prettier-plugin
+```
+
+```json
+{
+  "plugins": ["@pandabox/prettier-plugin"]
+}
+```
+
 # @pandabox/panda-plugins
 
 - `missing-css-warnings` - Logs a warning message when a CSS rule was used at runtime but couldn't be statically

diff --git a/packages/panda-plugins/src/strict-tokens-runtime.ts b/packages/panda-plugins/src/strict-tokens-runtime.ts
@@ -149,18 +149,6 @@ export const transformStrictTokensRuntime = (
     }
   }`
 
-  // utility: {
-  //   ${prefix.className ? 'prefix: ' + JSON.stringify(prefix.className) + ',' : ''}
-  //   transform: ${
-  //     utility.hasShorthand
-  //       ? `(prop, value) => {
-  //         const key = resolveShorthand(prop)
-  //         const propKey = classNameByProp.get(key) || hypenateProperty(key)
-  //         return { className: \`$\{propKey}${separator}$\{withoutSpace(value)}\` }
-  //       }`
-  //       : `(key, value) => ({ className: \`$\{classNameByProp.get(key) || hypenateProperty(key)}${separator}$\{withoutSpace(value)}\` })`
-  //   },
-
   if (config?.shorthands) {
     cssFile.code = cssFile.code.replace(
       'transform: (prop, value) => {',

diff --git a/packages/prettier-plugin/README.md b/packages/prettier-plugin/README.md
@@ -6,6 +6,7 @@ Will sort style props based on your local `panda.config.ts`:
 
 - in any Panda function like `css({ ... })` or `stack({ ... })`
 - in the `css` prop of any JSX component
+- etc...
 
 ## Installation
 
@@ -17,13 +18,23 @@ pnpm add -D prettier @pandabox/prettier-plugin
 
 ```json
 {
-  "plugins": ["@pandabox/prettier-plugin"],
+  "plugins": ["@pandabox/prettier-plugin"]
+}
+```
+
+## Options
+
+See below for more details.
+
+```json
+{
   "pandaFirstProps": ["as", "className", "layerStyle", "textStyle"],
   "pandaLastProps": [],
   "pandaOnlyComponents": false,
   "pandaOnlyIncluded": false,
   "pandaStylePropsFirst": false,
-  "pandaSortOtherProps": false
+  "pandaSortOtherProps": false,
+  "pandaFunctions": []
 }
 ```
 
@@ -139,6 +150,11 @@ Whether to sort the other props alphabetically. Defaults to `false`.
 The order of the style groups. Defaults to:
 `['System', 'Container', 'Display', 'Visibility', 'Position', 'Transform', 'Flex Layout', 'Grid Layout', 'Layout', 'Border', 'Border Radius', 'Width', 'Height', 'Margin', 'Padding', 'Color', 'Typography', 'Background', 'Shadow', 'Table', 'List', 'Scroll', 'Interactivity', 'Transition', 'Effect', 'Other', 'Conditions', 'Arbitrary conditions', 'Css']`
 
+### `pandaFunctions`
+
+A list of style functions to sort in addition to the default ones (css, cva, patterns, defineRecipe,
+defineSlotRecipe...). Defaults to `[]`.
+
 ### `pandaConfigPath`
 
 The path to the panda config file. Only relevant when used programatically.

diff --git a/packages/prettier-plugin/__tests__/plugin.test.ts b/packages/prettier-plugin/__tests__/plugin.test.ts
@@ -1408,7 +1408,6 @@ describe('call expression specifics', () => {
     });
 
     const slotRecipe = defineSlotRecipeAlias({
-      variants: {},
       base: {
         root: {
           '&[data-disabled]': {
@@ -1421,8 +1420,22 @@ describe('call expression specifics', () => {
             backgroundColor: 'darkblue',
           },
           backgroundColor: 'blue',
+        },
+      },
+      slots: ['root', 'input', 'icon'],
+      variants: {
+        variant: {
+          solid: {
+            root: {
+              backgroundColor: 'red',
+              fontSize: 'sm',
+              color: 'blue',
+              display: "flex"
+            }
+          },
+          outline: { root: { color: 'red' } },
         }
-      }
+      },
     });
   `
 
@@ -1447,7 +1460,6 @@ describe('call expression specifics', () => {
       });
 
       const recipe = defineRecipe({
-        variants: {},
         base: {
           color: "white",
           "&[data-disabled]": {
@@ -1460,10 +1472,11 @@ describe('call expression specifics', () => {
             backgroundColor: "darkblue",
           },
         },
+        variants: {},
       });
 
       const slotRecipe = defineSlotRecipeAlias({
-        variants: {},
+        slots: ["root", "input", "icon"],
         base: {
           root: {
             color: "white",
@@ -1478,6 +1491,19 @@ describe('call expression specifics', () => {
             },
           },
         },
+        variants: {
+          variant: {
+            solid: {
+              root: {
+                display: "flex",
+                color: "blue",
+                fontSize: "sm",
+                backgroundColor: "red",
+              },
+            },
+            outline: { root: { color: "red" } },
+          },
+        },
       });
       "
     `)
@@ -1764,3 +1790,81 @@ const App = () => {
     "
   `)
 })
+
+test('options.pandaFunctions', async () => {
+  const code = `
+  import { define } from '@weliihq/styled-system/dev';
+
+  export const textarea = define.recipe({
+    base: {
+      _disabled: {
+        cursor: 'not-allowed',
+        opacity: '0.5',
+      },
+      focusRingOffsetColor: 'ui-kit.background',
+      border: 'ui-kit.input',
+      bgColor: '[transparent]',
+      borderRadius: 'ui-kit.md',
+      minH: '[80px]',
+      px: 'ui-kit.3',
+
+      display: 'flex',
+      _placeholder: {
+        color: 'ui-kit.muted.foreground',
+      },
+      w: 'ui-kit.full',
+
+      py: 'ui-kit.2',
+      textStyle: 'ui-kit.sm',
+      _focusVisible: {
+        outline: '[2px solid transparent]',
+        outlineOffset: '[2px]',
+        focusRingWidth: '2',
+        focusRingColor: 'ui-kit.ring',
+        focusRingOffsetWidth: '2',
+      },
+    },
+    description: 'Styles for the Textarea component',
+    className: 'textarea',
+  });
+
+`
+
+  expect(await run(code, { pandaFunctions: ['define.recipe'] })).toMatchInlineSnapshot(`
+    "import { define } from "@weliihq/styled-system/dev";
+
+    export const textarea = define.recipe({
+      className: "textarea",
+      description: "Styles for the Textarea component",
+      base: {
+        textStyle: "ui-kit.sm",
+        focusRingOffsetColor: "ui-kit.background",
+        display: "flex",
+        border: "ui-kit.input",
+        borderRadius: "ui-kit.md",
+        w: "ui-kit.full",
+
+        minH: "[80px]",
+        py: "ui-kit.2",
+        px: "ui-kit.3",
+
+        bgColor: "[transparent]",
+        _disabled: {
+          opacity: "0.5",
+          cursor: "not-allowed",
+        },
+        _placeholder: {
+          color: "ui-kit.muted.foreground",
+        },
+        _focusVisible: {
+          focusRingWidth: "2",
+          focusRingColor: "ui-kit.ring",
+          focusRingOffsetWidth: "2",
+          outline: "[2px solid transparent]",
+          outlineOffset: "[2px]",
+        },
+      },
+    });
+    "
+  `)
+})
diff --git a/packages/prettier-plugin/package.json b/packages/prettier-plugin/package.json
@@ -29,20 +29,22 @@
   "imports": {
     "#pandabox/fixtures": "../fixtures/src/index.ts"
   },
+  "peerDependencies": {
+    "@pandacss/config": ">=0.33.0",
+    "@pandacss/core": ">=0.33.0",
+    "@pandacss/is-valid-prop": "^0.34.1",
+    "@pandacss/node": ">=0.33.0",
+    "@pandacss/preset-base": ">=0.33.0",
+    "@pandacss/shared": ">=0.33.0"
+  },
   "devDependencies": {
-    "@pandacss/types": "^0.33.0",
+    "@pandacss/types": "^0.35.0",
     "@types/micromatch": "^4.0.6",
     "prettier": "3.2.5",
     "tsup": "^8.0.2",
     "vitest": "1.3.1"
   },
   "dependencies": {
-    "@pandacss/config": "^0.33.0",
-    "@pandacss/core": "^0.33.0",
-    "@pandacss/is-valid-prop": "^0.34.1",
-    "@pandacss/node": "^0.33.0",
-    "@pandacss/preset-base": "^0.33.0",
-    "@pandacss/shared": "^0.33.0",
     "micromatch": "^4.0.5"
   },
   "homepage": "https://astahmer.dev",

diff --git a/packages/prettier-plugin/src/options.ts b/packages/prettier-plugin/src/options.ts
@@ -11,6 +11,7 @@ export interface PluginOptions {
   pandaStylePropsFirst: boolean
   pandaSortOtherProps: boolean
   pandaGroupOrder: string[]
+  pandaFunctions: string[]
   // componentSpecificProps: string[] | undefined
 }
 
@@ -74,6 +75,13 @@ export const options = {
       "The order of the style groups. Defaults to: ['System', 'Container', 'Display', 'Visibility', 'Position', 'Transform', 'Flex Layout', 'Grid Layout', 'Layout', 'Border', 'Border Radius', 'Width', 'Height', 'Margin', 'Padding', 'Color', 'Typography', 'Background', 'Shadow', 'Table', 'List', 'Scroll', 'Interactivity', 'Transition', 'Effect', 'Other', 'Conditions', 'Arbitrary conditions', 'Css']",
     default: [{ value: [] }],
   },
+  pandaFunctions: {
+    array: true,
+    type: 'string',
+    category: 'Panda',
+    description: 'Additional functions to sort. Defaults to: []',
+    default: [{ value: [] }],
+  },
   // componentSpecificProps: {
   //   array: true,
   //   type: 'string',