fix: support Rollup apps by using a named export

[jacksteamdev]

Hey there 👋! Great job with your library 👏. This simple PR should help clear up a couple of long-standing issues. Closes #588, closes #669 and closes #658. The bug has been discussed in length in these issues and is also mentioned in #542.

What is happening?

When using this library in an app built using Rollup, this error happens at runtime:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Issue #669 provides a great minimal repoduction.

What does this PR do?

I found both default and named exports in src/style.js. Even though it's in the ESM specs, this is hard for Rollup to handle.

This PR fixes this by adding and using a named export for the component, so that the file exports the JSXStyle component as both a named and default export. Then the named export is consumed by the transpiled code produced by the Babel plugin.

Currently styled-jsx transpiles the example to the following:

import _JSXStyle from 'styled-jsx/style'

export default () => (
  <div className="jsx-123">
    <p className="jsx-123">only this paragraph will get the style :)</p>
    <_JSXStyle id="123">{`p.jsx-123 {color: red;}`}</_JSXStyle>
  </div>
)

The new output has a named import instead:

import { JSXStyle as _JSXStyle } from 'styled-jsx/style'

export default () => (
  <div className="jsx-123">
    <p className="jsx-123">only this paragraph will get the style :)</p>
    <_JSXStyle id="123">{`p.jsx-123 {color: red;}`}</_JSXStyle>
  </div>
)

[jacksteamdev]

@giuseppeg It's occurred to me that this would be a breaking change if someone was using the styleModule option with a custom style component.

I can put this feature behind an option, maybe namedExport?