Skip to content
This repository has been archived by the owner on May 9, 2024. It is now read-only.

Add support for mangling for "Quirks Mode" #340

Open
2 tasks
ericcornelissen opened this issue Jul 25, 2022 · 0 comments
Open
2 tasks

Add support for mangling for "Quirks Mode" #340

ericcornelissen opened this issue Jul 25, 2022 · 0 comments
Labels
enhancement New feature or request

Comments

@ericcornelissen
Copy link
Owner

ericcornelissen commented Jul 25, 2022 •
edited
Loading

Package(s)

mangler-css-classes (0.1.23), mangler-html-ids (0.1.23)

Description

WebMangler currently only supports mangled for "Standards mode", but not "Quirks mode". As a result, mangling might not work as expected if the website being mangled is running in "Quirks mode".

As an example: in "Quirks mode", CSS classes are case insensitive. Since the CssClassMangler assumes classes are case sensitive (see the CharSet), mangling a website that runs in "Quirks mode" might not work correctly. This is because class names could be generated that are identical in "Quirks mode", e.g. .a and .A.

This problem exists for1:

  • mangler-css-classes
  • mangler-html-ids

The following is a snippet of HTML to test the behaviour of quirk mode:

<!-- Comment the next line to enter "Quirks Mode" -->
<!DOCTYPE html>

<h1>Quirks mode behaviour</h1>

<h2>IDs</h2>
<style>
#a { color: red; }
</style>
<div id="a">lowercase ID</div>
<div id="A">uppercase ID</div>
<div id="b">other ID</div>
<script>
  console.log(document.querySelectorAll("#a"))
  console.log(document.getElementById("a"))
</script>

<hr>

<h2>classes</h2>
<style>
.a { color: blue; }
</style>
<div class="a">lowercase class</div>
<div class="A">uppercase class</div>
<div class="b">other class</div>
<script>
  console.log(document.querySelectorAll(".a"))
  console.log(document.getElementsByClassName("a"))
</script>

Motivation

The motivation for supporting "Quirks mode" is that it's supported by browsers. Hence, a developer with a website that works in "Quirks mode" will reasonably expect it still works after mangling it with WebMangler.

Proposal

Add support for a flag2 to enable mangling for "Standards mode". When this flag is set (to true), plugins should work the way they do now. When this flag is not set(/set to false), plugins should operate as though they're mangling for a website running in "Quirks mode".

The motivation for mangling for "Quirks mode" by default is that it also works for "Standards mode", whereas the reverse is not true. This makes WebMangler easier to pickup for developers that are not necessarily aware of the differences between "Standards mode" and "Quirks mode".

Alternatives

  1. Detecting quirk mode dynamically: This approach seems almost intractable. It's hard to say whether or not a website will run in "Quirks mode", so it'll be hard to instruct mangler/language plugins to operate in a "Quirks mode"-compliant manner.
  2. Mangle for "Standards Mode" by default: See the proposal for an explanation of why this wasn't chosen.

Notes

This feature request is related, but not identical, to #184. It was discovered while working on #184.

Footnotes

  1. If a mangler plugin is missing from this list, please leave a comment with a detailed explanation of the reason why it doesn't support "Quirks Mode". ↩

  2. To be decided if this will be in the top-level config, the plugin config, or somewhere else. ↩
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ericcornelissen