xandermann / html-classes-obfuscator

Obfuscate class names in HTML, CSS and Javascript files.

Hi 👋, I'm Alexandre Hublau

A passionate Devops Engineer from France 🇫🇷

• 🔭 I’m currently working on my blog

• 🌱 I’m currently practicing Kubernetes and Terraform

• 📝 I regularly write articles on https://www.alexandre-hublau.com

• 📫 How to reach me : [email protected]

• ⚡ Fun fact The alchemist : Paulo Coelho - is my favorite book ! 📚

Blogs posts

English posts 🇬🇧

• Design pattern "Strategy"
• The SOLID/STUPID principles
• Design pattern "Visitor"
• Design pattern "Iterator"
• Design pattern "Observer"
• Design pattern "Memento"
• Design pattern "Facade"
• Design pattern "Decorator"

French posts 🇫🇷

• Simplifiez les conditions avec les opérateurs logiques et opérateurs ternaires
• Écrivez plus vite en HTML avec Emmet
• Introduction à Vim
• Introduction aux jobs linux
• Supprimez les messages de connexion SSH au démarrage de session
• Créez un environnement avec Docker et Traefik
• Dockeriser votre application SSH!
• Générez automatiquement vos certificats SSL avec traefik (OVH)

html-classes-obfuscator's Issues

Do not add useless quotes

Exemple:

<div class="hello"></div>

Could generate: (without quotes)

<div class=aa></div>

Improve the test structure

Improve the test structure:

html-classes-obfuscator/tests/test_html_classes_obfuscator.py

Lines 13 to 16 in b0c362c

	@classmethod
	def setUpClass(cls) -> None:
	# TODO : add for multiples test folders
	shutil.copytree('./tests/tests_1', cls.TMP_FOLDER + "/tests_1")

Not working if class name begins with a number

A class name should not begin with a number:

https://www.w3.org/TR/CSS21/syndata.html#characters

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B&W?” or “B\26 W\3F”.

Should we add a warning in the README ?

When there is no quotes for class attribute and there is a dash ("-") in class name : not working

Describe the bug

When there is no quotes for class attribute and there is a dash ("-") in class name : not working

To Reproduce
https://github.com/xandermann/html-classes-obfuscator/blob/fail_test_dash_no_quotes/tests/tests_generate_html.py#L63-L67

Class names in variables aren't replaced in JS

Describe the bug
Class names in variables aren't replaced in Javascript

To Reproduce

const cl = ".my_class_name"
document.querySelector(cl); // Not working

// ---

const cl = ".my_class" + "_name"
document.querySelector(cl); // Not working

// ---

const id = "#my_class_id"
document.querySelector(id); // Not working

Expected behavior
It should replace the variable content

Selector not working: `div:not(.selector_not_working)`

Describe the bug
The selector :not() isn't obfuscated

To Reproduce

div:not(.selector_not_working)

Expected behavior
The CSS code should be obfuscated.

Javascript classes not replaced when using single quotes

html-classes-obfuscator/tests/tests_generate_js.py

Lines 21 to 26 in 7d85432

	# TODO
	# def test_generate_js_query_selector_simple_quotes(self) -> None:
	# """Test"""
	# new_js = html_classes_obfuscator.generate_js("document.querySelector('.hello')", {"hello": "test_1"})
	# expected_new_js = 'document.querySelector(".test_1")'
	# self.assertEqual(new_js, expected_new_js)

html-classes-obfuscator/tests/tests_generate_js.py

Lines 34 to 39 in 7d85432

	# TODO
	# def test_generate_js_query_selector_all_simple_quotes(self) -> None:
	# """Test"""
	# new_js = html_classes_obfuscator.generate_js("document.querySelectorAll('.hello')", {"hello": "test_1"})
	# expected_new_js = "document.querySelectorAll('.test_1')"
	# self.assertEqual(new_js, expected_new_js)

html-classes-obfuscator/tests/tests_generate_js.py

Lines 47 to 52 in 7d85432

	# TODO
	# def test_generate_js_toggle_class_list_simple_quotes(self) -> None:
	# """Test"""
	# new_js = html_classes_obfuscator.generate_js("myDiv.classList.toggle('hello')", {"hello": "test_1"})
	# expected_new_js = "myDiv.classList.toggle('test_1')"
	# self.assertEqual(new_js, expected_new_js)

Add support for AlpineJS

Is your feature request related to a problem? Please describe.

<div
    x-bind:class="title === 0 && 'bg-gray-100 text-gray-900'"
></div>

Describe the solution you'd like
Minify the classes bg-gray-100 text-gray-900 ?