Add localStyles plugin, tests and dependencies.

[strarsis]

This PR adds the localStyles plugin which copies styles from style element to style attribute of the selected elements.

• run this plugin before the removeStyleElement plugin
• this plugin won't remove the style element, use removeStyleElement after this plugin
• run convertStyleToAttrs after this plugin
• minify styles in style element if necessary before this plugin (minified = "computed" styles)
• this plugin currently works only with class and id selectors, advanced css selectors (e.g. :nth-child) aren't currently supported
• inline styles will be written after the styles from style element
• classes are inlined by the order of their names in class element attribute

[Joeynoh]

+1!

[GreLI]

Why there are styles both in attribute and <style> tag?
What about media queries?
Also, code style check fails.

[strarsis]

I ran npm test which doesn't invoke make travis, so jshint was ommited,
hence the build errors, fixed that now.

As mediaqueries and other nested structures cannot be added to style attribute,
they would be preserved in style element in any case for further possible usage.

Initially the styles element was intended to be preserved by this plugin
and removed by removeStyleElement plugin instead.
However, there may be mediaqueries and orphaned selectors left in style element.
What kind of modi would make sense (passed as plugin option)?:

• Preserve style element completely (current mode).
• Remove matching selectors, preserve everything else.
• Remove all selectors except nested structures that cannot be copied to style attribute at all (e.g. mediaqueries).

What should happen to the class attributes/classe names inside that matched?
cleanupAttrs plugin afterwards?

With best regards

[Joeynoh]

Just my two cents: It makes sense that this plugin does not remove the style element, considering there is already a plugin that does. You can simply run them in sequence. Optionally, this plugin can perhaps call removeStyleElement, but should be set to false by default.

Calling cleanupAttrs afterwards makes sense as well.

[strarsis]

When there are mediaquery styles, the svgo end user would disable removeStyleElement anyway, so this shouldn't cause trouble either.

Maybe an extra plugin that just removes styles that aren't used by the classes/ids inside before this one, so there are no leftover styles?

[strarsis]

I added style element clean up which will strip any selectors/rules
that matched the elements (by class/id) (and which declarations were copied to style attribute).

The following rules apply to style element clean up now:

• Preserve nested structures (e.g. media queries) in any case (cannot be inlined).
• Remove selectors that matched.
• Remove rules where all its selectors matched.

With best regards

P.S.: Maybe later, when it is stable enough, it could be worth it
moving the clean up part into an extra plugin (cleanupStyles.js)?

[strarsis]

Ready to merge?

[GreLI]

I haven't looked into it closely yet.
Also, we're using indentation of 4 spaces mostly.

[strarsis]

There seems to be more issues posted concerning styles in svgo.

• Remove styles with display: none; (hidden layers)
• Remove styles element when not needed (similar to this plugin)
• Minify styles element (and inline styles?)

To improve selector support, using a XML parser like cheerio would help
because it offers $(...) which can evaluate more complex selectors.

[GreLI]

uh-oh

[strarsis]

I can improve/add comments if necessary. :)

[GreLI]

I'm sorry, still don't have much time to look into it. Quite a big pull-request.

[strarsis]

I did a full rewrite and rebranch and will create a new PR instead: #592