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

package/README.md

@@ -45,7 +45,7 @@ Add the plugin to your Prettier configuration:
 
 ```javascript
 module.exports = {
-  plugins: ['@youthfulhps/prettier-plugin-tailwindcss-normalizer'],
+  plugins: ["@youthfulhps/prettier-plugin-tailwindcss-normalizer"],
 };
 ```
 
@@ -59,15 +59,39 @@ 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`.
+
+### Installation
+
+```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:
+
+```javascript
+module.exports = {
+  plugins: [
+    "@youthfulhps/prettier-plugin-tailwindcss-normalizer",
+    "prettier-plugin-tailwindcss",
+    "prettier-plugin-merge",
+  ],
+};
+```
+
+> **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
 
 ### Before
 
 ```jsx
 <div className="p-[16px] m-[8px] bg-blue-500">
-  <span className="px-[24px] py-[12px] rounded-[6px]">
-    Button
-  </span>
+  <span className="px-[24px] py-[12px] rounded-[6px]">Button</span>
 </div>
 ```
 
@@ -75,9 +99,7 @@ npx prettier --write src/**/*.{tsx,jsx,html,vue}
 
 ```jsx
 <div className="p-4 m-2 bg-blue-500">
-  <span className="px-6 py-3 rounded-md">
-    Button
-  </span>
+  <span className="px-6 py-3 rounded-md">Button</span>
 </div>
 ```
 
@@ -131,8 +153,74 @@ The plugin is designed to be safe and only transforms class-related attributes:
 
 ## 🔧 Configuration
 
+### Basic Configuration
+
 The plugin works out of the box with default settings. No additional configuration is required.
 
+### 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.
+
+**`.prettierrc.js`**
+
+```javascript
+module.exports = {
+  plugins: ["@youthfulhps/prettier-plugin-tailwindcss-normalizer"],
+  customSpacingUnit: 8, // Change to match your Tailwind spacing scale
+};
+```
+
+**`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`**
+
+```jsx
+// Before
+<div className="p-[8px] m-[16px] gap-[24px]">Content</div>
+
+// After (with customSpacingUnit: 8)
+<div className="p-1 m-2 gap-3">Content</div>
+```
+
+**Example with default `customSpacingUnit: 4`**
+
+```jsx
+// Before
+<div className="p-[4px] m-[8px] gap-[12px]">Content</div>
+
+// After (with customSpacingUnit: 4)
+<div className="p-1 m-2 gap-3">Content</div>
+```
+
+See the [examples/custom-spacing](./examples/custom-spacing) directory for a complete working example.
+
 > **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

package/dist/index.d.ts

@@ -1,3 +1,7 @@
-import { CompatPlugin } from "./types/prettier-compat";
-declare const plugin: CompatPlugin;
-export default plugin;
+import { CompatParser } from "./types/prettier-compat";
+declare const parsers: Record<string, CompatParser>, languages: {
+    name: string;
+    parsers: string[];
+    extensions: string[];
+}[] | 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.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,
-        astFormat: parserName,
         preprocess: (text, options) => {
+            const pluginOptions = {
+                customSpacingUnit: options.customSpacingUnit,
+            };
+            (0, normalizer_1.setPluginOptions)(pluginOptions);
             return (0, ast_transformer_1.transformByFileType)(text, options.filepath || `file.${fileType}`);
         },
     };
@@ -36,46 +41,42 @@ const plugin = {
         },
         {
             name: "TypeScript",
-            parsers: ["babel-ts"],
+            parsers: ["typescript"],
             extensions: [".ts", ".tsx"],
         },
     ],
     parsers: {
-        html: createParser("html", "html"),
-        vue: createParser("html", "vue"),
-        angular: createParser("angular", "html"),
+        html: {
+            ...createParser("html", "html"),
+            astFormat: "html",
+        },
+        vue: {
+            ...createParser("html", "vue"),
+            astFormat: "vue",
+        },
+        angular: {
+            ...createParser("angular", "html"),
+            astFormat: "html",
+        },
         babel: {
-            ...createParser("babel", "jsx"),
-            parse: (text, options) => {
-                const filepath = options.filepath || "";
-                if (filepath.endsWith(".jsx") || filepath.endsWith(".tsx")) {
-                    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;
-                }
-                const baseParser = (0, version_utils_1.safeLoadParser)("babel");
-                return baseParser.parse ? baseParser.parse(text, options) : text;
-            },
+            ...createParser("babel", "babel"),
+            astFormat: "estree",
         },
-        "babel-ts": {
-            ...createParser("babel", "tsx"),
-            parse: (text, options) => {
-                const filepath = options.filepath || "";
-                if (filepath.endsWith(".tsx")) {
-                    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;
-                }
-                const baseParser = (0, version_utils_1.safeLoadParser)("babel", "babel-ts");
-                return baseParser.parse ? baseParser.parse(text, options) : text;
-            },
+        typescript: {
+            ...createParser("typescript", "typescript"),
+            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.",
         },
     },
-    printers: {},
 };
-module.exports = plugin;
-exports.default = 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;
@@ -115,7 +130,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.9",
+  "version": "0.4.1",
   "description": "A Prettier plugin that normalizes Tailwind CSS arbitrary values into standard utility classes.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",