Feature Request: Better parsing of vendor specific pseudo elements/selectors

[dsbecker]

The issue of vendor specific pseudo elements seems it was at least partially fixed, but I've got another scenario that's triggering it. In my original GSS I have this:

.selectorA::-webkit-progress-value, .selectorA::-moz-progress-bar {
  background: red;
}

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

.selectorA::-webkit-progress-value {
  background: red
}
.selectorA::-moz-progress-bar {
  background: red
}

However, if I modify my original GSS like so:

.selectorB .selectorA::-webkit-progress-value, .selectorB .selectorA::-moz-progress-bar {
  background: red;
}

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? I've worked around it by doing this:

.selectorB .selectorA::-webkit-progress-value {
  background: red;
}
  @external ↑↑↑_DO_NOT_COMBINE_↓↓↓;
.selectorB .selectorA::-moz-progress-bar {
  background: red;
}

Ugly, but it works. :)

[dsbecker]

See also: https://groups.google.com/forum/#!topic/closure-stylesheets-discuss/yDe2Rp5lZFo

[iflan]

I think the problem is in MergeAdjacentRulesetNodesWithSameDeclarations. There's a method called hasProblematicSelectors that tries to decide whether the rulesets can be combined. I'm guessing that it's not working for you, but I'm not sure why. (I'm guessing it's because it's not recursive.) Can you give me an exact repro case using the runnable JAR? If you can, then I'll write a test for it and track it down.

[dsbecker]

It may be a while before I can get back to extracting this test case. We're knee deep into a deadline at the moment.

Thanks for your patience!

-.. .- ...- .. -.. ... -... . -.-. -.- . .-.

On Tue, Sep 27, 2016 at 12:38 AM, Ian Flanigan [email protected] wrote:

I think the problem is in MergeAdjacentRulesetNodesWithSameDeclarations. There's a method called hasProblematicSelectors that tries to decide whether the rulesets can be combined. I'm guessing that it's not working for you, but I'm not sure why. (I'm guessing it's because it's not recursive.) Can you give me an exact repro case using the runnable JAR? If you can, then I'll write a test for it and track it down.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/google/closure-stylesheets/issues/97#issuecomment-249789220, or mute the thread https://github.com/notifications/unsubscribe-auth/ANbfsj4h-aG3usqnGGxdSSes6sAlrWghks5quMfvgaJpZM4KG64Z .

[dsbecker]

Minor correction: @external is a GWT thing, not a closure thing. In pure closure stylesheets syntax I use .↑↑↑_DO_NOT_MERGE_ADJACENT_RULESET_↓↓↓ { display: none; } instead.

[dsbecker]

Sorry for the delay. Here is a test case reproducible with the downloadable jar:

Input:

.selectorA::-webkit-progress-value, .selectorA::-moz-progress-bar {
  content: 'THESE GET SPLIT PROPERLY';
}

.selectorB .selectorA::-webkit-progress-value, .selectorB .selectorA::-moz-progress-bar {
  content: 'THESE STAY MERGED BUT SHOULD BE SPLIT';
}

.selectorC .selectorA::-webkit-progress-value {
  content: 'THESE GET MERGED EVEN WHEN SEPARATED';
}

.selectorC .selectorA::-moz-progress-bar {
  content: 'THESE GET MERGED EVEN WHEN SEPARATED';
}

.selectorD .selectorA::-webkit-progress-value {
  content: 'THESE STAY SEPARATE BECAUSE OF THE SEPARATOR';
}

.↑↑↑_DO_NOT_MERGE_ADJACENT_RULESET_↓↓↓ { display: none; }

.selectorD .selectorA::-moz-progress-bar {
  content: 'THESE STAY SEPARATE BECAUSE OF THE SEPARATOR';
}

Command Line: $ java -jar closure-stylesheets.jar --pretty-print issue-97.gss

Output:

.selectorA::-webkit-progress-value {
  content: 'THESE GET SPLIT PROPERLY';
}
.selectorA::-moz-progress-bar {
  content: 'THESE GET SPLIT PROPERLY';
}
.selectorB .selectorA::-webkit-progress-value, .selectorB .selectorA::-moz-progress-bar {
  content: 'THESE STAY MERGED BUT SHOULD BE SPLIT';
}
.selectorC .selectorA::-webkit-progress-value, .selectorC .selectorA::-moz-progress-bar {
  content: 'THESE GET MERGED EVEN WHEN SEPARATED';
}
.selectorD .selectorA::-webkit-progress-value {
  content: 'THESE STAY SEPARATE BECAUSE OF THE SEPARATOR';
}
.↑↑↑_DO_NOT_MERGE_ADJACENT_RULESET_↓↓↓ {
  display: none;
}
.selectorD .selectorA::-moz-progress-bar {
  content: 'THESE STAY SEPARATE BECAUSE OF THE SEPARATOR';
}