@aacn_org/eslint-plugin-tailwind-classname-order - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

lib/rules/order.js

@@ -13,3 +13,4 @@ "use strict";
                 }
-                const classNames = Array.from(node.value.value.split(" "));
+                let classNames = Array.from(node.value.value.split(" "));
+                classNames = sanitizeNode(classNames);
                 const sortedClassNames = Array.from(classNames).sort((a, b) => {
@@ -28,3 +29,3 @@ const aPrio = getClassPriority(a);
                     context.report({
-                        message: "tailwind class names are not in correctly defined order.",
+                        message: "Tailwind classes aren't correctly ordered",
                         node,
@@ -133,2 +134,17 @@ fix: fixer => {
 /**
+ * Removes empty-string array slots and possible linebreaks
+ * @param classArr raw className array from node
+ * @return formatted array of classNames
+ */
+function sanitizeNode(classArr) {
+    classArr = classArr
+        .filter((elem) => {
+        return elem !== "";
+    })
+        .map((elem) => {
+        return elem.replace(/\r?\n|\r/g, '');
+    });
+    return classArr;
+}
+/**
  * some classNames could contain arbitrary values that include ":" or "-", which could break the plugin.
@@ -135,0 +151,0 @@ * Therefor they'll be removed as they're not necessary for the plugin anyway

package.json

 {
   "name": "@aacn_org/eslint-plugin-tailwind-classname-order",
-  "version": "0.2.5",
-  "description": "Sort tailwind classes for each elements className list by a given order-config",
+  "version": "0.2.6",
+  "description": "Automatically order tailwind classes included in the className tags from each element by the provided default order list.",
   "license": "MIT",
@@ -26,8 +26,13 @@ "repository": {
   "author": "AACN Software- und Systementwicklung GmbH <[e-mail]> (https://aacn.eu)",
-  "contributors": ["Marlon Kerth <[e-mail]> (https://aacn.eu)"],
+  "contributors": [
+    "Marlon Kerth <[e-mail]> (https://aacn.eu)"
+  ],
   "main": "lib/index.js",
   "scripts": {
     "lint": "eslint .",
+    "lintt": "rimraf lib && tsc && eslint tests/* --fix",
     "build": "tsc",
-    "test": "jest"
+    "clean-build": "rimraf lib && tsc",
+    "test": "jest",
+    "prepare": "husky install"
   },
@@ -43,5 +48,6 @@ "devDependencies": {
     "eslint-plugin-rulesdir": "^0.2.1",
+    "husky": "^8.0.1",
     "jest": "^29.0.1",
-    "mocha": "^10.0.0",
     "prettier": "2.7.1",
+    "rimraf": "^3.0.2",
     "ts-jest": "^28.0.8",
@@ -48,0 +54,0 @@ "typescript": "4.1.3"

README.md

@@ -6,13 +6,15 @@ ![GitHub package.json version](https://img.shields.io/github/package-json/v/MarlonAACN/eslint-plugin-tailwind-classname-order?style=flat-square)
 
-Sort tailwind classes for each element className list by a given order-config.
+This eslint plugin automatically orders the tailwind classes included in the className tags from
+each element by the provided default order list.
 
 - [1. Features](#features)
-- [2. Currently supported tailwind classes](#currently-supported-tailwind-classes)
-- [3. Explicitly unsupported classes](#explicitly-unsupported-classes)
-- [4. Default order config](#default-order-config)
-- [5. Installation](#installation)
-- [6. Usage](#usage)
+- [2. Roadmap](#roadmap)
+- [3. Currently supported tailwind classes](#currently-supported-tailwind-classes)
+- [4. Explicitly unsupported classes](#explicitly-unsupported-classes)
+- [5. Default order config](#default-order-config)
+- [6. Installation](#installation)
+- [7. Usage](#usage)
 
 ## Features
-- [x] Order class names by config
+- [x] Order tailwind classes by given config
 - [x] Recognize predefined classes
@@ -23,5 +25,9 @@ - [x] Recognize negative valued class names
 - [x] Recognize mediaquerys
-- [ ] Remove 'img' slug restriction for bg-images, by reading tailwind-config file
-- [ ] Handle className objects that are not string typed
 
+## Roadmap
+1. Remove the 'img' slug restriction for bg-images and be more flexible with custom defined values
+in general, by reading the projects ```tailwind.config.js```.
+2. Include className objects that are not string typed instead of jsut ignoring them.
+3. Make custom ordering for the user more accessible and easier.
+
 ## Currently supported tailwind classes
@@ -49,2 +55,13 @@ For the latest version the following tailwind classes are supported by the order plugin.
 
+It's mentionable that in the current version it's necessary, that when setting an image as background, which is predefined
+in the tailwind config, that the name of the image needs to include 'img' in its name, so that the
+plugin is able to identity it as such.
+```sh
+# will be detected as bg-img element
+bg-MY-img-BACKGROUND
+
+# won't be detected as bg-img and instead be treated as bg-color
+bg-MY-BACKGROUND
+```
+
 ## Explicitly unsupported classes
@@ -284,3 +301,7 @@ Some classes in tailwind have counterparts with the same name and since interpreting arbitrary values
 ```sh
+# via npm
 npm install eslint --save-dev
+
+# via yarn
+yarn add -D eslint
 ```
@@ -291,18 +312,10 @@
 ```sh
+# via npm
 npm install @aacn_org/eslint-plugin-tailwind-classname-order --save-dev
-```
 
-<br/>
-
-#### With yarn
-```sh
-yarn add -D eslint
+# via yarn
+yarn add -D @aacn_org/eslint-plugin-tailwind-classname-order
 ```
 
-Next, install `eslint-plugin-tailwind-classname-order`:
 
-```sh
-yarn add -D @aacn_org/eslint-plugin-tailwind-classname-order
-```
-
 ## Usage
@@ -309,0 +322,0 @@

No alert changes

Improved metrics

Total package byte prevSize

44502

21.77%

Number of package files

16

33.33%

Lines of code

597

22.09%

Number of lines in readme file

342

3.95%

Worsened metrics

Dev dependency count

14

7.69%

No dependency changes