@youthfulhps/prettier-plugin-tailwindcss-normalizer 0.3.10 → 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
+## Using with Other Prettier Tailwind Plugins
 
-To use this plugin alongside other prettier tailwind plugins, you need to install and configure `prettier-plugin-merge`.
-
-### 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,86 +92,131 @@ 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
 
-The plugin works out of the box with default settings. No additional configuration is required.
+- Rotate: `rotate-[-180deg]` → `-rotate-180`
+- Translate: `translate-x-[-100%]` → `-translate-x-full`
 
-> **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.
+## Configuration
 
-## 🧪 Testing
+### Custom Spacing Unit
 
-The plugin includes comprehensive tests covering:
+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:
 
-- Various file formats (HTML, JSX, TSX, Vue)
-- Edge cases and complex scenarios
-- Safety features and non-transformation cases
-- Different Tailwind CSS patterns
+**`.prettierrc.js`**
 
-Run tests:
+```javascript
+module.exports = {
+  plugins: ["@youthfulhps/prettier-plugin-tailwindcss-normalizer"],
+  customSpacingUnit: 8, // Change to match your Tailwind spacing scale
+};
+```
 
-```bash
-npm test
+**Example with `customSpacingUnit: 8`:**
+
+```jsx
+// Before
+<div className="p-[8px] m-[16px] gap-[24px]">Content</div>
+
+// After
+<div className="p-1 m-2 gap-3">Content</div>
 ```
 
-## 📁 File Support
+See the [examples/custom-spacing](./examples/custom-spacing) directory for a complete working example.
+
+## Supported Variants
+
+The plugin supports all Tailwind CSS variants:
+
+- **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.
 
-| Format    | Extension         | Support |
-| --------- | ----------------- | ------- |
-| HTML      | `.html`           | ✅      |
-| React JSX | `.jsx`            | ✅      |
-| React TSX | `.tsx`            | ✅      |
-| Vue       | `.vue`            | ✅      |
-| Angular   | `.component.html` | ✅      |
+## 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()`
 
-## 🤝 Contributing
+**Untouched:**
+
+- Comments and documentation
+- Regular text content
+- Other HTML attributes
+- JavaScript strings and variables
+- CSS in `<style>` tags
+
+## File Support
+
+| Format    | Extension         |
+| --------- | ----------------- |
+| HTML      | `.html`           |
+| React JSX | `.jsx`            |
+| React TSX | `.tsx`            |
+| Vue       | `.vue`            |
+| Angular   | `.component.html` |
+
+## Testing
+
+```bash
+npm test
+```
+
+## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
@@ -192,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:
 
@@ -212,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/index.d.ts

@@ -3,5 +3,5 @@ declare const parsers: Record<string, CompatParser>, languages: {
     name: string;
     parsers: string[];
     extensions: string[];
-}[] | undefined;
-export { parsers, languages };
+}[] | undefined, options: Record<string, any> | undefined;
+export { parsers, languages, options };

package/dist/index.js

@@ -1,13 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.languages = exports.parsers = void 0;
+exports.options = exports.languages = exports.parsers = void 0;
 const ast_transformer_1 = require("./ast-transformer");
 const version_utils_1 = require("./utils/version-utils");
+const normalizer_1 = require("./normalizer");
 function createParser(parserName, fileType) {
     const baseParser = (0, version_utils_1.safeLoadParser)(parserName, fileType);
     return {
         ...baseParser,
         preprocess: (text, options) => {
+            const pluginOptions = {
+                customSpacingUnit: options.customSpacingUnit,
+            };
+            (0, normalizer_1.setPluginOptions)(pluginOptions);
             return (0, ast_transformer_1.transformByFileType)(text, options.filepath || `file.${fileType}`);
         },
     };
@@ -62,7 +67,16 @@ const plugin = {
             astFormat: "estree",
         },
     },
+    options: {
+        customSpacingUnit: {
+            type: "int",
+            category: "Tailwind",
+            default: 4,
+            description: "Custom spacing unit in pixels (default: 4). Tailwind uses 4px as the base unit (e.g., p-1 = 4px). Change this if you've customized Tailwind's spacing scale.",
+        },
+    },
 };
-const { parsers, languages } = plugin;
+const { parsers, languages, options } = plugin;
 exports.parsers = parsers;
 exports.languages = languages;
+exports.options = options;

package/dist/normalizer.d.ts

@@ -1,3 +1,5 @@
+import { PluginOptions } from "./types";
+export declare function setPluginOptions(options?: PluginOptions): void;
 export declare function normalizeClassAttribute(content: string): string;
 export declare function normalizeClassNames(classNames: string): string;
 export declare function normalizeClassName(className: string): string;

package/dist/normalizer.js

@@ -1,9 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.setPluginOptions = setPluginOptions;
 exports.normalizeClassAttribute = normalizeClassAttribute;
 exports.normalizeClassNames = normalizeClassNames;
 exports.normalizeClassName = normalizeClassName;
 const mappings_1 = require("./mappings");
+const spacing_generator_1 = require("./utils/spacing-generator");
+let currentMappings = mappings_1.TAILWIND_MAPPINGS;
+function setPluginOptions(options = {}) {
+    if (options.customSpacingUnit && options.customSpacingUnit !== 4) {
+        const customSpacingMappings = (0, spacing_generator_1.generateSpacingMappings)(options.customSpacingUnit);
+        currentMappings = {
+            ...mappings_1.TAILWIND_MAPPINGS,
+            ...customSpacingMappings,
+        };
+    }
+    else {
+        currentMappings = mappings_1.TAILWIND_MAPPINGS;
+    }
+}
 function normalizeClassAttribute(content) {
     let result = content;
     const classAttributeRegex = /class\s*=\s*["']([^"']*?)["']/g;
@@ -62,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);
@@ -86,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;
@@ -96,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);
@@ -115,7 +262,7 @@ function normalizeClassName(className) {
     return className;
 }
 function findStandardMapping(prefix, value) {
-    const mappings = mappings_1.TAILWIND_MAPPINGS[prefix];
+    const mappings = currentMappings[prefix];
     if (!mappings) {
         return null;
     }

package/dist/types.d.ts

@@ -1,4 +1,7 @@
 export type ValueMapping = Record<string, string>;
+export interface PluginOptions {
+    customSpacingUnit?: number;
+}
 export type TailwindMapping = {
     p?: ValueMapping;
     px?: ValueMapping;

package/dist/utils/spacing-generator.d.ts

@@ -0,0 +1,2 @@
+import { ValueMapping } from "../types";
+export declare function generateSpacingMappings(customUnit?: number): Record<string, ValueMapping>;

package/dist/utils/spacing-generator.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateSpacingMappings = generateSpacingMappings;
+function generateSpacingMappings(customUnit = 4) {
+    const spacingPrefixes = [
+        "p",
+        "px",
+        "py",
+        "pt",
+        "pr",
+        "pb",
+        "pl",
+        "ps",
+        "pe",
+        "m",
+        "mx",
+        "my",
+        "mt",
+        "mr",
+        "mb",
+        "ml",
+        "ms",
+        "me",
+        "gap",
+        "gap-x",
+        "gap-y",
+        "space-x",
+        "space-y",
+        "w",
+        "h",
+        "size",
+        "min-w",
+        "max-w",
+        "min-h",
+        "max-h",
+        "top",
+        "right",
+        "bottom",
+        "left",
+        "scroll-m",
+        "scroll-p",
+    ];
+    const standardScales = [
+        { scale: "0", multiplier: 0 },
+        { scale: "0.5", multiplier: 0.5 },
+        { scale: "1", multiplier: 1 },
+        { scale: "1.5", multiplier: 1.5 },
+        { scale: "2", multiplier: 2 },
+        { scale: "2.5", multiplier: 2.5 },
+        { scale: "3", multiplier: 3 },
+        { scale: "3.5", multiplier: 3.5 },
+        { scale: "4", multiplier: 4 },
+        { scale: "5", multiplier: 5 },
+        { scale: "6", multiplier: 6 },
+        { scale: "7", multiplier: 7 },
+        { scale: "8", multiplier: 8 },
+        { scale: "9", multiplier: 9 },
+        { scale: "10", multiplier: 10 },
+        { scale: "11", multiplier: 11 },
+        { scale: "12", multiplier: 12 },
+        { scale: "14", multiplier: 14 },
+        { scale: "16", multiplier: 16 },
+        { scale: "20", multiplier: 20 },
+        { scale: "24", multiplier: 24 },
+        { scale: "28", multiplier: 28 },
+        { scale: "32", multiplier: 32 },
+        { scale: "36", multiplier: 36 },
+        { scale: "40", multiplier: 40 },
+        { scale: "44", multiplier: 44 },
+        { scale: "48", multiplier: 48 },
+        { scale: "52", multiplier: 52 },
+        { scale: "56", multiplier: 56 },
+        { scale: "60", multiplier: 60 },
+        { scale: "64", multiplier: 64 },
+        { scale: "72", multiplier: 72 },
+        { scale: "80", multiplier: 80 },
+        { scale: "96", multiplier: 96 },
+    ];
+    const fractionalPrefixes = ["py", "my"];
+    const result = {};
+    spacingPrefixes.forEach((prefix) => {
+        const mapping = {};
+        const supportsFractional = fractionalPrefixes.includes(prefix);
+        const supportsNegative = [
+            "m",
+            "mx",
+            "my",
+            "mt",
+            "mr",
+            "mb",
+            "ml",
+            "ms",
+            "me",
+            "top",
+            "right",
+            "bottom",
+            "left",
+        ].includes(prefix);
+        standardScales.forEach(({ scale, multiplier }) => {
+            if (!supportsFractional && scale.includes(".")) {
+                return;
+            }
+            const pixelValue = multiplier * customUnit;
+            const pixelKey = `${pixelValue}px`;
+            mapping[pixelKey] = `${prefix}-${scale}`;
+            if (supportsNegative && scale !== "0") {
+                const negativePixelValue = -pixelValue;
+                const negativePixelKey = `${negativePixelValue}px`;
+                mapping[negativePixelKey] = `-${prefix}-${scale}`;
+            }
+        });
+        mapping["1px"] = `${prefix}-px`;
+        result[prefix] = mapping;
+    });
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youthfulhps/prettier-plugin-tailwindcss-normalizer",
-  "version": "0.3.10",
+  "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",