Fix static caching of dynamic attrs

styled-components · Oct 9, 2017 · f4184ce · f4184ce
1 parent e99bc6a
commit f4184ce
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/models/ComponentStyle.js b/src/models/ComponentStyle.js
@@ -5,7 +5,7 @@ import type { RuleSet, NameGenerator, Flattener, Stringifier } from '../types'
 import StyleSheet from './StyleSheet'
 import isStyledComponent from '../utils/isStyledComponent'
 
-const isStaticRules = (rules: RuleSet): boolean => {
+const isStaticRules = (rules: RuleSet, attrs?: Object): boolean => {
   for (let i = 0; i < rules.length; i += 1) {
     const rule = rules[i]
 
@@ -19,6 +19,16 @@ const isStaticRules = (rules: RuleSet): boolean => {
     }
   }
 
+  if (attrs !== undefined) {
+    // eslint-disable-next-line guard-for-in, no-restricted-syntax
+    for (const key in attrs) {
+      const value = attrs[key]
+      if (typeof value === 'function') {
+        return false
+      }
+    }
+  }
+
   return true
 }
 
@@ -34,9 +44,9 @@ export default (nameGenerator: NameGenerator, flatten: Flattener, stringifyRules
     lastClassName: ?string
 
 
-    constructor(rules: RuleSet, componentId: string) {
+    constructor(rules: RuleSet, attrs?: Object, componentId: string) {
       this.rules = rules
-      this.isStatic = isStaticRules(rules)
+      this.isStatic = isStaticRules(rules, attrs)
       this.componentId = componentId
       if (!StyleSheet.instance.hasInjectedComponent(this.componentId)) {
         const placeholder = process.env.NODE_ENV !== 'production' ? `.${componentId} {}` : ''

diff --git a/src/models/StyledComponent.js b/src/models/StyledComponent.js
@@ -223,6 +223,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
 
     const componentStyle = new ComponentStyle(
       extendingRules === undefined ? rules : extendingRules.concat(rules),
+      attrs,
       styledComponentId,
     )