add SC_DISABLE_SPEEDY runtime override (#2185)

* add SC_DISABLE_SPEEDY runtime override

* refactor SC_ATTR tests into their own 'describe' section

* add tests for DISABLE_SPEEDY and SC_DISABLE_SPEEDY global variable

* add CHANGELOG entry

CHANGELOG.md

@@ -7,6 +7,7 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 ## Unreleased
 
 - Performance optimization for fully static (no function interpolation) styled-components by avoiding using `ThemeConsumer` since it isn't necessary, by [@mxstbr](https://github.com/mxstbr) (see [#2166](https://github.com/styled-components/styled-components/pull/2166))
+- Allow disabling "speedy" mode via global `SC_DISABLE_SPEEDY` variable, by [@devrelm](https://github.com/devrelm) (see [#2185](https://github.com/styled-components/styled-components/pull/2185))
 
 ## [v4.0.3] - 2018-10-30
 

src/constants.js

@@ -1,6 +1,7 @@
 // @flow
 
 declare var __DEV__: ?string;
+declare var SC_DISABLE_SPEEDY: ?boolean;
 
 export const SC_ATTR = (typeof process !== 'undefined' && process.env.SC_ATTR) || 'data-styled';
 
@@ -11,7 +12,9 @@ export const SC_STREAM_ATTR = 'data-styled-streamed';
 export const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 
 export const DISABLE_SPEEDY =
-  (typeof __DEV__ === 'boolean' && __DEV__) || process.env.NODE_ENV !== 'production';
+  (typeof __DEV__ === 'boolean' && __DEV__) ||
+  (typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY) ||
+  process.env.NODE_ENV !== 'production';
 
 // Shared empty execution context when generating static styles
 export const STATIC_EXECUTION_CONTEXT = {};

src/test/constants.test.js

@@ -5,38 +5,98 @@ import TestRenderer from 'react-test-renderer';
 import { expectCSSMatches } from './utils';
 import { SC_ATTR as DEFAULT_SC_ATTR } from '../constants';
 
-function renderAndExpect(expectedAttr) {
-  const SC_ATTR = require('../constants').SC_ATTR;
-  const styled = require('./utils').resetStyled();
+describe('constants', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
 
-  const Comp = styled.div`
-    color: blue;
-  `;
+  describe('SC_ATTR', () => {
+    function renderAndExpect(expectedAttr) {
+      const SC_ATTR = require('../constants').SC_ATTR;
+      const styled = require('./utils').resetStyled();
 
-  TestRenderer.create(<Comp />);
+      const Comp = styled.div`
+        color: blue;
+      `;
 
-  expectCSSMatches('.b { color:blue; }');
+      TestRenderer.create(<Comp />);
 
-  expect(SC_ATTR).toEqual(expectedAttr);
-  expect(document.head.querySelectorAll(`style[${SC_ATTR}]`)).toHaveLength(1);
-}
+      expectCSSMatches('.b { color:blue; }');
 
-describe('constants', () => {
-  it('should work with default SC_ATTR', () => {
-    renderAndExpect(DEFAULT_SC_ATTR);
-  });
+      expect(SC_ATTR).toEqual(expectedAttr);
+      expect(document.head.querySelectorAll(`style[${SC_ATTR}]`)).toHaveLength(1);
+    }
 
-  it('should work with custom SC_ATTR', () => {
-    const CUSTOM_SC_ATTR = 'data-custom-styled-components';
-    process.env.SC_ATTR = CUSTOM_SC_ATTR;
-    jest.resetModules();
+    it('should work with default SC_ATTR', () => {
+      renderAndExpect(DEFAULT_SC_ATTR);
+    });
+
+    it('should work with custom SC_ATTR', () => {
+      const CUSTOM_SC_ATTR = 'data-custom-styled-components';
+      process.env.SC_ATTR = CUSTOM_SC_ATTR;
+      jest.resetModules();
 
-    renderAndExpect(CUSTOM_SC_ATTR);
+      renderAndExpect(CUSTOM_SC_ATTR);
 
-    delete process.env.SC_ATTR;
+      delete process.env.SC_ATTR;
+    });
   });
 
-  afterEach(() => {
-    jest.resetModules();
+  describe('DISABLE_SPEEDY', () => {
+    const oldDev = window.__DEV__;
+
+    function renderAndExpect(expectedDisableSpeedy, expectedCss) {
+      const DISABLE_SPEEDY = require('../constants').DISABLE_SPEEDY;
+      const styled = require('./utils').resetStyled();
+
+      const Comp = styled.div`
+        color: blue;
+      `;
+
+      TestRenderer.create(<Comp />);
+
+      expect(DISABLE_SPEEDY).toEqual(expectedDisableSpeedy);
+      expectCSSMatches(expectedCss);
+    }
+
+    beforeEach(() => {
+      window.__DEV__ = false;
+      process.env.NODE_ENV = 'production';
+    });
+
+    afterEach(() => {
+      window.__DEV__ = oldDev;
+      process.env.NODE_ENV = 'test';
+      delete process.env.DISABLE_SPEEDY;
+    });
+
+    it('should be false in production NODE_ENV when SC_DISABLE_SPEEDY is not set', () => {
+      renderAndExpect(false, '');
+    });
+
+    it('should be false in production NODE_ENV when window.SC_DISABLE_SPEEDY is set to false', () => {
+      window.SC_DISABLE_SPEEDY = false;
+      renderAndExpect(false, '');
+    });
+
+    it('should be false in production NODE_ENV when window.SC_DISABLE_SPEEDY is set to truthy value', () => {
+      window.SC_DISABLE_SPEEDY = 'true';
+      renderAndExpect(false, '');
+    });
+
+    it('should be true in production NODE_ENV when window.SC_DISABLE_SPEEDY is set to true', () => {
+      window.SC_DISABLE_SPEEDY = true;
+      renderAndExpect(true, '.b { color:blue; }');
+    });
+
+    it('should be true in test NODE_ENV', () => {
+      process.env.NODE_ENV = 'test';
+      renderAndExpect(true, '.b { color:blue; }');
+    });
+
+    it('should be true in development NODE_ENV', () => {
+      process.env.NODE_ENV = 'development';
+      renderAndExpect(true, '.b { color:blue; }');
+    });
   });
 });