Support styled DOM

[lttb]

Support tags as styled properties. This styled has backward capability with original styled.

This interface has some issues:

• performance and memory overhead, because we need to create functions for all dom-elements for each styled instance
• dom-elements whitelist. and user can declare only those tags that we've supported

But they can be solved by Proxy.

And we can use it this way:

• Proxy for runtime usage if we don't worry about performance and browser capability
• use babel-plugin (https://github.com/cssinjs/styled-jss/issues/5) instead

Usage

import { styled } from 'styled-jss/dom'

const Button = styled.button({
  fontSize: 12,
  color: (props) => props.theme.textColor
})

// Composition.
const PrimaryButton = styled(Button, {
  color: 'red'
})

[kof]

I am not sure we should do this considered recent discussions regarding maintaining the white lists.

[kof]

And we can't support this api and without proxies and without white lists.

[lttb]

I thinks that we can provide styled-jss/dom with Proxy for examples (REPL etc.) and make it easier to try, but the main recommendation is babel-plugin usage

[kof]

Lets make sure styled-components uses react-dom-elements package, so that we don't have to maintain it alone. This pr is mainly about compatibility to styled-components, its not really a better DX and just adds in package size otherwise.

[lttb]

@kof but styled function with dom-elements placed in styled-jss/dom, so it would not add package size in default styled-jss usage. And I think that we need to avoid dom-elements here and use Proxy/babel-plugin

[kof]

I ment total package size on npm and total amount of code to maintain.

[lttb]

I think we can close it for now because of babel-plugin-styled-jss, and return to this later if need.