Page MenuHomePhabricator

CSS minification breaking rule with attribute selector if contains a space
Closed, DuplicatePublic

Description

Hello,

I try to added a CSS rule on my common.css on frwiki:

html[style*="margin-left: 268px;"]
{
    margin-left: 80px !important;
}

This rule is used to optimize the use of an "WAVE Accessibility Extension", it is a add-on for Firefox designed to check the accessibility of a webpage.

Minified CSS such as visible with the web development tools on Firefox:

html[style*="margin-left:268px;"] {
 margin-left:80px !important
}

Result : margin-left: 268px; is replaced by margin-left:268px; = breaking rule !

The minification breaks the rule at the attribute selector, removing the space between margin-left: and 268px;, which prevents the attribute selector from working.

I solved the problem by just using 268px; in attribute selector, which is enough in my case. But the problem may arise in other circumstances.

The minification should not impact the part inside an attribute selector of a rule.

(sorry for my bad english)

Event Timeline

Restricted Application added a project: Performance-Team. · View Herald TranscriptAug 25 2018, 6:50 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

@Tractopelle-jaune Thanks for reporting this issue. I understand the issue and I can reproduce it. This is indeed a minification bug.

At this time, ResourceLoader does not support use of CSS-like syntax inside content strings and attribute selectors. This is a side-effect of CSSMin design that uses a simple regex for performance. For the long-term, this issue is tracked at T37492.

I hope that in the future we can find another way to minify CSS that is still performant but does allow for arbitrary strings. However, I cannot promise that this will happen soon.