Repository: francoismassart/eslint-plugin-tailwindcss
Pull request #161 (2022-09-04 15:55:28)

Add support for `tw` prop from Twin
# Add support for `tw` prop in addition to class and className (see [Twin](https://github.com/ben-rogerson/twin.macro/))

## Description

Simple change to change the class-identifying regex to `/^class(Name)?$|^tw$`

## Type of change: enhancement

- [x] New feature (change which adds functionality, non-breaking unless the user happens to make use of `tw` as a prop already)
- [x] This change requires a documentation update

NOTE: though unlikely it is possible that a codebase is already using the `tw` prop. For this reason it might make more sense to make this an opt-in config option called `props`, similar to `tags`.

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.
Please also list any relevant details for your test configuration

- duplicated a few tests on classnames-order rule and replaced the class` prop with `tw`

**Test Configuration**:
* OS + version: macOS Monterey
* NPM version: `8.11.0`
* Node version: `v16.16.0`

## 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~~ N/A
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
   - No, they do when using props called `tw`
- [x] I have added tests that prove my fix is effective or that my feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream modules
- [x] I have checked my code and corrected any misspellings



Patch:
diff --git a/lib/util/ast.js b/lib/util/ast.js
index 225f2ba..f022091 100644
--- a/lib/util/ast.js
+++ b/lib/util/ast.js
@@ -28,7 +28,7 @@ function isClassAttribute(node) {
     default:
       name = node.name.name;
   }
-  return /^class(Name)?$/.test(name);
+  return /^class(Name)?$|^tw$/.test(name);
 }
 
 /**


Test patch:
diff --git a/tests/lib/rules/classnames-order.js b/tests/lib/rules/classnames-order.js
index a8ba0ee..4e0f21e 100644
--- a/tests/lib/rules/classnames-order.js
+++ b/tests/lib/rules/classnames-order.js
@@ -65,6 +65,9 @@ ruleTester.run("classnames-order", rule, {
     {
       code: `<div class="custom container box-content lg:box-border">Simple, basic</div>`,
     },
+    {
+      code: `<div tw="custom container box-content lg:box-border">Simple, using 'tw' prop</div>`,
+    },
     {
       code: "<div className={ctl(`w-full p-10 ${live && 'bg-blue-100 dark:bg-purple-400 sm:rounded-lg'}`)}>ctl + exp</div>",
     },
@@ -91,6 +94,9 @@ ruleTester.run("classnames-order", rule, {
     {
       code: `<div class="space-y-0.5 ">Extra space at the end</div>`,
     },
+    {
+      code: `<div tw="space-y-0.5 ">Extra space at the end, but with 'tw' prop</div>`,
+    },
     {
       code: `<div class="p-5 sm:px-3 md:py-2 lg:p-4 xl:px-6">'p', then 'py' then 'px'</div>`,
     },
@@ -292,6 +298,11 @@ ruleTester.run("classnames-order", rule, {
       output: `<div class="p-4 sm:py-5 sm:px-7 lg:p-8">Enhancing readability</div>`,
       errors: errors,
     },
+    {
+      code: `<div tw="sm:py-5 p-4 sm:px-7 lg:p-8">Enhancing readability with 'tw' prop</div>`,
+      output: `<div tw="p-4 sm:py-5 sm:px-7 lg:p-8">Enhancing readability with 'tw' prop</div>`,
+      errors: errors,
+    },
     {
       code: `<div class="grid grid-cols-1 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8 md:py-16">:)...</div>`,
       output: `<div class="grid grid-cols-1 sm:grid-cols-2 sm:gap-x-8 sm:px-8 sm:py-12 md:py-16">:)...</div>`,