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.

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

Storing declarations as a map results in a "dangerous" optimization in level 0 #10

Open
andreubotella opened this issue Feb 26, 2023 · 0 comments

Comments

@andreubotella
Copy link

Take the following CSS code:

.test::after {
  content: url("./image.jpg");
  content: url("./image.jpg") / "Some alt text";
}

The second declaration in the block is a valid value for the content CSS property, at least according to the CSS Content Level 3 specification (see here in MDN), but it is only supported in Chromium browsers, and not in Firefox or Safari.

Declaring the content property twice in the same block achieves backwards compatibility for browsers that don't support the newer syntax for that property, since a declaration which doesn't have correct syntax for the given property will be ignored. Therefore, Firefox and Safari will use url("./image.png") as the value of the content property, and Chromium browsers will use url("./image.png") / "Some alt text".

css-minify, however, stores the CSS declarations in a block as a map from CSS properties to a single value, which means only the latter value is stored in the map. Therefore, even with level 0, the result of minification is:

.test:after {content:url("./image.jpg") / "Some alt text"}

which behaves differently from the original CSS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant