Combine border attributes
vnxdev opened this issue · comments
We need to have an option to make a shorthand oneliner for border attribute.
This doesn't work in Outlook and Windows 10 Mail:
border: 1px solid transparent;
border-color: #4CAF50;
But this one does:
border: 1px solid #4CAF50;
Should be a built-in option to enable such kind of transformation.
Clients with compatibility problems: https://www.campaignmonitor.com/css/box-model/border-color/
I disagree, this shouldn't be in core. Juice's responsibility is to inline CSS, not to change the way it's written. There are libraries for dealing with such things, maybe give postcss-merge-longhand a try.
@hellocosmin We have juice.styleToAttribute for some reason and correct me if I'm wrong but it's for email clients compatibility reasons.
juice.styleToAttribute does not change your CSS, it just adds HTML attributes that correspond to certain CSS properties. Those properties aren't altered.
I totally understand the need for this: had to cope with the fact myself, when using Juice in Maizzle, where I'm using Tailwind CSS classes (which are not shorthand).
But the purpose of the library is to inline your CSS, not alter its syntax. Yes, Juice is primarily used for emails, but it's not meant only for that (as described in the readme), and such a breaking change could cause issues for others - there could be situations where the user expects the CSS to be inlined exactly as it was written.
@hellocosmin Well, same goes for styleToAttribute, it's altering your HTML although it's not the purpose of the library. I'm not saying that CSS shorthand should be enabled by default, I'm just saying that it would be useful to have a built-in option to enable it.
@vnxdev I agree with @hellocosmin that this isn't a feature that belongs in juice. There are some other tools out there that do that sort of rewriting for emails. But, juice has a focus on compatible inlining, not on rewriting or providing shorthand. My recommendation is to find or write a simple pre-transform or post-transform tool. web-resource-inliner which is a core dependency of juice has an option called linkTransform that is designed for this kind of hook.