Get rid from dynamicStyleSheet, fix nested dynamic rules

Author: lttb

.flowconfig

@@ -5,5 +5,8 @@
 
 <PROJECT_ROOT>/lib/
 
+[libs]
+node_modules/jss/flow-typed
+
 [options]
 all=true

src/createStyled.js

@@ -21,22 +21,17 @@ const getStyledArgs = (
 }
 
 const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): StyledType => {
-  let staticSheet
-  let dynamicSheet
+  let sheet
 
-  const mountSheets = () => {
-    if (!staticSheet) {
-      staticSheet = jss.createStyleSheet(baseStyles, {
-        meta: 'StaticBaseSheet',
-      }).attach()
-
-      dynamicSheet = jss.createStyleSheet({}, {
+  const mountSheet = () => {
+    if (!sheet) {
+      sheet = jss.createStyleSheet(baseStyles, {
         link: true,
-        meta: 'DynamicComponentSheet',
+        meta: 'sheet',
       }).attach()
     }
 
-    return {staticSheet, dynamicSheet}
+    return sheet
   }
 
   return Object.assign((
@@ -47,8 +42,8 @@ const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): Style
     const {tagName, style} = getStyledArgs(tagNameOrStyledElement)
     const elementStyle = {...style, ...ownStyle}
 
-    return styled({tagName, baseStyles, elementStyle, mountSheets})
-  }, {mountSheets, styles: baseStyles})
+    return styled({tagName, baseStyles, elementStyle, mountSheet})
+  }, {mountSheet, styles: baseStyles})
 }
 
 export default createStyled

src/injectStyled.js

@@ -4,14 +4,14 @@ import composeClasses from './utils/composeClasses'
 import type {StyledType} from './types'
 
 const injectStyled = (styled: StyledType) => (InnerComponent: ReactClass<any>) => {
-  const {staticSheet, dynamicSheet} = styled.mountSheets()
+  const sheet = styled.mountSheet()
 
-  const classNames = Object.keys({...staticSheet.classes, ...dynamicSheet.classes})
+  const classNames = Object.keys(sheet.classes)
 
   const classes = [...classNames]
     .reduce((acc, name) => ({
       ...acc,
-      [name]: composeClasses([staticSheet.classes[name], dynamicSheet.classes[name]]),
+      [name]: composeClasses([sheet.classes[name]]),
     }), {})
 
   return (props: Object) => createElement(InnerComponent, {classes, ...props})

src/styled.js

@@ -1,28 +1,31 @@
 import {Component, createElement} from 'react'
 import {getDynamicStyles} from 'jss'
+import type {
+  Rule,
+} from 'jss/lib/types'
 
 import filterProps from './utils/filterProps'
 import composeClasses from './utils/composeClasses'
 import generateTagName from './utils/generateTagName'
 
 import type {
-  JssStaticSheet,
-  JssDynamicSheet,
+  JssSheet,
   ComponentStyleType,
   StyledElementPropsType
 } from './types'
 
 type StyledArgs = {
   tagName: string,
   elementStyle: ComponentStyleType,
-  mountSheets: Function
+  mountSheet: Function
 }
 
-const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
+const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
   const dynamicStyle = getDynamicStyles(elementStyle)
   const staticTagName = generateTagName(tagName)
 
   const availableDynamicTagNames = []
+  const classMap = {}
 
   return class StyledElement extends Component {
     static tagName: string = tagName
@@ -31,8 +34,10 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
     props: StyledElementPropsType
 
     dynamicTagName = ''
-    staticSheet: JssStaticSheet
-    dynamicSheet: JssDynamicSheet
+
+    sheet: JssSheet
+    cssRules: CSSStyleRule[]
+    rulesIndex: Rule[]
 
     constructor(props: StyledElementPropsType) {
       super(props)
@@ -42,24 +47,55 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
     }
 
     componentWillMount() {
-      Object.assign(this, mountSheets())
+      this.sheet = this.sheet || mountSheet()
+      this.rulesIndex = this.sheet.rules.index
+      this.cssRules = this.cssRules || this.sheet.renderer.getRules() || []
+
+      const rulesTotal = this.rulesIndex.length
+      const cssRulesTotal = this.cssRules.length
 
-      if (!this.staticSheet.getRule(staticTagName)) {
-        this.staticSheet.addRule(staticTagName, elementStyle)
+      if (!this.sheet.getRule(staticTagName)) {
+        this.sheet.addRule(staticTagName, elementStyle)
       }
 
       if (!dynamicStyle) return
 
-      if (!this.dynamicSheet.getRule(this.dynamicTagName)) {
-        this.dynamicSheet.addRule(this.dynamicTagName, dynamicStyle)
+      if (!this.sheet.getRule(this.dynamicTagName)) {
+        this.sheet.addRule(this.dynamicTagName, dynamicStyle)
       }
 
-      this.dynamicSheet.update(this.dynamicTagName, this.props)
+      classMap[this.dynamicTagName] = this.rulesIndex.slice(rulesTotal)
+
+      let cssRule
+      let rule
+      let cssRuleIndex = 0
+      let ruleIndex = 0
+      // nested styles become to flatten rules, so we need to update each nested rule
+      for (ruleIndex; ruleIndex < classMap[this.dynamicTagName].length; ruleIndex++) {
+        rule = classMap[this.dynamicTagName][ruleIndex]
+        cssRule = this.cssRules[cssRulesTotal + cssRuleIndex]
+        if (cssRule && cssRule.selectorText === rule.selectorText) {
+          /**
+           * we need to set cssRule in rule.renderable
+           * @see {@link https://github.com/cssinjs/jss/issues/500}
+           * and we don't want to use link(), because there is no need to iterate over all rules
+           */
+          rule.renderable = cssRule
+          cssRuleIndex++
+        }
+        this.sheet.update(rule.name, this.props)
+      }
     }
 
-    componentWillReceiveProps(nextProps: StyledElementPropsType) {
+    componentWillReceiveProps() {
       if (dynamicStyle) {
-        this.dynamicSheet.update(this.dynamicTagName, nextProps)
+        let rule
+        let ruleIndex = 0
+        // the same rules update as in constructor
+        for (ruleIndex; ruleIndex < classMap[this.dynamicTagName].length; ruleIndex++) {
+          rule = classMap[this.dynamicTagName][ruleIndex]
+          this.sheet.update(rule.name, this.props)
+        }
       }
     }
 
@@ -68,14 +104,12 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
     }
 
     render() {
-      if (!this.staticSheet) return null
-
       const {children, className, ...attrs} = this.props
 
       const props = filterProps(attrs)
       const tagClass = composeClasses([
-        this.staticSheet.classes[staticTagName],
-        this.dynamicSheet.classes[this.dynamicTagName],
+        this.sheet.classes[staticTagName],
+        this.sheet.classes[this.dynamicTagName],
         className
       ])
 

src/types/index.js

@@ -1,12 +1,11 @@
 export type JssStyles = Object
 export type JssStyle = Object
-export type JssStaticSheet = Object
-export type JssDynamicSheet = JssStaticSheet
+export type JssSheet = Object
 
 export type BaseStylesType = JssStyles
 export type ComponentStyleType = JssStyle
 export type StyledType = Function & {
-  mountSheets: Function,
+  mountSheet: Function,
   styles: JssStyles
 }
 export type StyledElementAttrsType = {tagName: string, style: ComponentStyleType}