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

package/README.md

@@ -153,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

@@ -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;
@@ -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.10",
+  "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",