fix static styles wrapping dynamic styles being wrongly identified as…

… static (#3250)
styled-components · Sep 2, 2020 · 792e41d · 792e41d
1 parent df65868
commit 792e41d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/packages/styled-components/src/models/ComponentStyle.js b/packages/styled-components/src/models/ComponentStyle.js
@@ -28,7 +28,9 @@ export default class ComponentStyle {
   constructor(rules: RuleSet, componentId: string, baseStyle?: ComponentStyle) {
     this.rules = rules;
     this.staticRulesId = '';
-    this.isStatic = process.env.NODE_ENV === 'production' && isStaticRules(rules);
+    this.isStatic = process.env.NODE_ENV === 'production' &&
+      (baseStyle === undefined || baseStyle.isStatic) &&
+      isStaticRules(rules);
     this.componentId = componentId;
 
     // SC_VERSION gives us isolation between multiple runtimes on the page at once

diff --git a/packages/styled-components/src/test/staticCaching.test.js b/packages/styled-components/src/test/staticCaching.test.js
@@ -42,6 +42,18 @@ describe('static style caching', () => {
 
       expect(Comp.componentStyle.isStatic).toEqual(false);
     });
+
+    it('should mark a static style wrapping a dynamic style as not static', () => {
+      const Inner = styled.div`
+        color: ${props => props.color};
+      `;
+
+      const Outer = styled(Inner)`
+        padding: 5px;
+      `;
+
+      expect(Outer.componentStyle.isStatic).toEqual(false);
+    });
   });
 
   describe('production mode', () => {
@@ -82,5 +94,17 @@ describe('static style caching', () => {
 
       expect(Comp.componentStyle.isStatic).toEqual(false);
     });
+
+    it('should mark a static style wrapping a dynamic style as not static', () => {
+      const Inner = styled.div`
+        color: ${props => props.color};
+      `;
+
+      const Outer = styled(Inner)`
+        padding: 5px;
+      `;
+
+      expect(Outer.componentStyle.isStatic).toEqual(false);
+    });
   });
 });