Do not pass suppressClassNameWarning to wrapped components

Environment

System:

• OS: macOS 10.14
• CPU: (4) x64 Intel® Core™ i5-7267U CPU @ 3.10GHz
• Memory: 75.45 MB / 8.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 8.15.0 - /usr/local/opt/node@8/bin/node
• npm: 6.4.1 - /usr/local/opt/node@8/bin/npm

npmPackages:

• babel-plugin-styled-components: ^1.10.0 => 1.10.0
• styled-components: ^4.1.3 => 4.1.3

Summary

• suppressClassNameWarning produces React warning suppressClassNameWarning should either only be using lowercase letters instead of camelCase, or it should be filtered from being applied to the DOM. Otherwise, React complains.

(see https://github.com/styled-components/styled-components/pull/2156/files/fe66a4f9aae8f4736c8c6bc08df64e56d892844d)

Reproduction

Steps to reproduce

• add suppressClassNameWarning as a property or attribute

Expected Behavior

• styled-components warning is suppressed

Actual Behavior

• styled-components warning is suppressed but then React gives warning:

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

[ghost]

I lightly suggest in https://github.com/styled-components/styled-components/blob/fe66a4f9aae8f4736c8c6bc08df64e56d892844d/src/utils/classNameUseCheckInjector.js

Change from:

 if (
      (target.props && target.props.suppressClassNameWarning) ||
      (target.attrs && target.attrs.suppressClassNameWarning)
    ) {
      return;
    }

Change to:

 if (target.props && target.props.suppressClassNameWarning)
    {
      delete  target.props.suppressClassNameWarning;
      return;
    }
 if (target.attrs && target.attrs.suppressClassNameWarning) {
      delete target.attrs.suppressClassNameWarning;
      return;
    }

[taneba]

Aha, understood! Can I address this issue? If so, I will send PR later! 😄