juice
juice copied to clipboard
Automattic
Optionally not inline selectors that match multiple times
When a selector matches multiple times (DOM elements) and full inlining is not required, it would be great if an option could be added that would let juice not inline that particular selector because the overhead would be actually lower (selector+block once vs repeating the declarations per element).
Related to: https://github.com/svg/svgo/pull/592
Just to make sure I understand the issue, you are looking at this in terms of saving on character count overall, and that is what you mean? For example, a selector like #some-id .class-name { ... } adds ~24 characters compared to inlining into a style tag once. But, if you have 10 elements that match that selector, you probably end up with a net of more characters when inlining it 10 times, not less. Is that what the concern is?
Yes, exactly! Ideally, with this option enabled, juice calculates a cost (as you described, selector + declarations length vs inlined+computed styles length x matching elements) and decides whether it would save more space to leave the styles external or to inline them.
I'm interested in looking into an option to accomplish this. It might turn out to be really ugly, so I'm only promising to look into it to try and find a reasonable solution. I probably won't have time for that for a few weeks, but if anyone else feels inclined before then, please post a comment here.
svgo is a great tool, happy to help where I can.
This PR tries to demonstrate the feature, though the cost calculation feature is missing: https://github.com/Automattic/juice/pull/239/files The test runner was slightly modified, also the CSS parser is used directly in the inline file, so I am not sure whether this addition is not too intrusive/inelegant for the existing juice code.