Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: <meta name="viewport" content="width=device-width initial-scale=1"> is incorrectly minified #178

Open
davidmurdoch opened this issue Aug 1, 2024 · 0 comments
Open

[Bug]: <meta name="viewport" content="width=device-width initial-scale=1"> is incorrectly minified #178

davidmurdoch opened this issue Aug 1, 2024 · 0 comments

Comments

@davidmurdoch
Copy link

What happened?

The parsing algorithm for the CSS viewport content attribute is defined here: https://drafts.csswg.org/css-viewport/#parsing-algorithm

The following characters are valid separators in some places (but not all):

Horizontal tab (0x09)
Line feed (0x0a)
Carriage return (0x0d)
Space (0x20)
Comma (0x2c)
Semicolon (0x3b)

3.2. Parsing algorithm

Below is an algorithm for parsing the content attribute of the tag produced from testing Safari on the iPhone. The testing was done on an iPod touch running iPhone OS 4. The UA string of the browser: "Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7". The pseudo code notation used is based on the notation used in [Algorithms].

The whitespace class contains the following characters (ascii):

  • Horizontal tab (0x09)
  • Line feed (0x0a)
  • Carriage return (0x0d)
  • Space (0x20)

The recognized separator between property/value pairs is comma for the Safari implementation. Some implementations have supported both commas and semicolons. Because of that, existing content use semicolons instead of commas. Authors should be using comma in order to ensure content works as expected in all UAs, but implementors may add support for both to ensure interoperability for existing content.

The separator class contains the following characters (ascii), with comma as the preferred separator and semicolon as optional:

  • Comma (0x2c)
  • Semicolon (0x3b)
Parse-Content(S)
1   i ← 1
2   while i ≤ length[S]
3    do while i ≤ length[S] and S[i] in [whitespace, separator, '=']
4      do i ← i + 1
5    if i ≤ length[S]
6      then i ← Parse-Property(S, i)


Parse-Property(S, i)
1   start ← i
2   while i ≤ length[S] and S[i] not in [whitespace, separator, '=']
3     do i ← i + 1
4   if i > length[S] or S[i] in [separator]
5     then return i
6   property-name ← S[start .. (i - 1)]
7   while i ≤ length[S] and S[i] not in [separator, '=']
8     do i ← i + 1
9   if i > length[S] or S[i] in [separator]
10    then return i
11  while i ≤ length[S] and S[i] in [whitespace, '=']
12    do i ← i + 1
13  if i > length[S] or S[i] in [separator]
14    then return i
15  start ← i
16  while i ≤ length[S] and S[i] not in [whitespace, separator, '=']
17    do i ← i + 1
18  property-value ← S[start .. (i - 1)]
19  Set-Property(property-name, property-value)
20  return i

Set-Property matches the listed property names case-insensitively. The property-value strings are interpreted as follows:

  1. If a prefix of property-value can be converted to a number using strtod, the value will be that number. The remainder of the string is ignored.
  2. If the value can not be converted to a number as described above, the whole property-value string will be matched with the following strings case-insensitively: yes, no, device-width, device-height
  3. If the string did not match any of the known strings, the value is unknown.

Version

v7.2.0

What browsers are you seeing the problem on?

No response

Link to reproduce

No response

Relevant log output

create an HTML file as `index.html` with the following contents:


<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width initial-scale=1.0" />
  </head>
  <body></body>
</html>

then run npx -y html-minifier-terser@latest index.html

The content attribute's content, width=device-width initial-scale=1.0, will be minified to width=device-widthinitial-scale=1.0, which is now invalid. The value should remain unchanged in this case.



### Willing to submit a PR?

None
This was referenced Aug 1, 2024
Open
Merged
davidmurdoch added a commit to MetaMask/metamask-extension that referenced this issue Aug 2, 2024
@davidmurdoch
chore: normalize separator in content on the viewport meta tag (#…
6b592c5 
…26268)

The functionality is the same as before, but it this change works around
a bug in https://github.com/terser/html-minifier-terser which causes the
space to be removed, and the tag to become invalid (this only affects
the webpack build).

Upstream issues:

webdiscus/html-bundler-webpack-plugin#106
terser/html-minifier-terser#178
dawnseeker8 pushed a commit to MetaMask/metamask-extension that referenced this issue Aug 12, 2024
@davidmurdoch @dawnseeker8
chore: normalize separator in content on the viewport meta tag (#…
bf5c27a 
…26268)

The functionality is the same as before, but it this change works around
a bug in https://github.com/terser/html-minifier-terser which causes the
space to be removed, and the tag to become invalid (this only affects
the webpack build).

Upstream issues:

webdiscus/html-bundler-webpack-plugin#106
terser/html-minifier-terser#178
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@davidmurdoch