@youthfulhps/prettier-plugin-tailwindcss-normalizer 0.3.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 prettier-plugin-tailwindcss-normalizer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# prettier-plugin-tailwindcss-normalizer
+
+A Prettier plugin that normalizes Tailwind CSS arbitrary values into standard utility classes.

package/dist/ast-transformer.d.ts

@@ -0,0 +1,4 @@
+export declare function transformJSXAST(code: string): string;
+export declare function transformHTMLAST(code: string): string;
+export declare function transformVueTemplate(code: string): string;
+export declare function transformByFileType(code: string, filepath?: string): string;

package/dist/ast-transformer.js

@@ -0,0 +1,180 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformJSXAST = transformJSXAST;
+exports.transformHTMLAST = transformHTMLAST;
+exports.transformVueTemplate = transformVueTemplate;
+exports.transformByFileType = transformByFileType;
+const parser_1 = require("@babel/parser");
+const traverse_1 = __importDefault(require("@babel/traverse"));
+const generator_1 = __importDefault(require("@babel/generator"));
+const normalizer_1 = require("./normalizer");
+function transformJSXAST(code) {
+    try {
+        const ast = (0, parser_1.parse)(code, {
+            sourceType: "module",
+            plugins: [
+                "jsx",
+                "typescript",
+                "decorators-legacy",
+                "classProperties",
+                "objectRestSpread",
+            ],
+        });
+        const supportedAttributes = ["className"];
+        const supportedFunctions = ["clsx", "classnames", "cn"];
+        (0, traverse_1.default)(ast, {
+            JSXAttribute(path) {
+                const attributeName = path.node.name;
+                if (attributeName.type === "JSXIdentifier" &&
+                    supportedAttributes.includes(attributeName.name)) {
+                    const value = path.node.value;
+                    if (value && value.type === "StringLiteral") {
+                        value.value = (0, normalizer_1.normalizeClassNames)(value.value);
+                    }
+                    else if (value &&
+                        value.type === "JSXExpressionContainer" &&
+                        value.expression.type === "StringLiteral") {
+                        value.expression.value = (0, normalizer_1.normalizeClassNames)(value.expression.value);
+                    }
+                    else if (value &&
+                        value.type === "JSXExpressionContainer" &&
+                        value.expression.type === "TemplateLiteral") {
+                        value.expression.quasis.forEach((quasi) => {
+                            if (quasi.value.raw) {
+                                const normalized = normalizeClassNamesInTemplateLiteral(quasi.value.raw);
+                                quasi.value.raw = normalized;
+                                quasi.value.cooked = normalized;
+                            }
+                        });
+                    }
+                }
+            },
+            CallExpression(path) {
+                const callee = path.node.callee;
+                if (callee.type === "Identifier" &&
+                    supportedFunctions.includes(callee.name)) {
+                    path.node.arguments.forEach((arg) => {
+                        if (arg.type === "StringLiteral") {
+                            arg.value = (0, normalizer_1.normalizeClassNames)(arg.value);
+                        }
+                    });
+                }
+            },
+            StringLiteral(path) {
+                if (path.parent?.type === "JSXAttribute") {
+                    return;
+                }
+                if (path.parent?.type === "CallExpression" &&
+                    path.parent.callee?.type === "Identifier" &&
+                    supportedFunctions.includes(path.parent.callee.name)) {
+                    return;
+                }
+                if (isTailwindClassString(path.node.value)) {
+                    path.node.value = (0, normalizer_1.normalizeClassNames)(path.node.value);
+                }
+            },
+        });
+        return (0, generator_1.default)(ast, {
+            retainLines: true,
+            compact: false,
+        }).code;
+    }
+    catch (error) {
+        return code;
+    }
+}
+function transformHTMLAST(code) {
+    try {
+        const supportedAttributes = ["class"];
+        let result = code;
+        supportedAttributes.forEach((attr) => {
+            const regex = new RegExp(`(<[^>]+\\s)(${attr}\\s*=\\s*)(["'])([^"']*?)\\3`, "g");
+            result = result.replace(regex, (match, tagStart, attrName, quote, classValue) => {
+                const normalized = (0, normalizer_1.normalizeClassNames)(classValue);
+                return `${tagStart}${attrName}${quote}${normalized}${quote}`;
+            });
+        });
+        return result;
+    }
+    catch (error) {
+        return code;
+    }
+}
+function transformVueTemplate(code) {
+    try {
+        let result = code;
+        result = result.replace(/(:class|v-bind:class)\s*=\s*(["'])(.*?)\2/g, (match, attrName, outerQuote, content) => {
+            const innerQuoteMatch = content.match(/^(['"])(.*?)\1$/);
+            if (innerQuoteMatch) {
+                const [, innerQuote, innerClasses] = innerQuoteMatch;
+                const normalized = (0, normalizer_1.normalizeClassNames)(innerClasses);
+                return `${attrName}=${outerQuote}${innerQuote}${normalized}${innerQuote}${outerQuote}`;
+            }
+            else {
+                const normalized = (0, normalizer_1.normalizeClassNames)(content);
+                return `${attrName}=${outerQuote}${normalized}${outerQuote}`;
+            }
+        });
+        result = result.replace(/\bclass\s*=\s*(["'])([^"']*?)\1/g, (match, quote, classValue) => {
+            const normalized = (0, normalizer_1.normalizeClassNames)(classValue);
+            return `class=${quote}${normalized}${quote}`;
+        });
+        return result;
+    }
+    catch (error) {
+        return code;
+    }
+}
+function isTailwindClassString(str) {
+    if (!str || str.length < 3)
+        return false;
+    const hasArbitraryValues = /[a-z:-]+\[[^\]]+\]/.test(str);
+    if (!hasArbitraryValues)
+        return false;
+    const hasSpaces = str.includes(" ");
+    const isUrl = str.includes("://") || str.includes(".com") || str.includes(".org");
+    const hasCommonWords = /\b(the|and|is|are|in|on|at|to|for|of|with|by)\b/i.test(str);
+    const hasNumbers = /^\d+$/.test(str.trim());
+    if (isUrl || hasCommonWords || hasNumbers)
+        return false;
+    if (hasSpaces) {
+        const parts = str.trim().split(/\s+/);
+        const classLikeParts = parts.filter((part) => /^[a-z][a-z0-9-]*(:?[a-z][a-z0-9-]*)*(\[[^\]]+\])?$/.test(part));
+        return classLikeParts.length >= Math.ceil(parts.length / 2);
+    }
+    return /^[a-z][a-z0-9-]*(:?[a-z][a-z0-9-]*)*(\[[^\]]+\])+$/.test(str);
+}
+function normalizeClassNamesInTemplateLiteral(rawString) {
+    const interpolations = [];
+    const withPlaceholders = rawString.replace(/\$\{[^}]*\}/g, (match) => {
+        const placeholder = `__INTERPOLATION_${interpolations.length}__`;
+        interpolations.push(match);
+        return placeholder;
+    });
+    const normalized = (0, normalizer_1.normalizeClassNames)(withPlaceholders);
+    return interpolations.reduce((result, interpolation, index) => {
+        return result.replace(`__INTERPOLATION_${index}__`, interpolation);
+    }, normalized);
+}
+function transformByFileType(code, filepath) {
+    if (!filepath) {
+        return code;
+    }
+    const extension = filepath.split(".").pop()?.toLowerCase();
+    switch (extension) {
+        case "jsx":
+        case "tsx":
+            return transformJSXAST(code);
+        case "html":
+            return transformHTMLAST(code);
+        case "vue":
+            return code.replace(/(<template[^>]*>)([\s\S]*?)(<\/template>)/g, (match, openTag, content, closeTag) => {
+                return openTag + transformVueTemplate(content) + closeTag;
+            });
+        default:
+            return code;
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { CompatPlugin } from "./types/prettier-compat";
+declare const plugin: CompatPlugin;
+export default plugin;

package/dist/index.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ast_transformer_1 = require("./ast-transformer");
+const version_utils_1 = require("./utils/version-utils");
+const plugin = {
+    languages: [
+        {
+            name: "HTML",
+            parsers: ["html"],
+            extensions: [".html"],
+        },
+        {
+            name: "Vue",
+            parsers: ["vue"],
+            extensions: [".vue"],
+        },
+        {
+            name: "Angular",
+            parsers: ["angular"],
+            extensions: [".component.html"],
+        },
+        {
+            name: "JavaScript",
+            parsers: ["babel"],
+            extensions: [".js", ".jsx"],
+        },
+        {
+            name: "TypeScript",
+            parsers: ["babel-ts"],
+            extensions: [".ts", ".tsx"],
+        },
+    ],
+    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");
+            },
+        },
+        babel: {
+            ...(0, version_utils_1.safeLoadParser)("babel"),
+            preprocess: (text, options) => {
+                const filepath = options.filepath || "";
+                if (filepath.endsWith(".jsx") || filepath.endsWith(".tsx")) {
+                    return (0, ast_transformer_1.transformByFileType)(text, filepath);
+                }
+                return text;
+            },
+        },
+        "babel-ts": {
+            ...(0, version_utils_1.safeLoadParser)("babel", "babel-ts"),
+            preprocess: (text, options) => {
+                const filepath = options.filepath || "";
+                if (filepath.endsWith(".tsx")) {
+                    return (0, ast_transformer_1.transformByFileType)(text, filepath);
+                }
+                return text;
+            },
+        },
+    },
+};
+module.exports = plugin;
+exports.default = plugin;

package/dist/mappings/effects/index.d.ts

@@ -0,0 +1,2 @@
+import { TailwindMapping } from "../../types";
+export declare const allEffectsMappings: TailwindMapping;

package/dist/mappings/effects/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.allEffectsMappings = void 0;
+const shadows_opacity_1 = require("./shadows-opacity");
+exports.allEffectsMappings = {
+    ...shadows_opacity_1.effectsMappings,
+};

package/dist/mappings/effects/shadows-opacity.d.ts

@@ -0,0 +1,2 @@
+import { ValueMapping } from "../../types";
+export declare const effectsMappings: Record<string, ValueMapping>;

package/dist/mappings/effects/shadows-opacity.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.effectsMappings = void 0;
+exports.effectsMappings = {
+    shadow: {
+        "0 1px 2px 0 rgb(0 0 0 / 0.05)": "shadow-sm",
+        "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)": "shadow",
+        "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)": "shadow-md",
+        "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)": "shadow-lg",
+        "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)": "shadow-xl",
+        "0 25px 50px -12px rgb(0 0 0 / 0.25)": "shadow-2xl",
+        "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)": "shadow-inner",
+        none: "shadow-none",
+    },
+    opacity: {
+        "0": "opacity-0",
+        "0.05": "opacity-5",
+        "0.1": "opacity-10",
+        "0.15": "opacity-15",
+        "0.2": "opacity-20",
+        "0.25": "opacity-25",
+        "0.3": "opacity-30",
+        "0.4": "opacity-40",
+        "0.5": "opacity-50",
+        "0.6": "opacity-60",
+        "0.7": "opacity-70",
+        "0.75": "opacity-75",
+        "0.8": "opacity-80",
+        "0.9": "opacity-90",
+        "0.95": "opacity-95",
+        "1": "opacity-100",
+    },
+};

package/dist/mappings/filters/blur-effects.d.ts

@@ -0,0 +1,2 @@
+import { ValueMapping } from "../../types";
+export declare const filtersMappings: Record<string, ValueMapping>;

package/dist/mappings/filters/blur-effects.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filtersMappings = void 0;
+exports.filtersMappings = {
+    blur: {
+        "0": "blur-none",
+        "4px": "blur-sm",
+        "8px": "blur",
+        "12px": "blur-md",
+        "16px": "blur-lg",
+        "24px": "blur-xl",
+        "40px": "blur-2xl",
+        "64px": "blur-3xl",
+    },
+    brightness: {
+        "0": "brightness-0",
+        "0.5": "brightness-50",
+        "0.75": "brightness-75",
+        "0.9": "brightness-90",
+        "0.95": "brightness-95",
+        "1": "brightness-100",
+        "1.05": "brightness-105",
+        "1.1": "brightness-110",
+        "1.25": "brightness-125",
+        "1.5": "brightness-150",
+        "2": "brightness-200",
+    },
+    contrast: {
+        "0": "contrast-0",
+        "0.5": "contrast-50",
+        "0.75": "contrast-75",
+        "1": "contrast-100",
+        "1.25": "contrast-125",
+        "1.5": "contrast-150",
+        "2": "contrast-200",
+    },
+    grayscale: {
+        "0": "grayscale-0",
+        "1": "grayscale",
+    },
+    invert: {
+        "0": "invert-0",
+        "1": "invert",
+    },
+    saturate: {
+        "0": "saturate-0",
+        "0.5": "saturate-50",
+        "1": "saturate-100",
+        "1.5": "saturate-150",
+        "2": "saturate-200",
+    },
+    sepia: {
+        "0": "sepia-0",
+        "1": "sepia",
+    },
+    "hue-rotate": {
+        "0deg": "hue-rotate-0",
+        "15deg": "hue-rotate-15",
+        "30deg": "hue-rotate-30",
+        "60deg": "hue-rotate-60",
+        "90deg": "hue-rotate-90",
+        "180deg": "hue-rotate-180",
+    },
+    "backdrop-blur": {
+        "0": "backdrop-blur-none",
+        "4px": "backdrop-blur-sm",
+        "8px": "backdrop-blur",
+        "12px": "backdrop-blur-md",
+        "16px": "backdrop-blur-lg",
+        "24px": "backdrop-blur-xl",
+        "40px": "backdrop-blur-2xl",
+        "64px": "backdrop-blur-3xl",
+    },
+    "backdrop-brightness": {
+        "0": "backdrop-brightness-0",
+        "0.5": "backdrop-brightness-50",
+        "0.75": "backdrop-brightness-75",
+        "0.9": "backdrop-brightness-90",
+        "0.95": "backdrop-brightness-95",
+        "1": "backdrop-brightness-100",
+        "1.05": "backdrop-brightness-105",
+        "1.1": "backdrop-brightness-110",
+        "1.25": "backdrop-brightness-125",
+        "1.5": "backdrop-brightness-150",
+        "2": "backdrop-brightness-200",
+    },
+    "backdrop-contrast": {
+        "0": "backdrop-contrast-0",
+        "0.5": "backdrop-contrast-50",
+        "0.75": "backdrop-contrast-75",
+        "1": "backdrop-contrast-100",
+        "1.25": "backdrop-contrast-125",
+        "1.5": "backdrop-contrast-150",
+        "2": "backdrop-contrast-200",
+    },
+    "backdrop-grayscale": {
+        "0": "backdrop-grayscale-0",
+        "1": "backdrop-grayscale",
+    },
+    "backdrop-hue-rotate": {
+        "0deg": "backdrop-hue-rotate-0",
+        "15deg": "backdrop-hue-rotate-15",
+        "30deg": "backdrop-hue-rotate-30",
+        "60deg": "backdrop-hue-rotate-60",
+        "90deg": "backdrop-hue-rotate-90",
+        "180deg": "backdrop-hue-rotate-180",
+    },
+    "backdrop-invert": {
+        "0": "backdrop-invert-0",
+        "1": "backdrop-invert",
+    },
+    "backdrop-opacity": {
+        "0": "backdrop-opacity-0",
+        "0.05": "backdrop-opacity-5",
+        "0.1": "backdrop-opacity-10",
+        "0.15": "backdrop-opacity-15",
+        "0.2": "backdrop-opacity-20",
+        "0.25": "backdrop-opacity-25",
+        "0.3": "backdrop-opacity-30",
+        "0.4": "backdrop-opacity-40",
+        "0.5": "backdrop-opacity-50",
+        "0.6": "backdrop-opacity-60",
+        "0.7": "backdrop-opacity-70",
+        "0.75": "backdrop-opacity-75",
+        "0.8": "backdrop-opacity-80",
+        "0.9": "backdrop-opacity-90",
+        "0.95": "backdrop-opacity-95",
+        "1": "backdrop-opacity-100",
+    },
+    "backdrop-saturate": {
+        "0": "backdrop-saturate-0",
+        "0.5": "backdrop-saturate-50",
+        "1": "backdrop-saturate-100",
+        "1.5": "backdrop-saturate-150",
+        "2": "backdrop-saturate-200",
+    },
+    "backdrop-sepia": {
+        "0": "backdrop-sepia-0",
+        "1": "backdrop-sepia",
+    },
+};

package/dist/mappings/filters/index.d.ts

@@ -0,0 +1,2 @@
+import { TailwindMapping } from "../../types";
+export declare const allFiltersMappings: TailwindMapping;

package/dist/mappings/filters/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.allFiltersMappings = void 0;
+const blur_effects_1 = require("./blur-effects");
+exports.allFiltersMappings = {
+    ...blur_effects_1.filtersMappings,
+};

package/dist/mappings/index.d.ts

@@ -0,0 +1,2 @@
+import { TailwindMapping } from "../types";
+export declare const TAILWIND_MAPPINGS: TailwindMapping;

package/dist/mappings/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TAILWIND_MAPPINGS = void 0;
+const spacing_1 = require("./spacing");
+const sizing_1 = require("./sizing");
+const layout_1 = require("./layout");
+const typography_1 = require("./typography");
+const effects_1 = require("./effects");
+const transitions_1 = require("./transitions");
+const interactivity_1 = require("./interactivity");
+const transforms_1 = require("./transforms");
+const filters_1 = require("./filters");
+exports.TAILWIND_MAPPINGS = {
+    ...spacing_1.spacingMappings,
+    ...sizing_1.sizingMappings,
+    ...layout_1.layoutMappings,
+    ...typography_1.typographyMappings,
+    ...effects_1.allEffectsMappings,
+    ...transitions_1.allTransitionsMappings,
+    ...interactivity_1.allInteractivityMappings,
+    ...transforms_1.allTransformsMappings,
+    ...filters_1.allFiltersMappings,
+};

package/dist/mappings/interactivity/index.d.ts

@@ -0,0 +1,2 @@
+import { TailwindMapping } from "../../types";
+export declare const allInteractivityMappings: TailwindMapping;

package/dist/mappings/interactivity/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.allInteractivityMappings = void 0;
+const outline_ring_scroll_1 = require("./outline-ring-scroll");
+exports.allInteractivityMappings = {
+    ...outline_ring_scroll_1.interactivityMappings,
+};

package/dist/mappings/interactivity/outline-ring-scroll.d.ts

@@ -0,0 +1,2 @@
+import { ValueMapping } from "../../types";
+export declare const interactivityMappings: Record<string, ValueMapping>;

package/dist/mappings/interactivity/outline-ring-scroll.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interactivityMappings = void 0;
+exports.interactivityMappings = {
+    outline: {
+        "0px": "outline-0",
+        "1px": "outline-1",
+        "2px": "outline-2",
+        "4px": "outline-4",
+        "8px": "outline-8",
+    },
+    "outline-offset": {
+        "0px": "outline-offset-0",
+        "1px": "outline-offset-1",
+        "2px": "outline-offset-2",
+        "4px": "outline-offset-4",
+        "8px": "outline-offset-8",
+    },
+    ring: {
+        "0px": "ring-0",
+        "1px": "ring-1",
+        "2px": "ring-2",
+        "4px": "ring-4",
+        "8px": "ring-8",
+        inset: "ring-inset",
+    },
+    "ring-offset": {
+        "0px": "ring-offset-0",
+        "1px": "ring-offset-1",
+        "2px": "ring-offset-2",
+        "4px": "ring-offset-4",
+        "8px": "ring-offset-8",
+    },
+    "scroll-m": {
+        "0px": "scroll-m-0",
+        "1px": "scroll-m-px",
+        "4px": "scroll-m-1",
+        "8px": "scroll-m-2",
+        "12px": "scroll-m-3",
+        "16px": "scroll-m-4",
+        "20px": "scroll-m-5",
+        "24px": "scroll-m-6",
+    },
+    "scroll-p": {
+        "0px": "scroll-p-0",
+        "1px": "scroll-p-px",
+        "4px": "scroll-p-1",
+        "8px": "scroll-p-2",
+        "12px": "scroll-p-3",
+        "16px": "scroll-p-4",
+        "20px": "scroll-p-5",
+        "24px": "scroll-p-6",
+    },
+    "focus:ring": {
+        "0px": "focus:ring-0",
+        "1px": "focus:ring-1",
+        "2px": "focus:ring-2",
+        "4px": "focus:ring-4",
+        "8px": "focus:ring-8",
+    },
+    "focus:ring-offset": {
+        "0px": "focus:ring-offset-0",
+        "1px": "focus:ring-offset-1",
+        "2px": "focus:ring-offset-2",
+        "4px": "focus:ring-offset-4",
+        "8px": "focus:ring-offset-8",
+    },
+};

package/dist/mappings/layout/borders-rounded.d.ts

@@ -0,0 +1,2 @@
+import { ValueMapping } from "../../types";
+export declare const bordersRoundedMappings: Record<string, ValueMapping>;