@youthfulhps/prettier-plugin-tailwindcss-normalizer 0.4.1 → 0.5.2

package/README.md

@@ -5,31 +5,26 @@
 
 A Prettier plugin that automatically normalizes Tailwind CSS arbitrary values into standard utility classes, helping maintain consistent and optimized CSS across your project.
 
-> **⚠️ Important**: This plugin requires **Prettier v3.0.0 or higher**. It does not support Prettier v2.
+**Requires Prettier v3.0.0 or higher** (Prettier v2 is not supported)
 
-## ✨ Features
+## Features
 
-- **Automatic Normalization**: Converts arbitrary values like `p-[4px]` to standard classes like `p-1`
-- **Multi-Framework Support**: Works with HTML, React/JSX, Vue.js, and Angular
-- **Safe Transformation**: Only transforms class attributes, leaving comments, text, and other attributes untouched
-- **Comprehensive Mapping**: Supports padding, margin, sizing, typography, borders, shadows, and more
-- **Prettier v3+ Only**: Built specifically for Prettier v3.0.0 and above (v2 not supported)
+- Converts arbitrary values like `p-[4px]` to standard classes like `p-1`
+- Works with HTML, React/JSX, Vue.js, and Angular
+- Only transforms class attributes, leaving comments, text, and other attributes untouched
+- Supports padding, margin, sizing, typography, borders, shadows, and more
+- Supports all Tailwind CSS variants (responsive, state, dark mode, group, peer, etc.)
 
-## 🚀 Installation
-
-**Prerequisites**: Make sure you have Prettier v3.0.0 or higher installed.
+## Installation
 
 ```bash
-# Install Prettier v3+ (if not already installed)
 npm install --save-dev prettier@^3.0.0
-
-# Install the plugin
 npm install --save-dev @youthfulhps/prettier-plugin-tailwindcss-normalizer
 ```
 
-## 📖 Usage
+## Usage
 
-### 1. Configure Prettier
+### Basic Configuration
 
 Add the plugin to your Prettier configuration:
 
@@ -49,7 +44,7 @@ module.exports = {
 };
 ```
 
-### 2. Run Prettier
+### Running Prettier
 
 ```bash
 # Format all files
@@ -59,35 +54,29 @@ npx prettier --write .
 npx prettier --write src/**/*.{tsx,jsx,html,vue}
 ```
 
-## 🔗 Using with Other Prettier Tailwind Plugins
-
-To use this plugin alongside other prettier tailwind plugins, you need to install and configure `prettier-plugin-merge`.
+## Using with Other Prettier Tailwind Plugins
 
-### Installation
+To use this plugin alongside other prettier tailwind plugins (like `prettier-plugin-tailwindcss`), install and configure `prettier-plugin-merge`:
 
 ```bash
 npm install --save-dev prettier-plugin-merge
 ```
 
-### Configuration
-
-In your `.prettierrc.js` file, add `prettier-plugin-merge` as the last item in the plugins array:
+**`.prettierrc.js`**
 
 ```javascript
 module.exports = {
   plugins: [
     "@youthfulhps/prettier-plugin-tailwindcss-normalizer",
     "prettier-plugin-tailwindcss",
-    "prettier-plugin-merge",
+    "prettier-plugin-merge", // Must be last
   ],
 };
 ```
 
-> **Note**: `prettier-plugin-merge` is a plugin that enables multiple prettier plugins to work together. When using with other tailwind-related plugins, it should always be placed last in the plugins array.
+## Examples
 
-## 🎯 Examples
-
-### Before
+**Before:**
 
 ```jsx
 <div className="p-[16px] m-[8px] bg-blue-500">
@@ -95,7 +84,7 @@ module.exports = {
 </div>
 ```
 
-### After
+**After:**
 
 ```jsx
 <div className="p-4 m-2 bg-blue-500">
@@ -103,65 +92,58 @@ module.exports = {
 </div>
 ```
 
-## 🛡️ Safety Features
-
-The plugin is designed to be safe and only transforms class-related attributes:
-
-### ✅ What Gets Transformed
-
-- `className` attributes in JSX/TSX
-- `class` attributes in HTML
-- `:class` and `v-bind:class` in Vue
-- `[class]` in Angular
-- String literals in template literals
-- Function calls like `clsx()`, `classnames()`, `cn()`
+**With Variants:**
 
-### ❌ What Stays Untouched
+```jsx
+// Before
+<div className="md:p-[16px] hover:m-[8px] dark:bg-[#1f2937]">
+  Content
+</div>
 
-- Comments and documentation
-- Regular text content
-- Other HTML attributes (`title`, `data-*`, etc.)
-- JavaScript strings and variables
-- CSS in `<style>` tags
+// After
+<div className="md:p-4 hover:m-2 dark:bg-[#1f2937]">
+  Content
+</div>
+```
 
-## 📋 Supported Mappings
+## Supported Mappings
 
 ### Spacing
 
-- **Padding**: `p-[4px]` → `p-1`, `px-[16px]` → `px-4`
-- **Margin**: `m-[8px]` → `m-2`, `my-[12px]` → `my-3`
-- **Gap**: `gap-[8px]` → `gap-2`, `gap-x-[16px]` → `gap-x-4`
+- Padding: `p-[4px]` → `p-1`, `px-[16px]` → `px-4`
+- Margin: `m-[8px]` → `m-2`, `my-[12px]` → `my-3`
+- Gap: `gap-[8px]` → `gap-2`, `gap-x-[16px]` → `gap-x-4`
 
 ### Sizing
 
-- **Width**: `w-[100px]` → `w-25`, `w-[200px]` → `w-50`
-- **Height**: `h-[50px]` → `h-12.5`, `h-[100px]` → `h-25`
+- Width: `w-[100px]` → `w-25`, `w-[200px]` → `w-50`
+- Height: `h-[50px]` → `h-12.5`, `h-[100px]` → `h-25`
 
 ### Typography
 
-- **Font Size**: `text-[14px]` → `text-sm`, `text-[18px]` → `text-lg`
+- Font Size: `text-[14px]` → `text-sm`, `text-[18px]` → `text-lg`
+- Letter Spacing: `tracking-[-0.05em]` → `tracking-tighter`
 
 ### Layout
 
-- **Border Radius**: `rounded-[4px]` → `rounded`, `rounded-[6px]` → `rounded-md`
-- **Border Width**: `border-[1px]` → `border`, `border-[2px]` → `border-2`
+- Border Radius: `rounded-[4px]` → `rounded`, `rounded-[6px]` → `rounded-md`
+- Border Width: `border-[1px]` → `border`, `border-[2px]` → `border-2`
 
 ### Effects
 
-- **Box Shadow**: `shadow-[0_1px_3px_rgba(0,0,0,0.1)]` → `shadow-sm`
-- **Opacity**: `opacity-[0.5]` → `opacity-50`
+- Box Shadow: `shadow-[0_1px_3px_rgba(0,0,0,0.1)]` → `shadow-sm`
+- Opacity: `opacity-[0.5]` → `opacity-50`
 
-## 🔧 Configuration
+### Transforms
 
-### Basic Configuration
+- Rotate: `rotate-[-180deg]` → `-rotate-180`
+- Translate: `translate-x-[-100%]` → `-translate-x-full`
 
-The plugin works out of the box with default settings. No additional configuration is required.
+## Configuration
 
 ### Custom Spacing Unit
 
-If you've customized your Tailwind CSS spacing scale, you can configure the plugin to match your custom spacing unit.
-
-By default, Tailwind uses **4px** as the base spacing unit (e.g., `p-1` = 4px, `p-2` = 8px). If you've changed this in your Tailwind configuration, you should update the `customSpacingUnit` option.
+By default, Tailwind uses **4px** as the base spacing unit (e.g., `p-1` = 4px, `p-2` = 8px). If you've customized your Tailwind spacing scale, configure the `customSpacingUnit` option:
 
 **`.prettierrc.js`**
 
@@ -172,83 +154,69 @@ module.exports = {
 };
 ```
 
-**`tailwind.config.js` (Example with 8px base unit)**
-
-```javascript
-module.exports = {
-  theme: {
-    extend: {
-      spacing: {
-        1: "8px", // 8px * 1
-        2: "16px", // 8px * 2
-        3: "24px", // 8px * 3
-        4: "32px", // 8px * 4
-        // ... etc
-      },
-    },
-  },
-};
-```
-
-**Tailwind CSS v4 (`global.css` or similar)**
-
-```css
-@theme {
-  --spacing: 1px;
-  /* ... etc */
-}
-```
-
-**Example with `customSpacingUnit: 8`**
+**Example with `customSpacingUnit: 8`:**
 
 ```jsx
 // Before
 <div className="p-[8px] m-[16px] gap-[24px]">Content</div>
 
-// After (with customSpacingUnit: 8)
+// After
 <div className="p-1 m-2 gap-3">Content</div>
 ```
 
-**Example with default `customSpacingUnit: 4`**
+See the [examples/custom-spacing](./examples/custom-spacing) directory for a complete working example.
 
-```jsx
-// Before
-<div className="p-[4px] m-[8px] gap-[12px]">Content</div>
+## Supported Variants
 
-// After (with customSpacingUnit: 4)
-<div className="p-1 m-2 gap-3">Content</div>
-```
+The plugin supports all Tailwind CSS variants:
 
-See the [examples/custom-spacing](./examples/custom-spacing) directory for a complete working example.
+- **Responsive**: `sm:`, `md:`, `lg:`, `xl:`, `2xl:`
+- **State**: `hover:`, `focus:`, `active:`, `disabled:`, etc.
+- **Dark Mode**: `dark:`
+- **Group/Peer**: `group-hover:`, `peer-checked:`, etc.
+- **Pseudo-elements**: `before:`, `after:`, `placeholder:`, etc.
+- **ARIA**: `aria-checked:`, `aria-disabled:`, etc.
+- **Data Attributes**: `data-[status=active]:`
+- **Arbitrary**: `[&:nth-child(3)]:`, `has-[input:focus]:`, etc.
+
+## Safety Features
+
+The plugin only transforms class-related attributes:
+
+**Transformed:**
+
+- `className` attributes in JSX/TSX
+- `class` attributes in HTML
+- `:class` and `v-bind:class` in Vue
+- `[class]` in Angular
+- String literals in template literals
+- Function calls like `clsx()`, `classnames()`, `cn()`
 
-> **Note**: This plugin is optimized for Prettier v3+ and takes advantage of the new plugin architecture. If you're using Prettier v2, please upgrade to v3 or use an alternative solution.
+**Untouched:**
 
-## 🧪 Testing
+- Comments and documentation
+- Regular text content
+- Other HTML attributes
+- JavaScript strings and variables
+- CSS in `<style>` tags
 
-The plugin includes comprehensive tests covering:
+## File Support
 
-- Various file formats (HTML, JSX, TSX, Vue)
-- Edge cases and complex scenarios
-- Safety features and non-transformation cases
-- Different Tailwind CSS patterns
+| Format    | Extension         |
+| --------- | ----------------- |
+| HTML      | `.html`           |
+| React JSX | `.jsx`            |
+| React TSX | `.tsx`            |
+| Vue       | `.vue`            |
+| Angular   | `.component.html` |
 
-Run tests:
+## Testing
 
 ```bash
 npm test
 ```
 
-## 📁 File Support
-
-| Format    | Extension         | Support |
-| --------- | ----------------- | ------- |
-| HTML      | `.html`           | ✅      |
-| React JSX | `.jsx`            | ✅      |
-| React TSX | `.tsx`            | ✅      |
-| Vue       | `.vue`            | ✅      |
-| Angular   | `.component.html` | ✅      |
-
-## 🤝 Contributing
+## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
@@ -258,17 +226,11 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
-## 📄 License
+## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-## 🙏 Acknowledgments
-
-- Built for the Prettier ecosystem
-- Inspired by Tailwind CSS best practices
-- Thanks to all contributors and users
-
-## 📞 Support
+## Support
 
 If you encounter any issues or have questions:
 
@@ -278,15 +240,8 @@ If you encounter any issues or have questions:
 
 ### Common Issues
 
-**Q: The plugin doesn't work with Prettier v2**
+**Q: The plugin doesn't work with Prettier v2**  
 A: This plugin requires Prettier v3.0.0 or higher. Please upgrade your Prettier version.
 
-**Q: How do I check my Prettier version?**
+**Q: How do I check my Prettier version?**  
 A: Run `npx prettier --version` to check your current Prettier version.
-
-**Q: Can I use this with Prettier v2?**
-A: No, this plugin is built specifically for Prettier v3+ and will not work with v2.
-
----
-
-**Made with ❤️ for the developer community**

package/dist/normalizer.js

@@ -77,18 +77,90 @@ function normalizeClassNames(classNames) {
     return classes.map((className) => normalizeClassName(className)).join(" ");
 }
 function normalizeClassName(className) {
+    let variantPrefix = "";
+    let pos = 0;
+    while (pos < className.length) {
+        if (className[pos] === "[") {
+            const bracketEnd = className.indexOf("]:", pos);
+            if (bracketEnd === -1)
+                break;
+            variantPrefix += className.substring(pos, bracketEnd + 2);
+            pos = bracketEnd + 2;
+        }
+        else {
+            const colonPos = className.indexOf(":", pos);
+            if (colonPos === -1)
+                break;
+            const beforeColon = className.substring(pos, colonPos);
+            if (beforeColon.includes("[")) {
+                const bracketEnd = className.indexOf("]:", pos);
+                if (bracketEnd === -1)
+                    break;
+                variantPrefix += className.substring(pos, bracketEnd + 2);
+                pos = bracketEnd + 2;
+            }
+            else {
+                variantPrefix += className.substring(pos, colonPos + 1);
+                pos = colonPos + 1;
+            }
+        }
+        if (pos >= className.length)
+            break;
+        if (className[pos] === " ")
+            break;
+        const nextChar = className[pos];
+        if (!/[a-z0-9_\-\[\]]/.test(nextChar)) {
+            break;
+        }
+    }
+    const classWithoutVariant = className.substring(variantPrefix.length);
+    if (!variantPrefix) {
+        return normalizeClassNameWithoutVariant(className);
+    }
+    const normalizedClass = normalizeClassNameWithoutVariant(classWithoutVariant);
+    if (normalizedClass === classWithoutVariant) {
+        return className;
+    }
+    return variantPrefix + normalizedClass;
+}
+function normalizeClassNameWithoutVariant(className) {
     const negativeArbitraryValueRegex = /^-([a-z:-]+)\[([^\]]+)\]$/;
     const negativeArbitraryMatch = className.match(negativeArbitraryValueRegex);
     if (negativeArbitraryMatch) {
         const [, prefixWithDash, value] = negativeArbitraryMatch;
         const prefix = prefixWithDash.replace(/-$/, "");
+        const negativeAllowedPrefixes = [
+            "m",
+            "mx",
+            "my",
+            "mt",
+            "mr",
+            "mb",
+            "ml",
+            "ms",
+            "me",
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "inset",
+            "inset-x",
+            "inset-y",
+            "gap",
+            "gap-x",
+            "gap-y",
+            "space-x",
+            "space-y",
+        ];
+        if (!negativeAllowedPrefixes.includes(prefix)) {
+            return className;
+        }
         if (value === "0px" || value === "0") {
             const mapping = findStandardMapping(prefix, value);
-            return mapping || className;
+            return mapping ? `-${mapping}` : className;
         }
-        const negativeValue = `-${value}`;
-        const mapping = findStandardMapping(prefix, negativeValue);
-        return mapping || className;
+        const mapping = findStandardMapping(prefix, value);
+        return mapping ? `-${mapping}` : className;
     }
     const arbitraryValueRegex = /^([a-z:-]+)\[([^\]]+)\]$/;
     const arbitraryMatch = className.match(arbitraryValueRegex);
@@ -101,8 +173,42 @@ function normalizeClassName(className) {
                 const mapping = findStandardMapping(prefix, positiveValue);
                 return mapping || className;
             }
-            const mapping = findStandardMapping(prefix, value);
-            return mapping || className;
+            const negativeMapping = findStandardMapping(prefix, value);
+            if (negativeMapping) {
+                return negativeMapping;
+            }
+            const negativeAllowedPrefixes = [
+                "m",
+                "mx",
+                "my",
+                "mt",
+                "mr",
+                "mb",
+                "ml",
+                "ms",
+                "me",
+                "top",
+                "right",
+                "bottom",
+                "left",
+                "inset",
+                "inset-x",
+                "inset-y",
+                "gap",
+                "gap-x",
+                "gap-y",
+                "space-x",
+                "space-y",
+                "rotate",
+                "translate-x",
+                "translate-y",
+            ];
+            if (negativeAllowedPrefixes.includes(prefix)) {
+                const positiveValue = value.substring(1);
+                const mapping = findStandardMapping(prefix, positiveValue);
+                return mapping ? `-${mapping}` : className;
+            }
+            return className;
         }
         const mapping = findStandardMapping(prefix, value);
         return mapping || className;
@@ -111,13 +217,39 @@ function normalizeClassName(className) {
     const negativePxMatch = className.match(negativePxSuffixRegex);
     if (negativePxMatch) {
         const [, prefix, numValue] = negativePxMatch;
+        const negativeAllowedPrefixes = [
+            "m",
+            "mx",
+            "my",
+            "mt",
+            "mr",
+            "mb",
+            "ml",
+            "ms",
+            "me",
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "inset",
+            "inset-x",
+            "inset-y",
+            "gap",
+            "gap-x",
+            "gap-y",
+            "space-x",
+            "space-y",
+        ];
+        if (!negativeAllowedPrefixes.includes(prefix)) {
+            return className;
+        }
         if (numValue === "0") {
             const mapping = findStandardMapping(prefix, "0px");
-            return mapping || className;
+            return mapping ? `-${mapping}` : className;
         }
-        const negativePixelValue = `-${numValue}px`;
-        const mapping = findStandardMapping(prefix, negativePixelValue);
-        return mapping || className;
+        const pixelValue = `${numValue}px`;
+        const mapping = findStandardMapping(prefix, pixelValue);
+        return mapping ? `-${mapping}` : className;
     }
     const pxSuffixRegex = /^([a-z:-]+)-(\d+)px$/;
     const pxMatch = className.match(pxSuffixRegex);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youthfulhps/prettier-plugin-tailwindcss-normalizer",
-  "version": "0.4.1",
+  "version": "0.5.2",
   "description": "A Prettier plugin that normalizes Tailwind CSS arbitrary values into standard utility classes.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",