@youthfulhps/prettier-plugin-tailwindcss-normalizer 0.3.4 → 0.3.7

package/README.md

@@ -1,3 +1,204 @@
 # prettier-plugin-tailwindcss-normalizer
 
-A Prettier plugin that normalizes Tailwind CSS arbitrary values into standard utility classes.
+[![npm version](https://badge.fury.io/js/%40youthfulhps%2Fprettier-plugin-tailwindcss-normalizer.svg)](https://badge.fury.io/js/%40youthfulhps%2Fprettier-plugin-tailwindcss-normalizer)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+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.
+
+## ✨ 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)
+
+## 🚀 Installation
+
+**Prerequisites**: Make sure you have Prettier v3.0.0 or higher installed.
+
+```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
+
+### 1. Configure Prettier
+
+Add the plugin to your Prettier configuration:
+
+**`.prettierrc`**
+
+```json
+{
+  "plugins": ["@youthfulhps/prettier-plugin-tailwindcss-normalizer"]
+}
+```
+
+**`prettier.config.js`**
+
+```javascript
+module.exports = {
+  plugins: ['@youthfulhps/prettier-plugin-tailwindcss-normalizer'],
+};
+```
+
+### 2. Run Prettier
+
+```bash
+# Format all files
+npx prettier --write .
+
+# Format specific files
+npx prettier --write src/**/*.{tsx,jsx,html,vue}
+```
+
+## 🎯 Examples
+
+### Before
+
+```jsx
+<div className="p-[16px] m-[8px] bg-blue-500">
+  <span className="px-[24px] py-[12px] rounded-[6px]">
+    Button
+  </span>
+</div>
+```
+
+### After
+
+```jsx
+<div className="p-4 m-2 bg-blue-500">
+  <span className="px-6 py-3 rounded-md">
+    Button
+  </span>
+</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()`
+
+### ❌ What Stays Untouched
+
+- Comments and documentation
+- Regular text content
+- Other HTML attributes (`title`, `data-*`, etc.)
+- JavaScript strings and variables
+- CSS in `<style>` tags
+
+## 📋 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`
+
+### Sizing
+
+- **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`
+
+### Layout
+
+- **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`
+
+## 🔧 Configuration
+
+The plugin works out of the box with default settings. No additional configuration is required.
+
+> **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.
+
+## 🧪 Testing
+
+The plugin includes comprehensive tests covering:
+
+- Various file formats (HTML, JSX, TSX, Vue)
+- Edge cases and complex scenarios
+- Safety features and non-transformation cases
+- Different Tailwind CSS patterns
+
+Run tests:
+
+```bash
+npm test
+```
+
+## 📁 File Support
+
+| Format    | Extension         | Support |
+| --------- | ----------------- | ------- |
+| HTML      | `.html`           | ✅      |
+| React JSX | `.jsx`            | ✅      |
+| React TSX | `.tsx`            | ✅      |
+| Vue       | `.vue`            | ✅      |
+| Angular   | `.component.html` | ✅      |
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 📄 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
+
+If you encounter any issues or have questions:
+
+1. Check the [Issues](https://github.com/youthfulhps/prettier-plugin-tailwindcss-normalizer/issues) page
+2. Create a new issue with detailed information
+3. Provide examples of your code and expected behavior
+
+### Common Issues
+
+**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?**
+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.js

@@ -2,6 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const ast_transformer_1 = require("./ast-transformer");
 const version_utils_1 = require("./utils/version-utils");
+function createParser(parserName, fileType) {
+    const baseParser = (0, version_utils_1.safeLoadParser)(parserName, fileType);
+    return {
+        ...baseParser,
+        preprocess: (text, options) => {
+            return (0, ast_transformer_1.transformByFileType)(text, options.filepath || `file.${fileType}`);
+        },
+    };
+}
 const plugin = {
     languages: [
         {
@@ -31,42 +40,37 @@ const plugin = {
         },
     ],
     parsers: {
-        html: {
-            ...(0, version_utils_1.safeLoadParser)("html"),
-            preprocess: (text, options) => {
-                return (0, ast_transformer_1.transformByFileType)(text, options.filepath || "file.html");
-            },
-        },
-        vue: {
-            ...(0, version_utils_1.safeLoadParser)("html", "vue"),
-            preprocess: (text, options) => {
-                return (0, ast_transformer_1.transformByFileType)(text, options.filepath || "file.vue");
-            },
-        },
-        angular: {
-            ...(0, version_utils_1.safeLoadParser)("angular"),
-            preprocess: (text, options) => {
-                return (0, ast_transformer_1.transformByFileType)(text, options.filepath || "file.html");
-            },
-        },
+        html: createParser("html", "html"),
+        vue: createParser("html", "vue"),
+        angular: createParser("angular", "html"),
         babel: {
-            ...(0, version_utils_1.safeLoadParser)("babel"),
-            preprocess: (text, options) => {
+            ...createParser("babel", "jsx"),
+            parse: (text, options) => {
                 const filepath = options.filepath || "";
                 if (filepath.endsWith(".jsx") || filepath.endsWith(".tsx")) {
-                    return (0, ast_transformer_1.transformByFileType)(text, filepath);
+                    const transformedText = (0, ast_transformer_1.transformByFileType)(text, filepath);
+                    const baseParser = (0, version_utils_1.safeLoadParser)("babel");
+                    return baseParser.parse
+                        ? baseParser.parse(transformedText, options)
+                        : text;
                 }
-                return text;
+                const baseParser = (0, version_utils_1.safeLoadParser)("babel");
+                return baseParser.parse ? baseParser.parse(text, options) : text;
             },
         },
         "babel-ts": {
-            ...(0, version_utils_1.safeLoadParser)("babel", "babel-ts"),
-            preprocess: (text, options) => {
+            ...createParser("babel", "tsx"),
+            parse: (text, options) => {
                 const filepath = options.filepath || "";
                 if (filepath.endsWith(".tsx")) {
-                    return (0, ast_transformer_1.transformByFileType)(text, filepath);
+                    const transformedText = (0, ast_transformer_1.transformByFileType)(text, filepath);
+                    const baseParser = (0, version_utils_1.safeLoadParser)("babel", "babel-ts");
+                    return baseParser.parse
+                        ? baseParser.parse(transformedText, options)
+                        : text;
                 }
-                return text;
+                const baseParser = (0, version_utils_1.safeLoadParser)("babel", "babel-ts");
+                return baseParser.parse ? baseParser.parse(text, options) : text;
             },
         },
     },

package/dist/utils/version-utils.d.ts

@@ -1,6 +1,4 @@
 export declare function getPrettierMajorVersion(): number;
-export declare function isPrettierV2(): boolean;
-export declare function isPrettierV3Plus(): boolean;
 export declare function loadParser(parserName: string): any;
 export declare function getParserFromParsers(parsers: any, parserName: string): any;
 export declare function safeLoadParser(parserName: string, specificParser?: string): any;

package/dist/utils/version-utils.js

@@ -1,54 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPrettierMajorVersion = getPrettierMajorVersion;
-exports.isPrettierV2 = isPrettierV2;
-exports.isPrettierV3Plus = isPrettierV3Plus;
 exports.loadParser = loadParser;
 exports.getParserFromParsers = getParserFromParsers;
 exports.safeLoadParser = safeLoadParser;
-let prettierVersion = null;
 function getPrettierMajorVersion() {
-    if (prettierVersion !== null) {
-        return prettierVersion;
-    }
-    try {
-        const prettier = require("prettier");
-        if (prettier.version) {
-            const majorVersion = parseInt(prettier.version.split(".")[0]);
-            prettierVersion = majorVersion;
-            return majorVersion;
-        }
-        const prettierPackageJson = require("prettier/package.json");
-        if (prettierPackageJson.version) {
-            const majorVersion = parseInt(prettierPackageJson.version.split(".")[0]);
-            prettierVersion = majorVersion;
-            return majorVersion;
-        }
-        prettierVersion = 3;
-        return 3;
-    }
-    catch (error) {
-        prettierVersion = 3;
-        return 3;
-    }
-}
-function isPrettierV2() {
-    return getPrettierMajorVersion() === 2;
-}
-function isPrettierV3Plus() {
-    return getPrettierMajorVersion() >= 3;
+    return 3;
 }
 function loadParser(parserName) {
-    const majorVersion = getPrettierMajorVersion();
-    const pathsToTry = [];
-    if (majorVersion >= 3) {
-        pathsToTry.push(`prettier/plugins/${parserName}`);
-        pathsToTry.push(`prettier/parser-${parserName}`);
-    }
-    else {
-        pathsToTry.push(`prettier/parser-${parserName}`);
-        pathsToTry.push(`prettier/plugins/${parserName}`);
-    }
+    const pathsToTry = [
+        `prettier/plugins/${parserName}`,
+        `prettier/parser-${parserName}`,
+    ];
     let lastError = null;
     for (const path of pathsToTry) {
         try {
@@ -60,7 +23,6 @@ function loadParser(parserName) {
         }
     }
     throw new Error(`Failed to load parser: ${parserName}. ` +
-        `Prettier version: ${majorVersion}. ` +
         `Tried paths: ${pathsToTry.join(", ")}. ` +
         `Last error: ${lastError?.message}`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youthfulhps/prettier-plugin-tailwindcss-normalizer",
-  "version": "0.3.4",
+  "version": "0.3.7",
   "description": "A Prettier plugin that normalizes Tailwind CSS arbitrary values into standard utility classes.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,7 +39,7 @@
   "author": "Your Name",
   "license": "MIT",
   "peerDependencies": {
-    "prettier": ">=2.0.0"
+    "prettier": ">=3.0.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.8",
@@ -48,7 +48,7 @@
     "@typescript-eslint/parser": "^7.0.0",
     "eslint": "^8.57.1",
     "jest": "^29.7.0",
-    "prettier": "^3.1.0",
+    "prettier": "^3.0.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.2.2"
   },