add Sort Selection command

CHANGELOG.md

@@ -14,3 +14,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * Fix `cmd+shift+t` overriding default vscode keymap for reopening previously closed tabs, thanks [@tylerjlawson](https://github.com/tylerjlawson) in [#163](https://github.com/heybourn/headwind/pull/163)
 * Forked from [heybourn/headwind] to [Trapfether/tailwind-raw-reorder] to continue development. Old repo is inactive.
 * Initial rework of the extension to use the same approach as the [Prettier Tailwind plugin]
+* Updated the html and php regexes to only select class attributes proceeded by a space
+* Added Sort Selection command to sort the selected classes

README.md

@@ -23,9 +23,13 @@ You can also trigger Tailwind Raw Reorder by:
 * Pressing CTRL + ALT + T on Linux
 
 
-Tailwind Raw Reorder can sort individual files by running 'Sort Tailwind CSS Classes' via the Command Palette. Workspaces can also be sorted by running 'Sort Tailwind CSS Classes on Entire Workspace'.
+Tailwind Raw Reorder can sort individual files by running 'Sort Tailwind CSS Classes' via the Command Palette.
 
-Any breakpoints or unknown classes will be moved to the end of the class list, whilst duplicate classes will be removed.
+Workspaces can also be sorted by running 'Sort Tailwind CSS Classes on Entire Workspace'.
+
+Your current selection can be sorted by running 'sort Tailwind CSS Classes on Selection'. You should select only the classes you want to sort, and not the entire line or surrounding qoutes / whitespace.
+
+Any unknown classes will be moved to the start of the class list, whilst duplicate classes will be removed.
 
 ### `tailwind-raw-reorder.classRegex`:
 
@@ -125,7 +129,7 @@ Good example value: `valueMatch w-64 h-full bg-blue-400 relative`
 
 ### `tailwind-raw-reorder.runOnSave`:
 
-Tailwind Raw Reorder will run on save by default (if a `tailwind.config.js` file is present within your working directory). This can be toggled on or off.
+Tailwind Raw Reorder will run on save by default (if a `tailwind.config.*` file is present within your working directory). This can be toggled on or off.
 
 `"tailwind-raw-reorder.runOnSave": false`
 

package.json

@@ -38,6 +38,10 @@
             {
                 "command": "tailwind-raw-reorder.sortTailwindClassesOnWorkspace",
                 "title": "Tailwind Raw Reorder: Sort Tailwind CSS Classes on Entire Workspace"
+            },
+            {
+                "command": "tailwind-raw-reorder.sortTailwindClassesOnSelection",
+                "title": "Tailwind Raw Reorder: Sort Tailwind CSS Classes on current Selection"
             }
         ],
         "keybindings": [

src/index.mjs

@@ -97,6 +97,46 @@ export function activate(context) {
 		}
 	);
 
+	let runOnSelection = commands.registerCommand(
+		'tailwind-raw-reorder.sortTailwindClassesOnSelection',
+		() => {
+			let editor = window.activeTextEditor;
+			if (editor) {
+				let selection = editor.selection;
+				let editorText = editor.document.getText(selection);
+				let editorLangId = editor.document.languageId;
+				let editorFilePath = editor.document.fileName;
+
+				const matchers = buildMatchers(
+					langConfig[editorLangId] || langConfig['html']
+				);
+
+				const tailwindConfig = getTailwindConfig({
+					filepath: editorFilePath
+				});
+
+				for (const matcher of matchers) {
+					const seperator = matcher.separator;
+					const replacement = matcher.replacement;
+
+					//regex that matches a seperator seperated list of classes that may contain letters, numbers, dashes, underscores, square brackets, square brackets with single quotes inside, and forward slashes
+					const regexContent = `(?:[a-zA-Z][a-zA-Z\\/_\\-:]+(?:\\[[a-zA-Z\\/_\\-"'\\\\:\\.]\\])?(${(seperator || /\s/).source})*)+`;
+					const regex = new RegExp(regexContent);
+					if (regex.test(editorText)) {
+						const sortedText = sortClasses(editorText, {
+							seperator: seperator,
+							replacement,
+							env: tailwindConfig
+						});
+						editor.edit((editBuilder) => {
+							editBuilder.replace(selection, sortedText);
+						});
+					}
+				}
+			}
+		}
+	);
+
 	context.subscriptions.push(runOnProject);
 	context.subscriptions.push(disposable);