eslint-plugin-tailwindcss
eslint-plugin-tailwindcss copied to clipboard
feat: add shorthand support for `scroll-padding` and `scroll-margin`
Description
This PR extends the enforces-shorthand rule to support shorthand detection for Tailwind CSS scroll-padding and scroll-margin utilities.
Examples
<!-- Before -->
<div class="scroll-pl-3 scroll-pr-3"></div>
<!-- After -->
<div class="scroll-px-3"></div>
<!-- Before -->
<div class="scroll-mt-4 scroll-mb-4"></div>
<!-- After -->
<div class="scroll-my-4"></div>
<!-- Before -->
<div class="scroll-pt-5 scroll-pr-5 scroll-pb-5 scroll-pl-5"></div>
<!-- After -->
<div class="scroll-p-5"></div>
Fixes #432
Type of change
Please delete options that are not relevant.
- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update
How Has This Been Tested?
Added comprehensive test cases to verify the rule behavior.
Valid (should not trigger):
-
scroll-px-3 -
scroll-pt-3 scroll-pb-4 -
scroll-ml-2 md:scroll-mr-2
Invalid (should auto-fix):
-
scroll-pl-3 scroll-pr-3→scroll-px-3 -
scroll-mt-1 scroll-mb-1→scroll-my-1 -
scroll-mx-2 scroll-my-2→scroll-m-2 -
scroll-pt-5 scroll-pr-5 scroll-pb-5 scroll-pl-5→scroll-p-5
Test Configuration:
- OS + version: macOS Sonoma 14.5 (Darwin 23.5.0)
- NPM version: 10.x
- Node version: 20.x
Checklist:
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my feature works
- [ ] Any dependent changes have been merged and published in downstream modules
- [x] I have checked my code and corrected any misspellings