remove className usage checker & suppression prop

CHANGELOG.md

@@ -6,6 +6,14 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 ## Unreleased
 
+- Remove className usage checker dev utility due to excessive false-positive noise in certain runtime environments like next.js and the related warning suppression prop (see [#2563](https://github.com/styled-components/styled-components/issues/2563)).
+
+- Attach displayName to forwardRef function as described in React docs (see [#2508](https://github.com/styled-components/styled-components/issues/2508)).
+
+- Compatibility with react-native-web 0.11 (see [#2453](https://github.com/styled-components/styled-components/issues/2453)).
+
+- Add stack trace to .attrs warning (see [#2486](https://github.com/styled-components/styled-components/issues/2486)).
+
 ## [v4.2.0] - 2019-03-23
 
 - Reduced GC pressure when using component selector styles. (see [#2424](https://github.com/styled-components/styled-components/issues/2424)).

packages/styled-components/src/models/StyledComponent.js

@@ -17,10 +17,8 @@ import StyleSheet from './StyleSheet';
 import { ThemeConsumer, type Theme } from './ThemeProvider';
 import { StyleSheetConsumer } from './StyleSheetManager';
 import { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';
-import classNameUsageCheckInjector from '../utils/classNameUsageCheckInjector';
 
 import type { Attrs, RuleSet, Target } from '../types';
-import { IS_BROWSER } from '../constants';
 
 const identifiers = {};
 
@@ -74,7 +72,7 @@ class StyledComponent extends Component<*> {
           // eslint-disable-next-line no-console
           console.warn(
             `Functions as object-form attrs({}) keys are now deprecated and will be removed in a future version of styled-components. Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition. The attrs key in question is "${key}" on component "${displayName}".`,
-            `\n ${(new Error()).stack}`
+            `\n ${new Error().stack}`
           )
       );
 
@@ -89,10 +87,6 @@ class StyledComponent extends Component<*> {
           )
       );
     }
-
-    if (process.env.NODE_ENV !== 'production' && IS_BROWSER) {
-      classNameUsageCheckInjector(this);
-    }
   }
 
   render() {
@@ -146,9 +140,9 @@ class StyledComponent extends Component<*> {
         this.warnInnerRef(displayName);
       }
 
-      if (key === 'forwardedComponent' || key === 'as' || key === 'suppressClassNameWarning')
-        {continue;}
-      else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];
+      if (key === 'forwardedComponent' || key === 'as') {
+        continue;
+      } else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];
       else if (!isTargetTag || validAttr(key)) {
         // Don't pass through non HTML tags through to HTML elements
         propsForElement[key] = computedProps[key];

packages/styled-components/src/test/basic.test.js

@@ -229,19 +229,6 @@ describe('basic', () => {
       expect(wrapper.testRef.current).toBe(innerComponent);
     });
 
-    it('should not pass the suppressClassNameWarning to the wrapped child', () => {
-      const OuterComponent = styled(InnerComponent)``;
-
-      class Wrapper extends Component<*, *> {
-        render() {
-          return <OuterComponent suppressClassNameWarning />
-        }
-      }
-
-      const wrapper = TestRenderer.create(<Wrapper />);
-      expect(wrapper.root.findByType(InnerComponent).props.suppressClassNameWarning).toBeUndefined();
-    });
-
     it('should respect the order of StyledComponent creation for CSS ordering', () => {
       const FirstComponent = styled.div`
         color: red;
@@ -358,42 +345,5 @@ describe('basic', () => {
       TestRenderer.create(<Comp innerRef={ref} />);
       expect(console.warn).not.toHaveBeenCalled();
     });
-
-    it('warns when a wrapped React component does not consume className', () => {
-      const Inner = () => <div />;
-      const Comp = styled(Inner)`
-        color: red;
-      `;
-
-      renderIntoDocument(
-        <div>
-          <Comp />
-        </div>
-      );
-
-      expect(console.warn.mock.calls[0][0]).toMatchInlineSnapshot(
-        `"It looks like you've wrapped styled() around your React component (Inner), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component."`
-      );
-    });
-
-    it('does not warn if the className is consumed by a deeper child', () => {
-      const Inner = ({ className }) => (
-        <div>
-          <span className={className} />
-        </div>
-      );
-
-      const Comp = styled(Inner)`
-        color: red;
-      `;
-
-      renderIntoDocument(
-        <div>
-          <Comp />
-        </div>
-      );
-
-      expect(console.warn).not.toHaveBeenCalled();
-    });
   });
 });