fix: Allow DISABLE_SPEEDY to be set to false (#3289)

* fix: Allow `DISABLE_SPEEDY` to be set to `false`

The old initialization of `DISABLE_SPEEDY` meant that the only way it could be set to a falsey value was if `NODE_ENV` was set to `production` and no other setting was set. Setting `SC_DISABLE_SPEEDY` or the environment variables to false would be overridden by `NODE_ENV`.

The new initialization ensures that if one of these options is set, it’s value is respected.

This change should only affect the computed value of `DISABLE_SPEEDY` if one of the settings has the value `false` or `’false’`. Otherwise it should have the same truthy or falsey value.

Since the expected behavior of setting one of the configuration variables to `false` is to have `DISABLE_SPEEDY` set to false, this should be a fix and not a breaking change.

* test: Add tests for setting `DISABLE_SPEEDY` to `false`

* fix: Ensure `DISABLE_SPEEDY` boolean type

Technically not needed, but makes the tests pass when passing in the string values of `’false’` without needing to modify the compare values. And is a bit cleaner to have it as a boolean type.

* fix: Inline `process.env` references

Per [this comment](#3289 (comment))

* docs: Add changelog entry

CHANGELOG.md

@@ -20,6 +20,8 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 - Add "engines" to package.json (currently set to Node 10, the oldest supported LTS distribution) (see [#3201](https://github.com/styled-components/styled-components/pull/3201)) thanks @MichaelDeBoey!
 
+- Allow `DISABLE_SPEEDY` to be set to `false` to enable speedy mode in non-production environments (see [#3289](https://github.com/styled-components/styled-components/pull/3289)) thanks @FastFedora!
+
 ## [v5.1.1] - 2020-04-07
 
 ### New Functionality

packages/styled-components/src/constants.js

@@ -15,10 +15,15 @@ export const SPLITTER = '/*!sc*/\n';
 export const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 
 export const DISABLE_SPEEDY =
-  (typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY) ||
-  (typeof process !== 'undefined' &&
-    (process.env.REACT_APP_SC_DISABLE_SPEEDY || process.env.SC_DISABLE_SPEEDY)) ||
-  process.env.NODE_ENV !== 'production';
+  Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
+    ? SC_DISABLE_SPEEDY
+    : (typeof process !== 'undefined' && typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
+      ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY
+      : (typeof process !== 'undefined' && typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== ''
+        ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY
+        : process.env.NODE_ENV !== 'production'
+      )
+    ));
 
 // Shared empty execution context when generating static styles
 export const STATIC_EXECUTION_CONTEXT = {};

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

@@ -76,6 +76,7 @@ describe('constants', () => {
     afterEach(() => {
       process.env.NODE_ENV = 'test';
       delete process.env.DISABLE_SPEEDY;
+      delete window.SC_DISABLE_SPEEDY;
     });
 
     it('should be false in production NODE_ENV when SC_DISABLE_SPEEDY is not set', () => {
@@ -87,6 +88,12 @@ describe('constants', () => {
       renderAndExpect(false, '');
     });
 
+    it('should be false in development NODE_ENV when window.SC_DISABLE_SPEEDY is set to false', () => {
+      process.env.NODE_ENV = 'development';
+      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, '');
@@ -114,11 +121,43 @@ describe('constants', () => {
       delete process.env.SC_DISABLE_SPEEDY;
     });
 
+    it('should work with SC_DISABLE_SPEEDY environment variable when set to `false` in development NODE_ENV', () => {
+      process.env.NODE_ENV = 'development';
+      process.env.SC_DISABLE_SPEEDY = false;
+      renderAndExpect(false, '');
+
+      delete process.env.SC_DISABLE_SPEEDY;
+    });
+
+    it('should work with SC_DISABLE_SPEEDY environment variable when set to "false" in development NODE_ENV', () => {
+      process.env.NODE_ENV = 'development';
+      process.env.SC_DISABLE_SPEEDY = 'false';
+      renderAndExpect(false, '');
+
+      delete process.env.SC_DISABLE_SPEEDY;
+    });
+
     it('should work with REACT_APP_SC_DISABLE_SPEEDY environment variable', () => {
       process.env.REACT_APP_SC_DISABLE_SPEEDY = true;
       renderAndExpect(true, '.b { color:blue; }');
 
       delete process.env.REACT_APP_SC_DISABLE_SPEEDY;
     });
+
+    it('should work with REACT_APP_SC_DISABLE_SPEEDY environment variable when set to `false` in development NODE_ENV', () => {
+      process.env.NODE_ENV = 'development';
+      process.env.REACT_APP_SC_DISABLE_SPEEDY = false;
+      renderAndExpect(false, '');
+
+      delete process.env.REACT_APP_SC_DISABLE_SPEEDY;
+    });
+
+    it('should work with REACT_APP_SC_DISABLE_SPEEDY environment variable when set to "false" in development NODE_ENV', () => {
+      process.env.NODE_ENV = 'development';
+      process.env.REACT_APP_SC_DISABLE_SPEEDY = 'false';
+      renderAndExpect(false, '');
+
+      delete process.env.REACT_APP_SC_DISABLE_SPEEDY;
+    });
   });
 });