Allow to display warnings in the browser

[lydell]

Inspired by postcss-messages. Then why not use that plugin? Well, look at the
diff of index.js:

-    console.log(warningLog);
+    if (!('console' in options && !options.console)) {
+      console.log(warningLog);
+    }
+
+    if (options.browser) {
+      result.root.append(formatBrowser(warningLog));
+    }

The only difference is how to display the warnings! There's no need to duplicate
the rest of features between the two plugins.

This fixes postcss/postcss-browser-reporter#8, postcss/postcss-browser-reporter#9 and
postcss/postcss-browser-reporter#10.

As opposed to postcss-messages, this implementation:

• Inserts the messages at head::before instead of html::before. While
  html::before is unlikely to conflict with other styles, head::before is
  even less so! In fact, it should be extremely unlikely to conflict.

• Does not allow to change the selector. Because of the above point there's no
  need to.

• Does not use ::after if ::before was already used in the CSS. Again,
  because of the first point there is no need to.

• Does not allow to change the styling. There's no way to change the styling
  when logging to the console either. Also, @ai said:

  BTW, options is a lack in UX. You should better think more about default
  options and styles, rather than add options for every case.

  Add option to customize styles of the message box postcss/postcss-browser-reporter#3 (comment)

• Uses simpler styling. KISS. It is still similar to postcss-messages.

• Properly escapes the CSS content string.

[ai]

What is a point to have one huge plugin instead of two “one task” plugins? For example, right now we can display some warnings in console and some in browser.

I think postcss-messages and postcss-log-warning have too different behaviour to be implemented in one plugin.

[lydell]

Really, do you think this plugin is huge? This PR does not even add 100 lines of code (not counting test code).

Benefits from merging:

• Only show message if warnings exist. postcss/postcss-browser-reporter#11 and Don't inject style if no warnings postcss/postcss-browser-reporter#13. postcss-log-warnings does not have that problem.
• postcss-messages had three open issues about duplicating behavior from this plugin.
• The two plugins are identical, except: One uses chalk+console.log, the other uses insert-CSS. That’s the only difference. Everything else would need to be duplicated.

[ai]

1. PR to fix that problems will be smaller ;).
2. It will be better to create a common library to work with warnings.
3. We have more difference, because users will use this plugin for different task. How throwError optioin will work in browser mode? Or there is no sense to change console warning styles, but there is sense to change browser style. And wwe again will have a option only for one mode.

I think it is like a megre Autoprefixer and Autopolyfiller. Of course, there is a common code. Of course that do something similiar. But it is look like platypus. Plugin will have more complicated UX, because he will have different modes, when some options will work and other will not.

[lydell]

PR to fix that problems will be smaller ;)

I don’t think so. Prove me wrong ;)

It will be better to create a common library to work with warnings.

postcss-helper-create-warnings-string?

[lydell]

@MoOx, you usually have good opinions on PostCSS stuff. What do you think?

[lydell]

Sometimes you need a good night’s sleep. I just woke up with the answer. I will now start to break this PR up, and post new PRs, some to this module, some to postcss-messages.

[davidtheclark]

I've got to catch up on this conversation ...