Better class removing

ulyssear · ulyssear · commit baf1700015ab · 2023-02-12T20:57:28.000+01:00
diff --git a/src/index.js b/src/index.js
@@ -237,6 +237,7 @@ function apply_custom_class(element, className) {
 	// window.addEventListener('resize', () => apply_custom_class(element, className));
 
 	const group_classes = split_classname_to_classes_groups(className);
+	// console.log({group_classes})
 
 	for (let i = 0; i < group_classes.length; i++) {
 		const { selectors, classes, events, media_query } = group_classes[i];
@@ -259,8 +260,6 @@ function apply_custom_class(element, className) {
 			});
 		}
 		const original_class = className;
-		// element.className = element.className.replace(className, '').trim();
-		// console.log({classes_to_apply})
 
 		// console.log({ selectors, classes_to_apply, events, media_query });
 
@@ -342,6 +341,8 @@ function do_apply(element, selectors, classes, events, media_query, original_cla
 				elements_to_apply.push(elements[k]);
 			}
 		}
+		element.className = element.className.replace("\r", '').replace("\n", '').replace("\t", '').replace(/\s\s+/g, ' ').trim();
+		element.className = element.className.replace(/\[.+\]:\{(?:\s+)?\}/g, '').trim();
 	}
 
 	if (events) {
@@ -374,8 +375,9 @@ function do_apply(element, selectors, classes, events, media_query, original_cla
 			if (!name) continue;
 			element_to_apply.style.setProperty(name, value);
 			if (to_remove_class) continue;
-			if (element.className.includes(original_class)) {
-				to_remove_class = true;
+			const class_to_remove = `${name}-[${value}]`;
+			if (element.className.includes(class_to_remove)) {
+				element.className = element.className.replace(class_to_remove, '').trim();
 			}
 		}
 	}

Original file line number	Diff line number	Diff line change
`@@ -237,6 +237,7 @@ function apply_custom_class(element, className) {`
`237`	`237`	`// window.addEventListener('resize', () => apply_custom_class(element, className));`
`238`	`238`
`239`	`239`	`const group_classes = split_classname_to_classes_groups(className);`
	`240`	`+ // console.log({group_classes})`
`240`	`241`
`241`	`242`	`for (let i = 0; i < group_classes.length; i++) {`
`242`	`243`	`const { selectors, classes, events, media_query } = group_classes[i];`
`@@ -259,8 +260,6 @@ function apply_custom_class(element, className) {`
`259`	`260`	`});`
`260`	`261`	`}`
`261`	`262`	`const original_class = className;`
`262`		`- // element.className = element.className.replace(className, '').trim();`
`263`		`- // console.log({classes_to_apply})`
`264`	`263`
`265`	`264`	`// console.log({ selectors, classes_to_apply, events, media_query });`
`266`	`265`
`@@ -342,6 +341,8 @@ function do_apply(element, selectors, classes, events, media_query, original_cla`
`342`	`341`	`elements_to_apply.push(elements[k]);`
`343`	`342`	`}`
`344`	`343`	`}`
	`344`	`+ element.className = element.className.replace("\r", '').replace("\n", '').replace("\t", '').replace(/\s\s+/g, ' ').trim();`
	`345`	`+ element.className = element.className.replace(/\[.+\]:\{(?:\s+)?\}/g, '').trim();`
`345`	`346`	`}`
`346`	`347`
`347`	`348`	`if (events) {`
`@@ -374,8 +375,9 @@ function do_apply(element, selectors, classes, events, media_query, original_cla`
`374`	`375`	`if (!name) continue;`
`375`	`376`	`element_to_apply.style.setProperty(name, value);`
`376`	`377`	`if (to_remove_class) continue;`
`377`		`- if (element.className.includes(original_class)) {`
`378`		`- to_remove_class = true;`
	`378`	+ const class_to_remove = `${name}-[${value}]`;
	`379`	`+ if (element.className.includes(class_to_remove)) {`
	`380`	`+ element.className = element.className.replace(class_to_remove, '').trim();`
`379`	`381`	`}`
`380`	`382`	`}`
`381`	`383`	`}`