Emotion 11 no longer filters attributes like Emotion 10 did

[RoystonS]

Current behavior:

If I write a simple styled HTML-element component with a custom property, Emotion 10 filters that custom property out before it hits the DOM. Emotion 11 isn't doing that.

To reproduce:

I've produced a tiny sample app with a single Emotion styled component with an on property. The styled component adjusts the foreground and background colours depending on whether on is true or false.

The component:

const BackgroundChooser = styled.div(({ on }) => ({
  padding: 8,
  background: on ? "#d0ffd0" : "#ff2020",
  color: on ? "#000000" : "#ffffff"
}));

• Here's a CodeSandbox with the sample running under Emotion 10: https://codesandbox.io/s/emotion-issue-template-forked-673u4?file=/src/index.js
• Here's a CodeSandbox with the same code running under Emotion 11: https://codesandbox.io/s/emotion-issue-template-forked-17277?file=/src/index.js

Here's the error it emits in the console:

index.js:1 Warning: Received `true` for a non-boolean attribute `on`.

If you want to write it to the DOM, pass a string instead: on="true" or on={value.toString()}.
    in div (created by Styled(div))
    in Styled(div) (at src/index.js:18)
    in div (at src/index.js:17)
    in App (at src/index.js:25)

Expected behavior:

Filtering behaviour should be the same as Emotion 10.

Of course, this behaviour might be deliberate, but that's going to break a lot of code.

Environment information:

• react 16.8.6 + emotion 10.0.11
• react 16.13.1 + emotion 11.0.0-next.15

[RoystonS]

I'm closing this until I can get a better repro. This is meant to be a small repro for a scenario I'm seeing in my main codebase after upgrading to Emotion 11, but this repro is giving the same warning in Emotion 10.

[Andarist]

Just a note - the filtering has been barely touched between 10 and 11, so what you observe is quite surprising to me. I would recommend setting up a breakpoint within your interpolation, inspecting the caller function and checking there was filtering function got used there. It should be our isPropValid.

[RoystonS]

I looked into it a little more, and on was added to @emotion/is-valid-prop during the Emotion 10 lifetime.
So the slightly older version of Emotion 10 in my (big) codebase doesn't forward on but newer Emotion 10 and Emotion 11 do forward on, causing this warning to be emitted in React.

[Andarist]

Ah, right - for reference, it was added here: #1584

This is IMHO a big problem with the styled API - basically any change to this whitelist is a breaking change for somebody but at the same time, it doesn't make quite a sense to add stuff there only on new major versions. ☹️