Combining CSS rules can be problematic

[Michael Bolin]

I have discovered that when Closure Stylesheets combines CSS rules, it can actually break things. I thought this was a browser bug, but it is actually a bug in Closure Stylesheets:

http://bolinfest.com/webkit/placeholder.html

Basically, combining

.first_input::-webkit-input-placeholder {
  color: red;
}
.first_input:-moz-placeholder {
  color: red;
}

into

.first_input::-webkit-input-placeholder, .first_input:-moz-placeholder {
  color: red;
}

takes CSS that worked on both WebKit and Gecko and turns it into CSS that works on neither.

One option is to make Closure Stylesheets's optimizations smarter. The other is to turn it off by default.

Thoughts?

--Michael

[Tom Payne]

On 16 February 2012 03:28, Michael Bolin <boli...@gmail.com> wrote:
> .first_input::-webkit-input-placeholder {
> color: red;
> }

Is the double colon :: correct here?

I haven't tried your code - just checking an assumption.

Cheers,
Tom

[Ian Flanigan]

Can you point to the part of the spec that says that if one selector is not known then all selectors will be ignored? Because if that is part of the spec, we should not combine selectors with vendor-specific prefixes in any of the refiners.

Ian

[Michael Bolin]

http://www.w3.org/TR/css3-syntax/#rule-sets

"The selector (see the Selectors module [SELECT]) consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well."

The selectors ::-webkit-input-placeholder and :-moz-placeholder seem to fit the bill.

[Ian Flanigan]

Yep. We should fix that, then. Do you have a patch?

Ian

[Michael Bolin]

Unfortunately, no. I needed to make forward progress on my main project, so I disabled the optimization in plovr:

http://code.google.com/p/plovr/source/detail?r=0b706285b4e10ecd36168b20f48d13b364ed4534

Another workaround is to move your declarations such that there is something inbetween, preventing combination, but that makes maintenance more difficult:

.first_input::-webkit-input-placeholder {
  color: red;
}

.unrelated_stuff {

  border: 1px solid black;

}

.first_input:-moz-placeholder {
  color: red;
}

[david....@sencha.com]

I know this is an OLD post, but I'm running into this very issue. It seems it was at least partially fixed, but I've got another scenario that's triggering it.  In my original gss I have this:

1. .selectorA::-webkit-progress-value, .selectorA::-moz-progress-bar {

2.   background: red;

3. }

And GSS seems to properly split this out in the final output:

1. .selectorA::-webkit-progress-value {

2.   background: red

3. }

5. .selectorA::-moz-progress-bar {

6.   background: red

7. }

However, if I modify my original GSS like so:

1. .selectorB .selectorA::-webkit-progress-value, .selectorB .selectorA::-moz-progress-bar {

2.   background: red;

3. }

The output is left combined, and the effect breaks. Even if I manually split out the two blocks in my original GSS, it still recombines them for me in the final output.

Using Michael's trick of putting unrelated stuff in between does indeed work as a fix, but I wanted to share in case there's a better way. Some sort of processing directive to not combine maybe?

Thanks!

[Ian Flanigan]

Can you file a feature request?

Ian

--
You received this message because you are subscribed to the Google Groups "closure-stylesheets-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to closure-stylesheets-discuss+unsub...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.