Inline the same property multiple times

[cossssmin]

Test

it('allowMultipleSameProperty', function() {
  var html = '<div class="bg-dark">Hello</div>';
  var css = '.bg-dark{background: #000000;}\n p{background: url(dark.png); background: rgba(0,0,0,0.4);}';

  assert.strictEqual(juice.inlineContent(html, css), '<div class="bg-dark" style="background: #000000; background: url(dark.png); background: rgba(0,0,0,0.4);">Hello</div>');
});

Result

- Actual
-<div class="bg-dark" style="background: #1F2225;">Hello</div> 

+ Expected
+<div class="bg-dark" style="background: #1F2225; background: url(dark.png); background: rgba(0,0,0,0.4);">Hello</div>

Why?

It's common for email clients to only support a subset of values for certain CSS properties.

We work around this with a sort of inline progressive enhancement, where the leftmost property is the most supported and the rightmost is the least supported. In the example above:

1. modern email clients will show a semi-transparent black background (rgba(0,0,0,0.4))
2. those that don't support rgba() but support background images will show the background image
3. the rest will just use the #000000

@jrit can you see this working in Juice? Wanted to PR but can't figure it out tbh...

[jrit]

I thought about this a bit, and yes, I agree that sometimes having the same style multiple times is good, but in the overall use of stylesheets, this is something that happens a small percentage of the time. So, aside from where this could possibly be hooked up in the code, the larger issue seems like how to define when this behavior should happen vs the normal CSS behavior of prioritizing the winning style. I'm not sure I have any good answer to that without adding a bunch of weird juice-specific syntax to the CSS.

[cossssmin]

when this behavior should happen

Could be a Juice option, false by default?

where this could possibly be hooked up in the code

Yes that's what I was struggling with, not sure how to disable the prioritization of the winning style and just append to existing styles.