tailwind-class-cleaner 0.1.0

package/README.md

@@ -0,0 +1,108 @@
+# Tailwind Class Cleaner
+
+Automatically detect and fix conflicting Tailwind CSS classes.
+
+Works in two ways:
+
+* 🔍 ESLint → detect + auto-fix while coding
+* ⚡ Babel → optimize during build
+
+---
+
+## 🚀 Installation
+
+```bash
+npm install tailwind-class-cleaner
+```
+
+---
+
+## 🧠 What It Does
+
+Fixes class conflicts like:
+
+```jsx
+<div className="p-2 p-4 text-sm text-lg bg-red-500 bg-blue-500" />
+```
+
+➡️ Becomes:
+
+```jsx
+<div className="p-4 text-lg bg-blue-500" />
+```
+
+---
+
+## 🔍 ESLint Usage (Recommended)
+
+### 1. Add plugin
+
+In your `.eslintrc.json`:
+
+```json
+{
+  "plugins": ["tailwind-cleaner"],
+  "rules": {
+    "tailwind-cleaner/no-conflicts": "warn"
+  }
+}
+```
+
+---
+
+### 2. Run ESLint
+
+```bash
+npx eslint . --fix
+```
+
+---
+
+### 💡 Result
+
+* Shows warnings in editor
+* Auto-fixes on save / fix
+
+---
+
+## ⚡ Babel Usage (Build-time Optimization)
+
+Add to your Babel config:
+
+```json
+{
+  "plugins": ["tailwind-class-cleaner/babel"]
+}
+```
+
+---
+
+## ⚠️ Limitations (v1)
+
+* Only supports static strings:
+
+```jsx
+className="p-2 p-4"
+```
+
+* Does NOT yet support:
+
+  * template literals
+  * classnames()
+  * conditional classes
+
+---
+
+## 🔭 Roadmap
+
+* Support for template literals
+* px vs p conflict handling
+* Tailwind config awareness
+* Vite plugin
+
+---
+
+## 📄 License
+
+MIT
+"# Tailwind-class-conflict-cleaner" 

package/babel/index.js

@@ -0,0 +1,24 @@
+import parse from "../core/parser.js";
+import resolve from "../core/resolver.js";
+
+export default function () {
+  return {
+    visitor: {
+      JSXAttribute(path) {
+        if (path.node.name.name !== "className") return;
+
+        const valueNode = path.node.value;
+
+        if (!valueNode || valueNode.type !== "StringLiteral") return;
+
+        const original = valueNode.value;
+
+        const newClass = resolve(parse(original)).join(" ");
+
+        if (newClass !== original) {
+          path.node.value.value = newClass;
+        }
+      }
+    }
+  };
+}

package/core/groups.js

@@ -0,0 +1,8 @@
+export const groups = {
+
+  padding: ["p", "px", "py", "pt", "pb", "pl", "pr"],
+
+  margin: ["m", "mx", "my", "mt", "mb", "ml", "mr"],
+  text: ["text"],
+  bg: ["bg"],
+};

package/core/parser.js

@@ -0,0 +1,5 @@
+export default function parse(classString) {
+  if (!classString || typeof classString !== "string") return [];
+
+  return classString.trim().split(/\s+/).filter(Boolean);
+}

package/core/resolver.js

@@ -0,0 +1,48 @@
+import { groups } from "./groups.js";
+
+export default function resolve(classList) {
+  const finalClasses = [];
+
+  for (const cls of classList) {
+    const prefix = getPrefix(cls);
+
+    const groupKey = findGroup(prefix);
+
+    if (!groupKey) {
+      finalClasses.push(cls);
+      continue;
+    }
+    removeSamePrefix(finalClasses, prefix);
+
+    finalClasses.push(cls);
+  }
+
+  return finalClasses;
+}
+
+
+//get prefix: p-4 → p, px-2 → px
+function getPrefix(cls) {
+  return cls.split("-")[0];
+}
+
+
+//find group (padding, margin, etc.)
+function findGroup(prefix) {
+  for (const key in groups) {
+    if (groups[key].includes(prefix)) {
+      return key;
+    }
+  }
+  return null;
+}
+
+
+//remove only exact prefix conflicts
+function removeSamePrefix(arr, prefix) {
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (getPrefix(arr[i]) === prefix) {
+      arr.splice(i, 1);
+    }
+  }
+}

package/eslint/index.js

@@ -0,0 +1,7 @@
+import noConflicts from "./rules/no-conflict.js";
+
+export default {
+  rules: {
+    "no-conflicts": noConflicts,
+  },
+};

package/eslint/rules/no-conflict.js

@@ -0,0 +1,84 @@
+import parse from "../../core/parser.js";
+import resolve from "../../core/resolver.js";
+
+export default {
+  meta: {
+    type: "problem",
+    fixable: "code",
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name !== "className") return;
+
+        const value = node.value;
+
+        if (value?.type === "Literal" && typeof value.value === "string") {
+          handleString(context, node, value.value);
+        }
+
+        if (value?.type === "JSXExpressionContainer" &&
+            value.expression.type === "TemplateLiteral") {
+          handleTemplate(context, node, value.expression);
+        }
+      },
+    };
+  },
+};
+
+
+function handleString(context, node, original) {
+  const newClass = resolve(parse(original)).join(" ");
+
+  if (newClass === original) return;
+
+  context.report({
+    node,
+    message: `Tailwind conflict: "${original}" → "${newClass}"`,
+    fix(fixer) {
+      return fixer.replaceText(node.value, `"${newClass}"`);
+    },
+  });
+}
+
+
+function handleTemplate(context, node, template) {
+  const quasis = template.quasis;
+
+  let changed = false;
+
+  const newQuasis = quasis.map((q) => {
+    const original = q.value.raw;
+
+    const resolved = resolve(parse(original)).join(" ");
+
+    if (resolved !== original) {
+      changed = true;
+    }
+
+    return resolved;
+  });
+
+  if (!changed) return;
+
+  context.report({
+    node,
+    message: "Tailwind conflicts in template literal",
+    fix(fixer) {
+      let result = "`";
+
+      for (let i = 0; i < newQuasis.length; i++) {
+        result += newQuasis[i];
+
+        if (template.expressions[i]) {
+          result += "${" + context.sourceCode.getText(template.expressions[i]) + "}";
+        }
+      }
+
+      result += "`";
+
+      return fixer.replaceText(node.value, `{${result}}`);
+    },
+  });
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "tailwind-class-cleaner",
+  "version": "0.1.0",
+  "type": "module",
+
+  "main": "eslint/index.js",
+
+  "exports": {
+    ".": "./eslint/index.js",
+    "./babel": "./babel/index.js"
+  },
+
+  "files": [
+    "eslint",
+    "babel",
+    "core"
+  ],
+
+  "peerDependencies": {
+    "eslint": ">=8.0.0",
+    "@babel/core": "^7.0.0"
+  }
+}