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

package.json

@@ -54,8 +54,10 @@
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.23.0",
+    "common-tags": "^1.4.0",
     "copyfiles": "^1.2.0",
     "coveralls": "^2.13.0",
+    "enzyme": "^2.8.2",
     "eslint": "^3.13.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-config-jss": "^3.0.0",

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) {
       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, nextProps)
+        }
       }
     }
 
@@ -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/tests/.eslintrc

@@ -2,3 +2,4 @@ rules:
   import/no-extraneous-dependencies:
     - error
     - devDependencies: true
+  react/require-default-props: off

src/tests/App.jsx

@@ -31,15 +31,15 @@ export default (styled: StyledType) => {
     margin: ({margin = 0}) => margin,
   })
 
-  return () => (
+  return ({margin = 10}: {margin?: number}) => (
     <App>
       <Header>
         <Title>Title</Title>
       </Header>
 
       <Section data-name="content">
         <Button>primitive test</Button>
-        <Button margin={10}>dynamic primitive test</Button>
+        <Button margin={margin}>dynamic primitive test</Button>
       </Section>
 
       <AnotherSection>Another section</AnotherSection>

src/tests/__snapshots__/index.spec.jsx.snap

@@ -1,4 +1,4 @@
-exports[`test renders correctly App with default Styled 1`] = `
+exports[`base rendering tests renders correctly App with default Styled 1`] = `
 <div
   className="div-9-0-9">
   <header
@@ -27,7 +27,7 @@ exports[`test renders correctly App with default Styled 1`] = `
 </div>
 `;
 
-exports[`test renders correctly App with default styled 1`] = `
+exports[`base rendering tests renders correctly App with default styled 1`] = `
 <div
   className="div-1-0-0">
   <header
@@ -56,7 +56,7 @@ exports[`test renders correctly App with default styled 1`] = `
 </div>
 `;
 
-exports[`test renders correctly App with injectStyled 1`] = `
+exports[`base rendering tests renders correctly App with injectStyled 1`] = `
 <div
   className="root-0-17">
   <div

src/tests/index.spec.jsx

@@ -6,42 +6,43 @@ import styled, {Styled, injectStyled} from '../'
 
 import CreateApp from './App'
 
+describe('base rendering tests', () => {
+  it('renders correctly App with default styled', () => {
+    const App = CreateApp(styled)
+    const tree = renderer.create(<App />).toJSON()
 
-it('renders correctly App with default styled', () => {
-  const App = CreateApp(styled)
-  const tree = renderer.create(<App />).toJSON()
-
-  expect(tree).toMatchSnapshot()
-})
-
-it('renders correctly App with default Styled', () => {
-  const customStyled = Styled({
-    baseButton: {
-      color: 'red',
-    },
+    expect(tree).toMatchSnapshot()
   })
 
-  const App = CreateApp(customStyled)
-  const tree = renderer.create(<App />).toJSON()
+  it('renders correctly App with default Styled', () => {
+    const customStyled = Styled({
+      baseButton: {
+        color: 'red',
+      },
+    })
 
-  expect(tree).toMatchSnapshot()
-})
+    const App = CreateApp(customStyled)
+    const tree = renderer.create(<App />).toJSON()
 
-it('renders correctly App with injectStyled', () => {
-  const customStyled = Styled({
-    root: {
-      fontSize: 16
-    },
-    baseButton: {
-      color: 'red',
-    },
+    expect(tree).toMatchSnapshot()
   })
 
-  const App = CreateApp(customStyled)
-  const StyledApp = injectStyled(customStyled)(({classes}) => (
-    <div className={classes.root}><App /></div>
-  ))
-  const tree = renderer.create(<StyledApp />).toJSON()
-
-  expect(tree).toMatchSnapshot()
+  it('renders correctly App with injectStyled', () => {
+    const customStyled = Styled({
+      root: {
+        fontSize: 16
+      },
+      baseButton: {
+        color: 'red',
+      },
+    })
+
+    const App = CreateApp(customStyled)
+    const StyledApp = injectStyled(customStyled)(({classes}) => (
+      <div className={classes.root}><App /></div>
+    ))
+    const tree = renderer.create(<StyledApp />).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
 })

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}