prettier-plugin-bootstrap 0.1.2 → 0.2.0

package/README.md

@@ -2,11 +2,12 @@
 
 [![CI](https://github.com/pierluigilenoci/prettier-plugin-bootstrap/actions/workflows/ci.yml/badge.svg)](https://github.com/pierluigilenoci/prettier-plugin-bootstrap/actions/workflows/ci.yml)
 [![npm](https://img.shields.io/npm/v/prettier-plugin-bootstrap)](https://www.npmjs.com/package/prettier-plugin-bootstrap)
+[![codecov](https://codecov.io/gh/pierluigilenoci/prettier-plugin-bootstrap/branch/main/graph/badge.svg)](https://codecov.io/gh/pierluigilenoci/prettier-plugin-bootstrap)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 A [Prettier](https://prettier.io/) plugin that automatically sorts Bootstrap CSS classes following the framework's recommended order.
 
-Works with **HTML**, **JSX/TSX**, **Vue**, **Angular**, and **Astro** templates.
+Works with **HTML**, **JSX/TSX**, **Vue**, **Angular**, **Svelte**, and **Astro** templates.
 
 ## Installation
 
@@ -62,17 +63,18 @@ Unknown classes are preserved in their original relative order and placed after
 
 ## Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `bootstrapAttributes` | `string[]` | `[]` | Additional HTML attributes to sort (beyond `class` and `className`) |
-| `bootstrapFunctions` | `string[]` | `[]` | Function names whose arguments are class lists (e.g. `clsx`, `classNames`) |
+| Option                | Type       | Default | Description                                                                |
+| --------------------- | ---------- | ------- | -------------------------------------------------------------------------- |
+| `bootstrapAttributes` | `string[]` | `[]`    | Additional HTML attributes to sort (beyond `class` and `className`)        |
+| `bootstrapFunctions`  | `string[]` | `[]`    | Function names whose arguments are class lists (e.g. `clsx`, `classNames`) |
 
 ### Example
 
 ```json
 {
   "plugins": ["prettier-plugin-bootstrap"],
-  "bootstrapAttributes": ["ngClass", "v-bind:class"]
+  "bootstrapAttributes": ["ngClass", "v-bind:class"],
+  "bootstrapFunctions": ["clsx", "cn", "classNames"]
 }
 ```
 
@@ -83,8 +85,19 @@ Unknown classes are preserved in their original relative order and placed after
 - `angular` — Angular templates
 - `babel` / `babel-ts` / `typescript` — JSX/TSX files
 - `acorn` / `meriyah` — Alternative JS parsers
+- `svelte` — Svelte components (requires `prettier-plugin-svelte`)
 - `astro` — Astro components (requires `prettier-plugin-astro`)
 
+### Svelte
+
+When using with `prettier-plugin-svelte`, list `prettier-plugin-bootstrap` **after** `prettier-plugin-svelte` in your config:
+
+```json
+{
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-bootstrap"]
+}
+```
+
 ### Astro
 
 When using with `prettier-plugin-astro`, list `prettier-plugin-bootstrap` **after** `prettier-plugin-astro` in your config so it can wrap the Astro parser:

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+import { Options, Parser } from "prettier";
+
+//#region src/types.d.ts
+interface BootstrapPluginOptions extends Options {
+  bootstrapAttributes?: string[];
+  bootstrapFunctions?: string[];
+}
+type SortKey = [categoryIndex: number, breakpointIndex: number];
+//#endregion
+//#region src/class-order.d.ts
+declare const BREAKPOINTS: readonly ["sm", "md", "lg", "xl", "xxl"];
+declare const CLASS_ORDER: readonly string[];
+declare function classKey(className: string): SortKey;
+declare function sortClasses(classes: string[]): string[];
+//#endregion
+//#region src/index.d.ts
+declare const options: {
+  bootstrapAttributes: {
+    type: "string";
+    array: boolean;
+    default: {
+      value: never[];
+    }[];
+    category: string;
+    description: string;
+  };
+  bootstrapFunctions: {
+    type: "string";
+    array: boolean;
+    default: {
+      value: never[];
+    }[];
+    category: string;
+    description: string;
+  };
+};
+declare const parsers: Record<string, Partial<Parser>>;
+//#endregion
+export { BREAKPOINTS, type BootstrapPluginOptions, CLASS_ORDER, classKey, options, parsers, sortClasses };

package/dist/{index.js → index.mjs}

@@ -319,7 +319,35 @@ function walk(node, visitor) {
 		}
 	}
 }
-function processHtmlAst(ast, targetAttrs) {
+function sortStringNode(node) {
+	if (!node) return;
+	if (node.type === "StringLiteral") {
+		const sorted = sortClassString(node.value);
+		node.value = sorted;
+		if (node.extra) {
+			node.extra.rawValue = sorted;
+			node.extra.raw = `"${sorted}"`;
+		}
+		return;
+	}
+	if (node.type === "Literal" && typeof node.value === "string") {
+		const sorted = sortClassString(node.value);
+		node.value = sorted;
+		if (node.raw) {
+			const quote = node.raw[0];
+			node.raw = `${quote}${sorted}${quote}`;
+		}
+		return;
+	}
+	if (node.type === "TemplateLiteral" && (!node.expressions || node.expressions.length === 0)) {
+		for (const quasi of node.quasis) if (quasi.value && typeof quasi.value.raw === "string") {
+			const sorted = sortClassString(quasi.value.raw);
+			quasi.value.raw = sorted;
+			quasi.value.cooked = sorted;
+		}
+	}
+}
+function processHtmlAst(ast, targetAttrs, _targetFunctions) {
 	walk(ast, (node) => {
 		if (node.attrs && Array.isArray(node.attrs)) {
 			for (const attr of node.attrs) if (targetAttrs.includes(attr.name) && typeof attr.value === "string") attr.value = sortClassString(attr.value);
@@ -327,14 +355,21 @@ function processHtmlAst(ast, targetAttrs) {
 		if (node.attributes && Array.isArray(node.attributes)) for (const attr of node.attributes) {
 			const name = attr.name || attr.key && attr.key.value;
 			if (targetAttrs.includes(name) && attr.value) {
-				if (typeof attr.value === "string") attr.value = sortClassString(attr.value);
-				else if (attr.value && typeof attr.value.value === "string") attr.value.value = sortClassString(attr.value.value);
+				if (typeof attr.value === "string") {
+					if (attr.kind && attr.kind !== "quoted") continue;
+					if (attr.value.includes("${")) continue;
+					attr.value = sortClassString(attr.value);
+				} else if (attr.value && typeof attr.value.value === "string") {
+					if (attr.value.value.includes("${")) continue;
+					attr.value.value = sortClassString(attr.value.value);
+				}
 			}
 		}
 	});
 	return ast;
 }
-function processJsxAst(ast, targetAttrs) {
+function processJsxAst(ast, targetAttrs, targetFunctions = []) {
+	const functionSet = new Set(targetFunctions);
 	walk(ast, (node) => {
 		if (node.type === "JSXAttribute" || node.type === "JSXSpreadAttribute") {
 			const name = node.name && (node.name.name || node.name.value);
@@ -353,6 +388,33 @@ function processJsxAst(ast, targetAttrs) {
 				}
 			}
 		}
+		if (node.type === "CallExpression" && functionSet.size > 0) {
+			const callee = node.callee;
+			if (callee && callee.type === "Identifier" && functionSet.has(callee.name)) for (const arg of node.arguments || []) sortStringNode(arg);
+		}
+	});
+	return ast;
+}
+function walkSvelte(node, visitor) {
+	if (!node) return;
+	visitor(node);
+	if (node.fragment && Array.isArray(node.fragment.nodes)) for (const child of node.fragment.nodes) walkSvelte(child, visitor);
+	if (Array.isArray(node.children)) for (const child of node.children) walkSvelte(child, visitor);
+}
+function processSvelteAst(ast, targetAttrs, _targetFunctions) {
+	walkSvelte(ast, (node) => {
+		if (!node.attributes || !Array.isArray(node.attributes)) return;
+		for (const attr of node.attributes) {
+			if (attr.type !== "Attribute") continue;
+			if (!targetAttrs.includes(attr.name)) continue;
+			if (Array.isArray(attr.value)) {
+				for (const item of attr.value) if (item.type === "Text" && typeof item.data === "string") {
+					const sorted = sortClassString(item.data);
+					item.data = sorted;
+					if (typeof item.raw === "string") item.raw = sorted;
+				}
+			}
+		}
 	});
 	return ast;
 }
@@ -401,7 +463,7 @@ function createParserWrapper(parserName, processAst, astFormat) {
 			if (!originalParser) throw new Error(`prettier-plugin-bootstrap: could not find the "${parserName}" parser. Make sure Prettier and the relevant parser plugin are installed.`);
 			if (originalParser.locStart) wrapper.locStart = originalParser.locStart;
 			if (originalParser.locEnd) wrapper.locEnd = originalParser.locEnd;
-			return processAst(await originalParser.parse(text, options), [...DEFAULT_ATTRIBUTES, ...options.bootstrapAttributes || []]);
+			return processAst(await originalParser.parse(text, options), [...DEFAULT_ATTRIBUTES, ...options.bootstrapAttributes || []], options.bootstrapFunctions || []);
 		}
 	};
 	return wrapper;
@@ -415,7 +477,8 @@ const parsers = {
 	typescript: createParserWrapper("typescript", processJsxAst, "estree"),
 	acorn: createParserWrapper("acorn", processJsxAst, "estree"),
 	meriyah: createParserWrapper("meriyah", processJsxAst, "estree"),
-	astro: createParserWrapper("astro", processHtmlAst, "astro")
+	astro: createParserWrapper("astro", processHtmlAst, "astro"),
+	svelte: createParserWrapper("svelte", processSvelteAst, "svelte-ast")
 };
 //#endregion
 export { BREAKPOINTS, CLASS_ORDER, classKey, options, parsers, sortClasses };

package/dist/traversal.d.ts

@@ -1,2 +1,3 @@
-export declare function processHtmlAst(ast: any, targetAttrs: string[]): any;
-export declare function processJsxAst(ast: any, targetAttrs: string[]): any;
+export declare function processHtmlAst(ast: any, targetAttrs: string[], _targetFunctions?: string[]): any;
+export declare function processJsxAst(ast: any, targetAttrs: string[], targetFunctions?: string[]): any;
+export declare function processSvelteAst(ast: any, targetAttrs: string[], _targetFunctions?: string[]): any;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "prettier-plugin-bootstrap",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A Prettier plugin for automatic Bootstrap class sorting",
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     }
   },
@@ -38,14 +38,21 @@
     "prettier": "^3.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^10.3.0",
     "prettier": "^3.5.0",
-    "tsdown": "^0.12.0",
+    "tsdown": "^0.21.10",
     "typescript": "^5.8.0",
+    "typescript-eslint": "^8.59.1",
     "vitest": "^3.1.0"
   },
   "scripts": {
     "build": "tsdown && tsc -p tsconfig.build.json",
+    "format:check": "prettier --check .",
+    "lint": "eslint .",
     "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   }