Issues with "as" vs "is" props in V3

I noticed that the docs recommend using as to change the underlying tag emitted. However, if I use as instead of is, then all of the styled-system helpers are removed, and the values are passed directly to the DOM.

i.e. this works

const Code = props => 
  <Text
    is='code'
    fontFamily='mono'
  />

However, if we swap is with as, fontFamily now gets passed as font-family as an attribute on the tag directly. I get

  <code font-family="mono" class="random-gen-class-name"></code>

[mrfelton]

@jxnblk yeah, understood.

For now, we just keep our dependencies pinned to the following versions:

rebass@3.0.0-9
babel-plugin-styled-components@1.8.0

These do not suffer from the issue (rebass@3.0.0-9 uses it’s own css prop handling rather than relying on styled-components)

[mrfelton]

https://www.styled-components.com/docs/api#css-prop

This is different from the old rebass css prop.

Old style (expects css object):

css={{
  'background-color': 'red',
  'border': '1px solid green';
}}

New style (allows you to write actual css):

css={`
  background-color: red;
  border: 1px solid green;
`}