backport dev SSR classname mismatch fix from canary (#2701)

* backport dev SSR classname mismatch fix from canary * changelog entry
styled-components · Aug 21, 2019 · e4cd50c · e4cd50c
1 parent 5602131
commit e4cd50c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 ## Unreleased
 
+- Backport fix for SSR classname mismatches in development mode for some environments like next.js (see [#2701](https://github.com/styled-components/styled-components/pull/2701))
+
 ## [v4.3.2] - 2019-06-19
 
 - Fix usage of the "css" prop with the styled-components babel macro (relevant to CRA 2.x users), by [@jamesknelson](http://github.com/jamesknelson) (see [#2633](https://github.com/styled-components/styled-components/issues/2633))

diff --git a/packages/styled-components/src/models/ComponentStyle.js b/packages/styled-components/src/models/ComponentStyle.js
@@ -10,9 +10,6 @@ import { IS_BROWSER } from '../constants';
 
 import type { Attrs, RuleSet } from '../types';
 
-const isHMREnabled =
-  process.env.NODE_ENV !== 'production' && typeof module !== 'undefined' && module.hot;
-
 /* combines hashStr (murmurhash) and nameGenerator for convenience */
 const hasher = (str: string): string => generateAlphabeticName(hashStr(str));
 
@@ -31,7 +28,7 @@ export default class ComponentStyle {
 
   constructor(rules: RuleSet, attrs: Attrs, componentId: string) {
     this.rules = rules;
-    this.isStatic = !isHMREnabled && isStaticRules(rules, attrs);
+    this.isStatic = process.env.NODE_ENV === 'production' && isStaticRules(rules, attrs);
     this.componentId = componentId;
 
     if (!StyleSheet.master.hasId(componentId)) {
@@ -40,10 +37,10 @@ export default class ComponentStyle {
   }
 
   /*
-     * Flattens a rule set into valid CSS
-     * Hashes it, wraps the whole chunk in a .hash1234 {}
-     * Returns the hash to be injected on render()
-     * */
+   * Flattens a rule set into valid CSS
+   * Hashes it, wraps the whole chunk in a .hash1234 {}
+   * Returns the hash to be injected on render()
+   * */
   generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet) {
     const { isStatic, componentId, lastClassName } = this;
     if (

diff --git a/packages/styled-components/src/test/staticCaching.test.js b/packages/styled-components/src/test/staticCaching.test.js
@@ -8,32 +8,6 @@ describe('static style caching', () => {
     styled = resetStyled();
   });
 
-  it('should mark styles without any functions as static', () => {
-    const TOP_AS_NUMBER = 10;
-    const FONT_SIZE_NUMBER = 14;
-
-    const Comp = styled.div`
-      color: purple;
-      font-size: ${FONT_SIZE_NUMBER}px
-      position: absolute;
-      top: ${TOP_AS_NUMBER}
-    `;
-
-    expect(Comp.componentStyle.isStatic).toEqual(true);
-  });
-
-  it('should mark styles with a nested styled component as static', () => {
-    const NestedComp = styled.div``;
-
-    const Comp = styled.div`
-      ${NestedComp} {
-        color: purple;
-      }
-    `;
-
-    expect(Comp.componentStyle.isStatic).toEqual(true);
-  });
-
   it('should mark styles with a dynamic style as not static', () => {
     const Comp = styled.div`
       color: ${props => props.color};
@@ -42,17 +16,6 @@ describe('static style caching', () => {
     expect(Comp.componentStyle.isStatic).toEqual(false);
   });
 
-  it('should mark components with numeric attriutes as static', () => {
-    const Comp = styled.div.attrs({
-      style: {
-        color: 'purple',
-      },
-      height: 100,
-    })``;
-
-    expect(Comp.componentStyle.isStatic).toEqual(true);
-  });
-
   it('should mark components with dynamic attributes as not static', () => {
     const Comp = styled.div.attrs({
       style: props => ({
@@ -62,4 +25,47 @@ describe('static style caching', () => {
 
     expect(Comp.componentStyle.isStatic).toEqual(false);
   });
+
+  describe('production mode', () => {
+    beforeEach(() => {
+      process.env.NODE_ENV = 'production';
+    });
+
+    it('should mark styles without any functions as static', () => {
+      const TOP_AS_NUMBER = 10;
+      const FONT_SIZE_NUMBER = 14;
+
+      const Comp = styled.div`
+        color: purple;
+        font-size: ${FONT_SIZE_NUMBER}px
+        position: absolute;
+        top: ${TOP_AS_NUMBER}
+      `;
+
+      expect(Comp.componentStyle.isStatic).toEqual(true);
+    });
+
+    it('should mark styles with a nested styled component as static', () => {
+      const NestedComp = styled.div``;
+
+      const Comp = styled.div`
+        ${NestedComp} {
+          color: purple;
+        }
+      `;
+
+      expect(Comp.componentStyle.isStatic).toEqual(true);
+    });
+
+    it('should mark components with numeric attributes as static', () => {
+      const Comp = styled.div.attrs({
+        style: {
+          color: 'purple',
+        },
+        height: 100,
+      })``;
+
+      expect(Comp.componentStyle.isStatic).toEqual(true);
+    });
+  });
 });