Add a means to ignore certain attributes when sorting

README.md

@@ -124,6 +124,36 @@ Read below for writing custom attribute orders and configurations ⤵️
 <div group-a group-b group-A group-B></div>
 ```
 
+---
+
+### Keep certain attributes in place
+
+You can prevent certain attributes from being moved altogether with `prettier-ignore-organize-attributes` comment:
+
+```json5
+// .prettierrc
+{
+  "plugins": ["prettier-plugin-organize-attributes"],
+  "attributeGroups": ["^a$", "^b$", "^c$", "^d$"]
+}
+```
+
+Input:
+
+```html
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+<div c="c" a1="1" d="d" a2="2" a="a" a3="3" b="b"></div>
+```
+
+*(Note that attributes should be space separated)*
+
+Output:
+
+```html
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+<div a="a" a1="1" b="b" a2="2" c="c" a3="3" d="d"></div>
+```
+
 ## Presets
 
 ### HTML

package.json

@@ -27,21 +27,21 @@
   "main": "lib/index",
   "types": "lib/index",
   "scripts": {
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" jest",
+    "test:watch": "npm run test -- --watch",
     "build": "tsc --pretty",
     "watch": "npm run build -- --watch",
-    "watch:test": "NODE_OPTIONS=--experimental-vm-modules jest --watch",
     "release:plugin": "npm run test && npm run build && npm publish",
     "release:plugin:local": "npm run test && npm run build && npm publish --registry=http://localhost:4873/"
   },
   "peerDependencies": {
     "prettier": "^3.0.0"
   },
-  "dependencies": {},
   "devDependencies": {
     "@types/jest": "29.1.1",
     "@types/node": "^14.14.2",
     "codecov": "^3.8.0",
+    "cross-env": "^7.0.3",
     "jest": "29.1.1",
     "prettier": "^3.0.0",
     "ts-jest": "29.1.1",

src/index.ts

@@ -50,6 +50,14 @@ function wrapParser(parser: Parser<any>): Parser<any> {
   };
 }
 
+function getPrettierIgnoreAttributeCommentData(value?: string) {
+  const match = value
+    ?.trim()
+    .match(/^prettier-ignore-organize-attributes\s+(.+)$/s);
+
+  return match?.[1].split(/\s+/) || [];
+}
+
 function transformPostParse(parse: Parser<any>["parse"]): Parser<any>["parse"] {
   return (text, options) =>
     transformRootNode(
@@ -89,7 +97,8 @@ function transformNode(
   node: HTMLNode,
   groups: string[],
   sort: OrganizeOptionsSort,
-  ignoreCase = true
+  ignoreCase = true,
+  ignoredAttributes?: string[],
 ): void {
   if (node.attrs) {
     node.attrs = miniorganize(node.attrs, {
@@ -98,12 +107,25 @@ function transformNode(
       groups,
       sort,
       map: ({ name }) => name,
+      ignoredAttributes,
     }).flat;
   }
 
-  node.children?.forEach((child) =>
-    transformNode(child, groups, sort, ignoreCase)
-  );
+  let foundIgnoredAttributes: string[] | undefined;
+  node.children?.forEach((child) => {
+    transformNode(child, groups, sort, ignoreCase, foundIgnoredAttributes);
+
+    if (child.type === "comment") {
+      const currentIgnoredAttributes = getPrettierIgnoreAttributeCommentData(
+        child.value,
+      );
+      if (currentIgnoredAttributes.length > 0) {
+        foundIgnoredAttributes = currentIgnoredAttributes;
+      }
+    } else if (!(child.type === "text" && (child.value || "").trim() === "")) {
+      foundIgnoredAttributes = undefined;
+    }
+  });
 }
 
 export type PrettierPluginOrganizeAttributesParserOptions = {

src/organize.ts

@@ -19,6 +19,7 @@ export interface BaseOrganizeOptions<TPresets extends Presets> {
   groups: GroupKey<TPresets>[];
   sort?: OrganizeOptionsSort;
   ignoreCase?: boolean;
+  ignoredAttributes?: string[];
 }
 
 export type OrganizeOptionsSort = "ASC" | "DESC" | boolean;
@@ -90,9 +91,16 @@ export function miniorganize<TValue>(
     }
   };
 
-  values.forEach((value) => {
+  const ignoredValuesInfo: { value: TValue; position: number }[] = [];
+
+  values.forEach((value, position) => {
     const mapped = getString(value);
 
+    if (options.ignoredAttributes?.includes(mapped)) {
+      ignoredValuesInfo.push({ value, position });
+      return;
+    }
+
     for (let group of groups) {
       if (group.regexp && mapped.match(group.regexp)) {
         group.values.push(value);
@@ -113,8 +121,26 @@ export function miniorganize<TValue>(
     });
   }
 
+  const nonIgnoredValues = groups.flatMap((group) => group.values);
+  const allValues: TValue[] = [];
+  for (
+    let i = 0, nonIgnoredValuesChecked = 0;
+    i < ignoredValuesInfo.length;
+    i++
+  ) {
+    const { value, position } = ignoredValuesInfo[i];
+    const nonIgnoredValuesToRemoveCount =
+      position - nonIgnoredValuesChecked - i;
+    allValues.push(
+      ...nonIgnoredValues.splice(0, nonIgnoredValuesToRemoveCount),
+      value,
+    );
+    nonIgnoredValuesChecked += nonIgnoredValuesToRemoveCount;
+  }
+  allValues.push(...nonIgnoredValues);
+
   return {
-    flat: groups.flatMap((group) => group.values),
+    flat: allValues,
     groups: groups.map(({ query, values }) => ({ query, values })),
   };
 }

src/tests/html/ignore-attribute-basic/config.json

@@ -0,0 +1 @@
+{"attributeGroups": ["^a$", "^b$", "^c$", "^d$"]}

src/tests/html/ignore-attribute-basic/expected.html

@@ -0,0 +1,2 @@
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+<div a="a" a1="1" b="b" a2="2" c="c" a3="3" d="d"></div>

src/tests/html/ignore-attribute-basic/input.html

@@ -0,0 +1,10 @@
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+<div
+  c="c"
+  a1="1"
+  d="d"
+  a2="2"
+  a="a"
+  a3="3"
+  b="b"
+></div>

src/tests/html/ignore-attribute-comment-between/config.json

@@ -0,0 +1 @@
+{"attributeGroups": ["^a$", "^b$", "^c$", "^d$"]}

src/tests/html/ignore-attribute-comment-between/expected.html

@@ -0,0 +1,3 @@
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+<!-- This comment should not affect the ignore directive -->
+<div a="a" a1="1" b="b" a2="2" c="c" a3="3" d="d"></div>

src/tests/html/ignore-attribute-comment-between/input.html

@@ -0,0 +1,11 @@
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+<!-- This comment should not affect the ignore directive -->
+<div
+  c="c"
+  a1="1"
+  d="d"
+  a2="2"
+  a="a"
+  a3="3"
+  b="b"
+></div>

src/tests/html/ignore-attribute-empty-lines-between/config.json

@@ -0,0 +1 @@
+{"attributeGroups": ["^a$", "^b$", "^c$", "^d$"]}

src/tests/html/ignore-attribute-empty-lines-between/expected.html

@@ -0,0 +1,3 @@
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+
+<div a="a" a1="1" b="b" a2="2" c="c" a3="3" d="d"></div>

src/tests/html/ignore-attribute-empty-lines-between/input.html

@@ -0,0 +1,15 @@
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+
+
+
+
+
+<div
+  c="c"
+  a1="1"
+  d="d"
+  a2="2"
+  a="a"
+  a3="3"
+  b="b"
+></div>

src/tests/html/ignore-attribute-multiple/config.json

@@ -0,0 +1 @@
+{"attributeGroups": ["^a$", "^b$", "^c$", "^d$"]}

src/tests/html/ignore-attribute-multiple/expected.html

@@ -0,0 +1,3 @@
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+<!-- prettier-ignore-organize-attributes c -->
+<div c="c" a="a" b="b" d="d" a1="1" a2="2" a3="3"></div>

src/tests/html/ignore-attribute-multiple/input.html

@@ -0,0 +1,11 @@
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+<!-- prettier-ignore-organize-attributes c -->
+<div
+  c="c"
+  a1="1"
+  d="d"
+  a2="2"
+  a="a"
+  a3="3"
+  b="b"
+></div>

src/tests/html/ignore-attribute-text-between/config.json

@@ -0,0 +1 @@
+{"attributeGroups": ["^a$", "^b$", "^c$", "^d$"]}

src/tests/html/ignore-attribute-text-between/expected.html

@@ -0,0 +1,3 @@
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+This text will negate the ignore directive
+<div a="a" b="b" c="c" d="d" a1="1" a2="2" a3="3"></div>

src/tests/html/ignore-attribute-text-between/input.html

@@ -0,0 +1,11 @@
+<!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+This text will negate the ignore directive
+<div
+  c="c"
+  a1="1"
+  d="d"
+  a2="2"
+  a="a"
+  a3="3"
+  b="b"
+></div>

src/tests/vue/ignore-attribute-basic/config.json

@@ -0,0 +1 @@
+{"attributeGroups": ["^a$", "^b$", "^c$", "^d$"]}

src/tests/vue/ignore-attribute-basic/expected.vue

@@ -0,0 +1,4 @@
+<template>
+  <!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+  <div a="a" a1="1" b="b" a2="2" c="c" a3="3" d="d"></div>
+</template>

src/tests/vue/ignore-attribute-basic/input.vue

@@ -0,0 +1,12 @@
+<template>
+  <!-- prettier-ignore-organize-attributes a1 a2 a3 -->
+  <div
+    c="c"
+    a1="1"
+    d="d"
+    a2="2"
+    a="a"
+    a3="3"
+    b="b"
+  ></div>
+</template>