feat 🥁: add no-zero-unit rule

This rule enforces unitless zero values in vanilla-extract style objects:
- Automatically removes unnecessary units from zero values
- Handles both positive and negative zero values
- Preserves units where required (time properties, CSS functions)
- Works with all vanilla-extract APIs

src/css-rules/no-empty-blocks/conditional-processor.ts

@@ -6,12 +6,12 @@ import { reportEmptyDeclaration } from './fix-utils.js';
 /**
  * Handles conditional expressions with empty objects.
  */
-export function processConditionalExpression(
+export const processConditionalExpression = (
   context: Rule.RuleContext,
   node: TSESTree.ConditionalExpression,
   reportedNodes: Set<TSESTree.Node>,
   callNode: TSESTree.CallExpression,
-): void {
+): void => {
   const isConsequentEmpty = node.consequent.type === 'ObjectExpression' && isEmptyObject(node.consequent);
   const isAlternateEmpty = node.alternate.type === 'ObjectExpression' && isEmptyObject(node.alternate);
 
@@ -33,4 +33,4 @@ export function processConditionalExpression(
       messageId: 'emptyConditionalStyle',
     });
   }
-}
+};

src/css-rules/no-empty-blocks/empty-nested-style-processor.ts

@@ -7,11 +7,11 @@ import { areAllChildrenEmpty, getStyleKeyName } from './property-utils.js';
 /**
  * Processes nested style objects like selectors and media queries.
  */
-export function processEmptyNestedStyles(
+export const processEmptyNestedStyles = (
   ruleContext: Rule.RuleContext,
   node: TSESTree.ObjectExpression,
   reportedNodes: Set<TSESTree.Node>,
-): void {
+): void => {
   node.properties.forEach((property) => {
     if (property.type !== 'Property') {
       return;
@@ -72,4 +72,4 @@ export function processEmptyNestedStyles(
       });
     }
   });
-}
+};

src/css-rules/no-empty-blocks/empty-style-visitor-creator.ts

@@ -9,128 +9,10 @@ import { getStyleKeyName } from './property-utils.js';
 import { processRecipeProperties } from './recipe-processor.js';
 import { processStyleVariants } from './style-variants-processor.js';
 
-/**
- * Creates ESLint rule visitors for detecting empty style blocks in vanilla-extract.
- * @param ruleContext The ESLint rule rule context.
- * @returns An object with visitor functions for the ESLint rule.
- */
-export const createEmptyStyleVisitors = (ruleContext: Rule.RuleContext): Rule.RuleListener => {
-  // Track reported nodes to prevent duplicate reports
-  const reportedNodes = new Set<TSESTree.Node>();
-
-  return {
-    CallExpression(node) {
-      if (node.callee.type !== 'Identifier') {
-        return;
-      }
-
-      // Target vanilla-extract style functions
-      const styleApiFunctions = [
-        'style',
-        'styleVariants',
-        'recipe',
-        'globalStyle',
-        'fontFace',
-        'globalFontFace',
-        'keyframes',
-        'globalKeyframes',
-      ];
-
-      if (!styleApiFunctions.includes(node.callee.name) || node.arguments.length === 0) {
-        return;
-      }
-
-      // Handle styleVariants specifically
-      if (node.callee.name === 'styleVariants' && node.arguments[0]?.type === 'ObjectExpression') {
-        processStyleVariants(ruleContext, node.arguments[0] as TSESTree.ObjectExpression, reportedNodes);
-
-        // If the entire styleVariants object is empty after processing, remove the declaration
-        if (isEmptyObject(node.arguments[0] as TSESTree.ObjectExpression)) {
-          reportEmptyDeclaration(ruleContext, node.arguments[0] as TSESTree.Node, node as TSESTree.CallExpression);
-        }
-        return;
-      }
-
-      const defaultStyleArgumentIndex = 0;
-      const globalFunctionNames = ['globalStyle', 'globalFontFace', 'globalKeyframes'];
-      // Determine the style argument index based on the function name
-      const styleArgumentIndex = globalFunctionNames.includes(node.callee.name) ? 1 : defaultStyleArgumentIndex;
-
-      // For global functions, check if we have enough arguments
-      if (styleArgumentIndex === 1 && node.arguments.length <= styleArgumentIndex) {
-        return;
-      }
-
-      const styleArgument = node.arguments[styleArgumentIndex];
-
-      // This defensive check prevents duplicate processing of nodes.
-      // This code path's difficult to test because the ESLint visitor pattern
-      // typically ensures each node is only visited once per rule execution.
-      if (reportedNodes.has(styleArgument as TSESTree.Node)) {
-        return;
-      }
-
-      // Handle conditional expressions
-      if (styleArgument?.type === 'ConditionalExpression') {
-        processConditionalExpression(
-          ruleContext,
-          styleArgument as TSESTree.ConditionalExpression,
-          reportedNodes,
-          node as TSESTree.CallExpression,
-        );
-        return;
-      }
-
-      // Direct empty object case - remove the entire declaration
-      if (styleArgument?.type === 'ObjectExpression' && isEmptyObject(styleArgument as TSESTree.ObjectExpression)) {
-        reportedNodes.add(styleArgument as TSESTree.ObjectExpression);
-        reportEmptyDeclaration(ruleContext, styleArgument as TSESTree.Node, node as TSESTree.CallExpression);
-        return;
-      }
-
-      // For recipe - check if entire recipe is effectively empty
-      if (node.callee.name === 'recipe' && styleArgument?.type === 'ObjectExpression') {
-        if (isEffectivelyEmptyStylesObject(styleArgument as TSESTree.ObjectExpression)) {
-          reportedNodes.add(styleArgument as TSESTree.ObjectExpression);
-          reportEmptyDeclaration(ruleContext, styleArgument as TSESTree.Node, node as TSESTree.CallExpression);
-          return;
-        }
-
-        // Process individual properties in recipe
-        processRecipeProperties(ruleContext, styleArgument as TSESTree.ObjectExpression, reportedNodes);
-      }
-
-      // For style objects with nested empty objects
-      if (styleArgument?.type === 'ObjectExpression') {
-        // Check for spread elements
-        styleArgument.properties.forEach((property) => {
-          if (
-            property.type === 'SpreadElement' &&
-            property.argument.type === 'ObjectExpression' &&
-            isEmptyObject(property.argument as TSESTree.ObjectExpression)
-          ) {
-            reportedNodes.add(property.argument as TSESTree.Node);
-            ruleContext.report({
-              node: property.argument as Rule.Node,
-              messageId: 'emptySpreadObject',
-              fix(fixer) {
-                return removeNodeWithComma(ruleContext, property as TSESTree.Node, fixer);
-              },
-            });
-          }
-        });
-
-        // Process nested selectors and media queries
-        processEmptyNestedStyles(ruleContext, styleArgument as TSESTree.ObjectExpression, reportedNodes);
-      }
-    },
-  };
-};
-
 /**
  * Checks if a style object is effectively empty (contains only empty objects).
  */
-export function isEffectivelyEmptyStylesObject(stylesObject: TSESTree.ObjectExpression): boolean {
+export const isEffectivelyEmptyStylesObject = (stylesObject: TSESTree.ObjectExpression): boolean => {
   // Empty object itself
   if (stylesObject.properties.length === 0) {
     return true;
@@ -225,4 +107,122 @@ export function isEffectivelyEmptyStylesObject(stylesObject: TSESTree.ObjectExpr
 
   // If we have special properties and they're all empty, the style is effectively empty
   return specialProperties.length > 0 && allSpecialPropertiesEmpty;
-}
+};
+
+/**
+ * Creates ESLint rule visitors for detecting empty style blocks in vanilla-extract.
+ * @param ruleContext The ESLint rule rule context.
+ * @returns An object with visitor functions for the ESLint rule.
+ */
+export const createEmptyStyleVisitors = (ruleContext: Rule.RuleContext): Rule.RuleListener => {
+  // Track reported nodes to prevent duplicate reports
+  const reportedNodes = new Set<TSESTree.ObjectExpression>();
+
+  return {
+    CallExpression(node) {
+      if (node.callee.type !== 'Identifier') {
+        return;
+      }
+
+      // Target vanilla-extract style functions
+      const styleApiFunctions = [
+        'style',
+        'styleVariants',
+        'recipe',
+        'globalStyle',
+        'fontFace',
+        'globalFontFace',
+        'keyframes',
+        'globalKeyframes',
+      ];
+
+      if (!styleApiFunctions.includes(node.callee.name) || node.arguments.length === 0) {
+        return;
+      }
+
+      // Handle styleVariants specifically
+      if (node.callee.name === 'styleVariants' && node.arguments[0]?.type === 'ObjectExpression') {
+        processStyleVariants(ruleContext, node.arguments[0] as TSESTree.ObjectExpression, reportedNodes);
+
+        // If the entire styleVariants object is empty after processing, remove the declaration
+        if (isEmptyObject(node.arguments[0] as TSESTree.ObjectExpression)) {
+          reportEmptyDeclaration(ruleContext, node.arguments[0] as TSESTree.Node, node as TSESTree.CallExpression);
+        }
+        return;
+      }
+
+      const defaultStyleArgumentIndex = 0;
+      const globalFunctionNames = ['globalStyle', 'globalFontFace', 'globalKeyframes'];
+      // Determine the style argument index based on the function name
+      const styleArgumentIndex = globalFunctionNames.includes(node.callee.name) ? 1 : defaultStyleArgumentIndex;
+
+      // For global functions, check if we have enough arguments
+      if (styleArgumentIndex === 1 && node.arguments.length <= styleArgumentIndex) {
+        return;
+      }
+
+      const styleArgument = node.arguments[styleArgumentIndex];
+
+      // This defensive check prevents duplicate processing of nodes.
+      // This code path's difficult to test because the ESLint visitor pattern
+      // typically ensures each node is only visited once per rule execution.
+      if (reportedNodes.has(styleArgument as TSESTree.ObjectExpression)) {
+        return;
+      }
+
+      // Handle conditional expressions
+      if (styleArgument?.type === 'ConditionalExpression') {
+        processConditionalExpression(
+          ruleContext,
+          styleArgument as TSESTree.ConditionalExpression,
+          reportedNodes,
+          node as TSESTree.CallExpression,
+        );
+        return;
+      }
+
+      // Direct empty object case - remove the entire declaration
+      if (styleArgument?.type === 'ObjectExpression' && isEmptyObject(styleArgument as TSESTree.ObjectExpression)) {
+        reportedNodes.add(styleArgument as TSESTree.ObjectExpression);
+        reportEmptyDeclaration(ruleContext, styleArgument as TSESTree.Node, node as TSESTree.CallExpression);
+        return;
+      }
+
+      // For recipe - check if entire recipe is effectively empty
+      if (node.callee.name === 'recipe' && styleArgument?.type === 'ObjectExpression') {
+        if (isEffectivelyEmptyStylesObject(styleArgument as TSESTree.ObjectExpression)) {
+          reportedNodes.add(styleArgument as TSESTree.ObjectExpression);
+          reportEmptyDeclaration(ruleContext, styleArgument as TSESTree.Node, node as TSESTree.CallExpression);
+          return;
+        }
+
+        // Process individual properties in recipe
+        processRecipeProperties(ruleContext, styleArgument as TSESTree.ObjectExpression, reportedNodes);
+      }
+
+      // For style objects with nested empty objects
+      if (styleArgument?.type === 'ObjectExpression') {
+        // Check for spread elements
+        styleArgument.properties.forEach((property) => {
+          if (
+            property.type === 'SpreadElement' &&
+            property.argument.type === 'ObjectExpression' &&
+            isEmptyObject(property.argument as TSESTree.ObjectExpression)
+          ) {
+            reportedNodes.add(property.argument as TSESTree.ObjectExpression);
+            ruleContext.report({
+              node: property.argument as Rule.Node,
+              messageId: 'emptySpreadObject',
+              fix(fixer) {
+                return removeNodeWithComma(ruleContext, property as TSESTree.Node, fixer);
+              },
+            });
+          }
+        });
+
+        // Process nested selectors and media queries
+        processEmptyNestedStyles(ruleContext, styleArgument as TSESTree.ObjectExpression, reportedNodes);
+      }
+    },
+  };
+};

src/css-rules/no-empty-blocks/node-remover.ts

@@ -8,11 +8,11 @@ import type { TSESTree } from '@typescript-eslint/utils';
  * @param fixer The ESLint fixer.
  * @returns The fix object.
  */
-export function removeNodeWithComma(ruleContext: Rule.RuleContext, node: TSESTree.Node, fixer: Rule.RuleFixer) {
+export const removeNodeWithComma = (ruleContext: Rule.RuleContext, node: TSESTree.Node, fixer: Rule.RuleFixer) => {
   const sourceCode = ruleContext.sourceCode;
   const tokenAfter = sourceCode.getTokenAfter(node as Rule.Node);
   if (tokenAfter && tokenAfter.value === ',' && node.range && tokenAfter.range) {
     return fixer.removeRange([node.range[0], tokenAfter.range[1]]);
   }
   return fixer.remove(node as Rule.Node);
-}
+};

src/css-rules/no-empty-blocks/property-utils.ts

@@ -4,7 +4,7 @@ import { isEmptyObject } from '../shared-utils/empty-object-processor.js';
 /**
  * Gets the property name regardless of whether it's an identifier or a literal.
  */
-export function getStyleKeyName(key: TSESTree.Expression | TSESTree.PrivateIdentifier): string | null {
+export const getStyleKeyName = (key: TSESTree.Expression | TSESTree.PrivateIdentifier): string | null => {
   if (key.type === 'Identifier') {
     return key.name;
   }
@@ -12,7 +12,7 @@ export function getStyleKeyName(key: TSESTree.Expression | TSESTree.PrivateIdent
     return key.value;
   }
   return null;
-}
+};
 
 /**
  * Checks if all properties in a style object are empty objects.

src/css-rules/no-empty-blocks/recipe-processor.ts

@@ -13,11 +13,11 @@ import { areAllChildrenEmpty, getStyleKeyName } from './property-utils.js';
  * @param recipeNode The recipe object node to process.
  * @param reportedNodes A set of nodes that have already been reported by other processors.
  */
-export function processRecipeProperties(
+export const processRecipeProperties = (
   ruleContext: Rule.RuleContext,
   recipeNode: TSESTree.ObjectExpression,
   reportedNodes: Set<TSESTree.Node>,
-): void {
+): void => {
   recipeNode.properties.forEach((property) => {
     if (property.type !== 'Property') {
       return;
@@ -139,4 +139,4 @@ export function processRecipeProperties(
       }
     }
   });
-}
+};

src/css-rules/no-empty-blocks/style-variants-processor.ts

@@ -10,11 +10,11 @@ import { removeNodeWithComma } from './node-remover.js';
  * @param node The styleVariants call argument (object expression).
  * @param reportedNodes A set of nodes that have already been reported.
  */
-export function processStyleVariants(
+export const processStyleVariants = (
   ruleContext: Rule.RuleContext,
   node: TSESTree.ObjectExpression,
   reportedNodes: Set<TSESTree.Node>,
-): void {
+): void => {
   node.properties.forEach((property) => {
     if (property.type !== 'Property') {
       return;
@@ -50,4 +50,4 @@ export function processStyleVariants(
       return;
     }
   });
-}
+};

src/css-rules/no-zero-unit/_tests_/no-zero-unit.test.ts

@@ -0,0 +1,341 @@
+import tsParser from '@typescript-eslint/parser';
+import { run } from 'eslint-vitest-rule-tester';
+import noZeroUnitRule from '../rule-definition.js';
+
+run({
+  name: 'vanilla-extract/no-zero-unit',
+  rule: noZeroUnitRule,
+  languageOptions: {
+    parser: tsParser,
+    parserOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+    },
+  },
+  valid: [
+    {
+      code: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          margin: '0',
+          padding: 0,
+          width: '100%',
+        });
+      `,
+    },
+    {
+      code: `
+        import { recipe } from '@vanilla-extract/css';
+        const myRecipe = recipe({
+          base: {
+            margin: '0',
+            padding: 0,
+          },
+          variants: {
+            size: {
+              small: {
+                height: '0',
+                width: '10px',
+              },
+            },
+          },
+        });
+      `,
+    },
+
+    {
+      code: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          ...spreadProps,
+          margin: 0,
+          '@media': {
+            '0rem': '0' // Key shouldn't be checked
+          }
+        });
+      `,
+      name: 'should ignore spread elements and object keys',
+    },
+    {
+      code: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          margin: \`0\${someUnit}\`, // Template literal
+          padding: someVariable
+        });
+      `,
+      name: 'should ignore non-literal values',
+    },
+
+    {
+      code: `
+      import { globalStyle } from '@vanilla-extract/css';
+      const callExpression = someObject.fontFace({ src: '...' }); // Non-Identifier callee
+    `,
+      name: 'should ignore member expression callees',
+    },
+    {
+      code: `
+      import { fontFace } from '@vanilla-extract/css';
+      fontFace(); // Missing arguments
+    `,
+      name: 'should handle missing fontFace arguments',
+    },
+    {
+      code: `
+      import { globalFontFace } from '@vanilla-extract/css';
+      globalFontFace('my-font'); // Missing style argument
+    `,
+      name: 'should handle missing globalFontFace style argument',
+    },
+  ],
+  invalid: [
+    {
+      code: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          margin: '0px',
+          padding: '0rem',
+        });
+      `,
+      errors: [{ messageId: 'noZeroUnit' }, { messageId: 'noZeroUnit' }],
+      output: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          margin: '0',
+          padding: '0',
+        });
+      `,
+    },
+    {
+      code: `
+        import { recipe } from '@vanilla-extract/css';
+        const myRecipe = recipe({
+          base: {
+            margin: '0px',
+          },
+          variants: {
+            size: {
+              small: {
+                height: '0vh',
+              },
+            },
+          },
+        });
+      `,
+      errors: [{ messageId: 'noZeroUnit' }, { messageId: 'noZeroUnit' }],
+      output: `
+        import { recipe } from '@vanilla-extract/css';
+        const myRecipe = recipe({
+          base: {
+            margin: '0',
+          },
+          variants: {
+            size: {
+              small: {
+                height: '0',
+              },
+            },
+          },
+        });
+      `,
+    },
+
+    {
+      code: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          margin: '0px',
+          '@media': {
+            '(min-width: 768px)': {
+              padding: '0rem'
+            }
+          }
+        });
+      `,
+      errors: 2,
+      output: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          margin: '0',
+          '@media': {
+            '(min-width: 768px)': {
+              padding: '0'
+            }
+          }
+        });
+      `,
+      name: 'should handle nested media queries',
+    },
+    {
+      code: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          '::before': {
+            content: '""',
+            margin: '0px'
+          }
+        });
+      `,
+      errors: 1,
+      output: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          '::before': {
+            content: '""',
+            margin: '0'
+          }
+        });
+      `,
+      name: 'should handle pseudo-elements',
+    },
+    {
+      code: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          margin: '0px',
+          nested: {
+            object: {
+              padding: '0rem',
+              deeper: {
+                width: '0%'
+              }
+            }
+          }
+        });
+      `,
+      errors: 3,
+      output: `
+        import { style } from '@vanilla-extract/css';
+        const myStyle = style({
+          margin: '0',
+          nested: {
+            object: {
+              padding: '0',
+              deeper: {
+                width: '0'
+              }
+            }
+          }
+        });
+      `,
+      name: 'should handle multiple levels of nesting',
+    },
+
+    {
+      code: `
+    import { fontFace, globalFontFace } from '@vanilla-extract/css';
+
+    fontFace({
+      src: '...',
+      lineGap: '0rem'
+    });
+
+    globalFontFace('my-font', {
+      src: '...',
+      sizeAdjust: '0%'
+    });
+  `,
+      errors: 2,
+      output: `
+    import { fontFace, globalFontFace } from '@vanilla-extract/css';
+
+    fontFace({
+      src: '...',
+      lineGap: '0'
+    });
+
+    globalFontFace('my-font', {
+      src: '...',
+      sizeAdjust: '0'
+    });
+  `,
+      name: 'should handle fontFace and globalFontFace arguments',
+    },
+
+    // 0deg is valid (deg isn't in our unit check)
+    {
+      code: `
+    import { globalKeyframes, globalStyle } from '@vanilla-extract/css';
+
+    globalKeyframes('spin', {
+      '0%': { transform: 'rotate(0deg)' },
+      '100%': { transform: 'rotate(0deg)' }
+    });
+
+    globalStyle('html', {
+      margin: '0px',
+      padding: '0rem'
+    });
+  `,
+      errors: 2,
+      output: `
+    import { globalKeyframes, globalStyle } from '@vanilla-extract/css';
+
+    globalKeyframes('spin', {
+      '0%': { transform: 'rotate(0deg)' },
+      '100%': { transform: 'rotate(0deg)' }
+    });
+
+    globalStyle('html', {
+      margin: '0',
+      padding: '0'
+    });
+  `,
+      name: 'should handle globalKeyframes and globalStyle arguments',
+    },
+
+    {
+      code: `
+      import { globalStyle } from '@vanilla-extract/css';
+      globalStyle('html', {
+        '@media': {
+          '(min-width: 768px)': {
+            margin: '0px'
+          }
+        }
+      });
+    `,
+      errors: 1,
+      output: `
+      import { globalStyle } from '@vanilla-extract/css';
+      globalStyle('html', {
+        '@media': {
+          '(min-width: 768px)': {
+            margin: '0'
+          }
+        }
+      });
+    `,
+      name: 'should handle nested globalStyle arguments',
+    },
+
+    {
+      code: `
+    import { style } from '@vanilla-extract/css';
+    const myStyle = style({
+      margin: '-0px',
+      padding: '-0rem',
+      top: '-0vh',
+      left: '-0%',
+    });
+  `,
+      errors: [
+        { messageId: 'noZeroUnit' },
+        { messageId: 'noZeroUnit' },
+        { messageId: 'noZeroUnit' },
+        { messageId: 'noZeroUnit' },
+      ],
+      output: `
+    import { style } from '@vanilla-extract/css';
+    const myStyle = style({
+      margin: '0',
+      padding: '0',
+      top: '0',
+      left: '0',
+    });
+  `,
+      name: 'should convert negative zero with units to simple zero',
+    },
+  ],
+});

src/css-rules/no-zero-unit/index.ts

@@ -0,0 +1,3 @@
+import noZeroUnitRule from './rule-definition.js';
+
+export default noZeroUnitRule;

src/css-rules/no-zero-unit/rule-definition.ts

@@ -0,0 +1,23 @@
+import type { Rule } from 'eslint';
+import { createZeroUnitVisitors } from './zero-unit-visitor-creator.js';
+
+const noZeroUnitRule: Rule.RuleModule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce unitless zero in numeric values',
+      category: 'Stylistic Issues',
+      recommended: true,
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      noZeroUnit: 'Unit with zero value is unnecessary. Use 0 instead.',
+    },
+  },
+  create(context) {
+    return createZeroUnitVisitors(context);
+  },
+};
+
+export default noZeroUnitRule;

src/css-rules/no-zero-unit/zero-unit-processor.ts

@@ -0,0 +1,36 @@
+import type { Rule } from 'eslint';
+import { TSESTree } from '@typescript-eslint/utils';
+
+const ZERO_VALUE_WITH_UNIT_REGEX = /^-?0(px|em|rem|%|vh|vw|vmin|vmax|ex|ch|cm|mm|in|pt|pc|Q|fr)$/;
+
+/**
+ * Recursively processes a style object, reporting and fixing instances of zero values with units.
+ *
+ * @param ruleContext The ESLint rule context.
+ * @param node The ObjectExpression node representing the style object to be processed.
+ */
+export const processZeroUnitInStyleObject = (ruleContext: Rule.RuleContext, node: TSESTree.ObjectExpression): void => {
+  node.properties.forEach((property) => {
+    if (property.type !== 'Property') {
+      return;
+    }
+
+    // Process direct string literal values
+    if (
+      property.value.type === 'Literal' &&
+      typeof property.value.value === 'string' &&
+      ZERO_VALUE_WITH_UNIT_REGEX.test(property.value.value)
+    ) {
+      ruleContext.report({
+        node: property.value,
+        messageId: 'noZeroUnit',
+        fix: (fixer) => fixer.replaceText(property.value, "'0'"),
+      });
+    }
+
+    // Process nested objects (selectors, media queries, etc.)
+    if (property.value.type === 'ObjectExpression') {
+      processZeroUnitInStyleObject(ruleContext, property.value);
+    }
+  });
+};

src/css-rules/no-zero-unit/zero-unit-visitor-creator.ts

@@ -0,0 +1,56 @@
+import type { Rule } from 'eslint';
+import { AST_NODE_TYPES, TSESTree } from '@typescript-eslint/utils';
+import { processRecipeProperties } from '../shared-utils/recipe-property-processor.js';
+import { processStyleNode } from '../shared-utils/style-node-processor.js';
+import { processZeroUnitInStyleObject } from './zero-unit-processor.js';
+
+/**
+ * Creates ESLint rule visitors for detecting and processing zero values with units in style-related function calls.
+ *
+ * @param context The ESLint rule context.
+ * @returns An object with visitor functions for the ESLint rule.
+ *
+ * This function sets up visitors for the following cases:
+ * 1. The `fontFace` and `globalFontFace` functions, processing their object arguments.
+ * 2. Style-related functions: `keyframes`, `style`, `styleVariants`, processing their style objects.
+ * 3. The `globalKeyframes` and `globalStyle` functions, processing the second argument as style objects.
+ * 4. The `recipe` function, processing the first argument as the recipe object.
+ */
+export const createZeroUnitVisitors = (context: Rule.RuleContext): Rule.RuleListener => {
+  return {
+    CallExpression(node) {
+      if (node.callee.type !== AST_NODE_TYPES.Identifier) {
+        return;
+      }
+
+      if (['fontFace', 'globalFontFace'].includes(node.callee.name)) {
+        const argumentIndex = node.callee.name === 'fontFace' ? 0 : 1;
+        if (
+          node.arguments.length > argumentIndex &&
+          node.arguments[argumentIndex]?.type === AST_NODE_TYPES.ObjectExpression
+        ) {
+          processZeroUnitInStyleObject(context, node.arguments[argumentIndex] as TSESTree.ObjectExpression);
+        }
+        return;
+      }
+
+      if (['keyframes', 'style', 'styleVariants'].includes(node.callee.name)) {
+        if (node.arguments.length > 0) {
+          processStyleNode(context, node.arguments[0] as TSESTree.ObjectExpression, processZeroUnitInStyleObject);
+        }
+      }
+
+      if (['globalKeyframes', 'globalStyle'].includes(node.callee.name) && node.arguments.length >= 2) {
+        processStyleNode(context, node.arguments[1] as TSESTree.ObjectExpression, processZeroUnitInStyleObject);
+      }
+
+      if (
+        node.callee.name === 'recipe' &&
+        node.arguments.length > 0 &&
+        node.arguments[0]?.type === AST_NODE_TYPES.ObjectExpression
+      ) {
+        processRecipeProperties(context, node.arguments[0] as TSESTree.ObjectExpression, processZeroUnitInStyleObject);
+      }
+    },
+  };
+};

src/css-rules/shared-utils/order-strategy-visitor-creator.ts

@@ -44,13 +44,8 @@ export const createNodeVisitors = (
         if (!userDefinedGroupOrder || userDefinedGroupOrder.length === 0) {
           return enforceAlphabeticalCSSOrderInStyleObject;
         }
-        return (ruleContext: Rule.RuleContext, node: TSESTree.Node) =>
-          enforceUserDefinedGroupOrderInStyleObject(
-            ruleContext,
-            node as TSESTree.ObjectExpression,
-            userDefinedGroupOrder,
-            sortRemainingProperties,
-          );
+        return (ruleContext: Rule.RuleContext, node: TSESTree.ObjectExpression) =>
+          enforceUserDefinedGroupOrderInStyleObject(ruleContext, node, userDefinedGroupOrder, sortRemainingProperties);
       default:
         return enforceAlphabeticalCSSOrderInStyleObject;
     }