Skip to content

Conversation

@julienbenac
Copy link
Contributor

This PR enhances the @unocss/order ESLint rule to properly handle nested object expressions in custom functions like cva and tv, ensuring UnoCSS class ordering is correctly applied throughout complex component variant structures.

🐛 Problem

The @unocss/order ESLint rule was not properly traversing and ordering UnoCSS classes within nested object expressions used by popular variant libraries like class-variance-authority (cva) and tailwind-variants (tv). The unoFunctions option only worked with functions accepting simple string parameters, which worked perfectly with utility functions like clsx and cx:

clsx('text-sm px-2 py-1') // ✅ Correctly processed
cx('text-base px-4 py-2') // ✅ Correctly processed

However, it failed to traverse and process functions with nested object expressions like cva and tv, resulting in inconsistent class ordering in component variant definitions where classes within nested objects remained unprocessed.

✨ Changes

This enhancement introduces intelligent object traversal capabilities to the @unocss/order rule, enabling it to recursively process nested object expressions within function calls.

Before

cva('top-1 bottom-1', { // ❌ Not processed
  variants: {
    size: {
      small: 'px-2 text-sm py-1', // ❌ Not processed
      medium: 'px-4 text-base py-2' // ❌ Not processed
    }
  }
})

tv({
  base: 'top-1 bottom-1', // ❌ Not processed
  variants: {
    size: {
      small: 'px-2 text-sm py-1', // ❌ Not processed
      medium: 'px-4 text-base py-2' // ❌ Not processed
    }
  }
})

After

cva('bottom-1 top-1', { // ✅ Correctly processed
  variants: {
    size: {
      small: 'text-sm px-2 py-1', // ✅ Correctly processed
      medium: 'text-base px-4 py-2' // ✅ Correctly processed
    }
  }
})

tv({
  base: 'bottom-1 top-1', // ✅ Correctly processed
  variants: {
    size: {
      small: 'text-sm px-2 py-1', // ✅ Correctly processed
      medium: 'text-base px-4 py-2' // ✅ Correctly processed
    }
  }
})

@julienbenac julienbenac requested review from antfu and zyyv as code owners August 3, 2025 18:39
@netlify
Copy link

netlify bot commented Aug 3, 2025

Deploy Preview for unocss ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 9759150
🔍 Latest deploy log https://app.netlify.com/projects/unocss/deploys/6892ba5c7e8be20008cbbefc
😎 Deploy Preview https://deploy-preview-4852--unocss.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Aug 4, 2025

Open in StackBlitz

commit: 9759150

@antfu antfu changed the title fix(eslint): enhance unoFunctions option with nested object expressions feat(eslint): enhance unoFunctions option with nested object expressions Aug 6, 2025
@zyyv zyyv added this pull request to the merge queue Aug 6, 2025
Merged via the queue into unocss:main with commit b21e533 Aug 6, 2025
11 checks passed
@julienbenac julienbenac deleted the fix/eslint-uno-functions branch August 6, 2025 07:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants