Skip to content

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

@andreubotella

Description

@andreubotella

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions