Add scoped child Components opt-in

[bySabi]

This PR include @bernhardc 's work #574 plus some test and doc

I hope this is ok, be accepted and can be merge soon, before next v4 release.

I create repo example here https://github.com/bySabi/styled-jsx-repo for the intrepid people.

[bySabi]

After experimenting a bit with the fork, I have concluded that this PR is not very useful.
The selector works only with the element of the child component that has the className.
I thought, fool of me, that applying a selector on the child's container would allow me to select each subelement using nesting &.

It seemed so easy :-(

So I don't think this PR has any value.

[masad-frost]

Honestly this is how I'd expect it to work

[masad-frost]

const Parent = () => {
  return (
    <div>
      <Child className="blah" />
      <styled jsx>{`
        div {
          color: red;
        }
        .blah {
          color: green;
        }
      `}</style>
    </div>
  )
}
const Child = ({ className }) => {
  return <div>
    <span className={className}>hello</span>
  </div>
}

I expect

<div class="jsx-123">
  <div>
    <span class="jsx-123 blah">hello</span>
  </div>
</div>

Not

<div class="jsx-123">
  <div class="jsx-123">
    <span class="jsx-123 blah"></span>
  </div>
</div>