fix: move wrapper detection to global settings and support cross-module style/recipe wrappers (#9)

src/css-rules/custom-order/__tests__/recipe.test.ts

@@ -265,5 +265,47 @@ run({
         });
       `,
     },
+
+     // Imported local recipe wrapper with global settings recipe
+    {
+      code: `
+        import { componentRecipe } from './component-recipe.css.js';
+
+        const myRecipe = componentRecipe({
+          base: {
+            backgroundColor: 'white',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            margin: 0
+          }
+        });
+      `,
+      options: [
+        {
+          groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
+          sortRemainingProperties: 'concentric',
+        },
+      ],
+      settings: {
+        'vanilla-extract': {
+          recipe: ['componentRecipe'],
+        },
+      },
+      errors: [{ messageId: 'incorrectOrder' }],
+      output: `
+        import { componentRecipe } from './component-recipe.css.js';
+
+        const myRecipe = componentRecipe({
+          base: {
+            width: '100%',
+            margin: 0,
+            display: 'flex',
+            alignItems: 'center',
+            backgroundColor: 'white'
+          }
+        });
+      `,
+    },
   ],
-});
+});

src/css-rules/custom-order/__tests__/style-wrapper.test.ts

@@ -375,5 +375,81 @@ run({
     });
   `,
     },
+
+    // Imported local wrapper with global settings style
+    {
+      code: `
+        import { componentStyle } from './style.css.js';
+
+        export const myStyle = componentStyle({
+          padding: '18px',
+          backgroundColor: 'black',
+        });
+      `,
+      options: [
+        {
+          groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
+          sortRemainingProperties: 'concentric',
+        },
+      ],
+      settings: {
+        'vanilla-extract': {
+          style: ['componentStyle'],
+        },
+      },
+      errors: [{ messageId: 'incorrectOrder' }],
+      output: `
+        import { componentStyle } from './style.css.js';
+
+        export const myStyle = componentStyle({
+          backgroundColor: 'black',
+          padding: '18px',
+        });
+      `,
+    },
+
+    // Both vanilla style and configured wrapper should be linted (wrapper augments, not replaces)
+    {
+      code: `
+        import { style } from '@vanilla-extract/css';
+        import { componentStyle } from './style.css.js';
+
+        export const a = style({
+          color: 'white',
+          display: 'flex',
+        });
+
+        export const b = componentStyle({
+          padding: '18px',
+          backgroundColor: 'black',
+        });
+      `,
+      options: [
+        {
+          groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
+          sortRemainingProperties: 'concentric',
+        },
+      ],
+      settings: {
+        'vanilla-extract': {
+          style: ['componentStyle'],
+        },
+      },
+      errors: [{ messageId: 'incorrectOrder' }, { messageId: 'incorrectOrder' }],
+      output: `
+        import { style } from '@vanilla-extract/css';
+        import { componentStyle } from './style.css.js';
+
+        export const a = style({
+          display: 'flex',
+          color: 'white',
+        });
+
+        export const b = componentStyle({
+          backgroundColor: 'black',
+          padding: '18px',
+        });
+      `,
+    },
   ],
 });