Feature/dynamic elements

[twltwl]

Related issue #147

Based on comment by @giuseppeg

Automaticly scopes elements if possible ( works if declared inside of component )

for other cases a styled-jsx prop can be added

// works
const Cmp = () => {
  const Element = 'div';
  return (<Element className="foo">
    <style jsx>{`.foo{...}`}</style>
  </Element>)
}

// wont work
const Element = 'div';
const Cmp = () => (<Element className="foo">
  <style jsx>{`.foo{...}`}</style>
</Element>)

// works
const Element = 'div';
const Cmp = () => (<Element className="foo" styled-jsx>
  <style jsx>{`.foo{...}`}</style>
</Element>)

[giuseppeg]

thank you this looks great! You will have to update the snapshots with ava -u

[giuseppeg]

can we remove this feature for now?

[twltwl]

Sure, if we want to add it at a later point let me know

[giuseppeg]

I won't want to include this feature here for now, let's fix one thing at the time

[giuseppeg]

awesome can you add a few more tests cases? i.e. a few more combinations to where Element is defined outside of the component, and maybe when it is lowercase too (any edge case you can think of). Also can you add a class component too?

[twltwl]

Maybe Im missing something, but I dont think it will work if Element is defined outside of the component. ( Thats why I added the styled-jsx option )
I´ll add the testcases

[giuseppeg]

correct, it won't work (it won't add the className) and we want a snapshot of that! ;)

[twltwl]

👍

[giuseppeg]

@twltwl this branch is good to merge, can you just remove node 6 from travis https://github.com/zeit/styled-jsx/blob/a55c821a998b9a7210c03a30c4ae33de7ec94eb6/.travis.yml#L3 ? and maybe add a new line for node 10?

[giuseppeg]

@twltwl thanks so much for this great contribution! 🙌

[iamawebgeek]

@giuseppeg I cannot use this feature for some reason. Babel is not stripping out the styled-jsx attribute and adding a scoped className. How can I figure out what is the problem?