Component API props are passed to DOM element

Hi!

Thanks for the best css-in-js library! We’re using Component API in our application, and I noticed odd behaviour in a new version: all props matching css classes are passed to DOM elements. As far as I remember astroturf filtered props earlier.

Example:

let Base = styled.div`
  position: relative;
  …
  &.isBig {
    size: 32px;
  }
`

…
return React.createElement(Base, { isBig }, …)

And now I’m getting:

Warning: React does not recognize the `isBig` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isbig` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Is it correct behaviour and we have to filter props manually?

Thanks!

[taion]

i think this is just an oversight on my part though – i think the right thing would be to support these props being null-y. wdyt?

[ai]

@taion You right, it was the source of the issue.

But I hope many developers will make the same mistake. Maybe we should show own warning, that CSS class has the same name as non-bolean prop