Fix SSR for Hooks based implementation

changelog.md

@@ -4,8 +4,13 @@ Since you are interested in what happens next, in case, you work for a for-profi
 
 ---
 
+### Breaking Changes
+
+- [jss] SheetsRegistry.toString(options) will now return all sheets by default, no matter detached or attached. You can specify which one you want by using the option `registry.toString({attached: true})` ([1140](https://github.com/cssinjs/jss/pull/1140))
+
 ### Bug fixes
 
+- [react-jss] SSR for the hooks based API will now work with the registry as expected ([1140](https://github.com/cssinjs/jss/pull/1140))
 - [react-jss] When id options passed to JssProvider, we need to create a new `generateId` function ([#1147](https://github.com/cssinjs/jss/pull/1147))
 
 ### Improvements

docs/jss-api.md

@@ -119,15 +119,19 @@ You need to have the [jss-plugin-global](https://github.com/cssinjs/jss/tree/mas
 `SheetsRegistry`
 
 When rendering on the server, you will need to get all rendered styles as a CSS string.
-The `SheetsRegistry` class allows you to **manually** aggregate and stringify them. Read [more about SSR](ssr.md).
+The `SheetsRegistry` class allows you to aggregate and stringify them. Read [more about SSR](ssr.md).
+
+In case you are using the `SheetsRegistry` in the browser and you want to get Style Sheets which are `attached` or `detached` only, you can use the option `attached`.
 
 ```javascript
 import jss, {SheetsRegistry} from 'jss'
 
 const sheets = new SheetsRegistry()
 const sheet = jss.createStyleSheet()
 sheets.add(sheet)
-sheets.toString() // Returns CSS of all attached Style Sheets together.
+sheets.toString() // Returns all Style Sheets as a CSS string.
+sheets.toString({attached: true}) // Returns all attached Style Sheets as a CSS string.
+sheets.toString({attached: false}) // Returns all detached Style Sheets as a CSS string.
 ```
 
 ## Style Sheets Manager

packages/css-jss/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/css-jss.js": {
-    "bundled": 57587,
-    "minified": 20344,
-    "gzipped": 6828
+    "bundled": 57623,
+    "minified": 20360,
+    "gzipped": 6833
   },
   "dist/css-jss.min.js": {
-    "bundled": 56833,
-    "minified": 19885,
-    "gzipped": 6612
+    "bundled": 56869,
+    "minified": 19901,
+    "gzipped": 6617
   },
   "dist/css-jss.cjs.js": {
     "bundled": 2919,

packages/jss-plugin-vendor-prefixer/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/jss-plugin-vendor-prefixer.js": {
-    "bundled": 17716,
-    "minified": 5671,
-    "gzipped": 2211
+    "bundled": 17752,
+    "minified": 5687,
+    "gzipped": 2218
   },
   "dist/jss-plugin-vendor-prefixer.min.js": {
-    "bundled": 17716,
-    "minified": 5671,
-    "gzipped": 2211
+    "bundled": 17752,
+    "minified": 5687,
+    "gzipped": 2218
   },
   "dist/jss-plugin-vendor-prefixer.cjs.js": {
     "bundled": 1375,

packages/jss-preset-default/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/jss-preset-default.js": {
-    "bundled": 54831,
-    "minified": 19578,
-    "gzipped": 6473
+    "bundled": 54867,
+    "minified": 19594,
+    "gzipped": 6478
   },
   "dist/jss-preset-default.min.js": {
-    "bundled": 54077,
-    "minified": 19119,
-    "gzipped": 6260
+    "bundled": 54113,
+    "minified": 19135,
+    "gzipped": 6265
   },
   "dist/jss-preset-default.cjs.js": {
     "bundled": 1329,

packages/jss-starter-kit/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/jss-starter-kit.js": {
-    "bundled": 70373,
-    "minified": 29617,
-    "gzipped": 9105
+    "bundled": 70409,
+    "minified": 29633,
+    "gzipped": 9110
   },
   "dist/jss-starter-kit.min.js": {
-    "bundled": 69619,
-    "minified": 29159,
-    "gzipped": 8899
+    "bundled": 69655,
+    "minified": 29175,
+    "gzipped": 8905
   },
   "dist/jss-starter-kit.cjs.js": {
     "bundled": 2592,

packages/jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "dist/jss.js": {
-    "bundled": 59557,
-    "minified": 22082,
-    "gzipped": 6640
+    "bundled": 60547,
+    "minified": 22448,
+    "gzipped": 6767
   },
   "dist/jss.min.js": {
-    "bundled": 58180,
-    "minified": 21313,
-    "gzipped": 6289
+    "bundled": 59170,
+    "minified": 21679,
+    "gzipped": 6408
   },
   "dist/jss.cjs.js": {
-    "bundled": 54614,
-    "minified": 23883,
-    "gzipped": 6657
+    "bundled": 55336,
+    "minified": 24340,
+    "gzipped": 6756
   },
   "dist/jss.esm.js": {
-    "bundled": 54098,
-    "minified": 23459,
-    "gzipped": 6569,
+    "bundled": 54804,
+    "minified": 23905,
+    "gzipped": 6667,
     "treeshaked": {
       "rollup": {
-        "code": 19372,
-        "import_statements": 281
+        "code": 19676,
+        "import_statements": 352
       },
       "webpack": {
-        "code": 20794
+        "code": 21143
       }
     }
   }

packages/jss/src/SheetsRegistry.js

@@ -56,10 +56,16 @@ export default class SheetsRegistry {
   /**
    * Convert all attached sheets to a CSS string.
    */
-  toString(options?: ToCssOptions): string {
-    return this.registry
-      .filter(sheet => sheet.attached)
-      .map(sheet => sheet.toString(options))
-      .join('\n')
+  toString({attached, ...options}: {attached?: boolean, ...ToCssOptions} = {}): string {
+    let css = ''
+    for (let i = 0; i < this.registry.length; i++) {
+      const sheet = this.registry[i]
+      if (attached != null && sheet.attached !== attached) {
+        continue
+      }
+      if (css) css += '\n'
+      css += sheet.toString(options)
+    }
+    return css
   }
 }

packages/jss/src/plugins/conditionalRule.js

@@ -69,6 +69,8 @@ export class ConditionalRule implements ContainerRule {
    * Generates a CSS string.
    */
   toString(options?: ToCssOptions = defaultToStringOptions): string {
+    if (options.indent == null) options.indent = defaultToStringOptions.indent
+    if (options.children == null) options.children = defaultToStringOptions.children
     if (options.children === false) {
       return `${this.key} {}`
     }

packages/jss/src/plugins/keyframesRule.js

@@ -69,6 +69,8 @@ export class KeyframesRule implements ContainerRule {
    * Generates a CSS string.
    */
   toString(options?: ToCssOptions = defaultToStringOptions): string {
+    if (options.indent == null) options.indent = defaultToStringOptions.indent
+    if (options.children == null) options.children = defaultToStringOptions.children
     if (options.children === false) {
       return `${this.at} ${this.id} {}`
     }

packages/jss/tests/integration/sheetsRegistry.js

@@ -80,8 +80,8 @@ describe('Integration: sheetsRegistry', () => {
   })
 
   describe('.toString()', () => {
-    it('should convert to CSS string', () => {
-      const sheet1 = jss.createStyleSheet({a: {color: 'red'}}).attach()
+    it('should stringify all', () => {
+      const sheet1 = jss.createStyleSheet({a: {color: 'red'}})
       const sheet2 = jss.createStyleSheet({a: {color: 'blue'}}).attach()
       sheets.add(sheet1)
       sheets.add(sheet2)
@@ -94,13 +94,24 @@ describe('Integration: sheetsRegistry', () => {
         }
       `)
     })
+    it('should stringify detached sheets', () => {
+      const sheet1 = jss.createStyleSheet({a: {color: 'red'}})
+      const sheet2 = jss.createStyleSheet({a: {color: 'blue'}}).attach()
+      sheets.add(sheet1)
+      sheets.add(sheet2)
+      expect(sheets.toString({attached: false})).to.be(stripIndent`
+        .a-id {
+          color: red;
+        }
+      `)
+    })
 
-    it('should not stringify detached sheets', () => {
+    it('should stringify attached sheets', () => {
       const sheet1 = jss.createStyleSheet({a: {color: 'red'}}).attach()
       const sheet2 = jss.createStyleSheet({a: {color: 'blue'}})
       sheets.add(sheet1)
       sheets.add(sheet2)
-      expect(sheets.toString()).to.be(stripIndent`
+      expect(sheets.toString({attached: true})).to.be(stripIndent`
         .a-id {
           color: red;
         }

packages/react-jss/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/react-jss.js": {
-    "bundled": 168271,
-    "minified": 58142,
-    "gzipped": 18993
+    "bundled": 168307,
+    "minified": 58158,
+    "gzipped": 18997
   },
   "dist/react-jss.min.js": {
-    "bundled": 111603,
-    "minified": 41537,
-    "gzipped": 14077
+    "bundled": 111639,
+    "minified": 41553,
+    "gzipped": 14082
   },
   "dist/react-jss.cjs.js": {
     "bundled": 26210,

packages/react-jss/src/JssProvider.test.js

@@ -252,29 +252,30 @@ describe('React-JSS: JssProvider', () => {
       }
 
       const renderer = TestRenderer.create(<MyComponent value={false} />)
-      // TODO: Does this make sense?
-      expect(registry.toString()).to.be(stripIndent`
+      // Filter detached sheets because there is no conditional rendering
+      // on the server.
+      expect(registry.toString({attached: true})).to.be(stripIndent`
         .a-0 {
           color: green;
         }
       `)
 
       renderer.update(<MyComponent value />)
-      expect(registry.toString()).to.be(stripIndent`
+      expect(registry.toString({attached: true})).to.be(stripIndent`
         .a-1 {
           color: red;
         }
       `)
 
       renderer.update(<MyComponent value={false} />)
-      expect(registry.toString()).to.be(stripIndent`
+      expect(registry.toString({attached: true})).to.be(stripIndent`
         .a-0 {
           color: green;
         }
       `)
 
       renderer.update(<MyComponent value />)
-      expect(registry.toString()).to.be(stripIndent`
+      expect(registry.toString({attached: true})).to.be(stripIndent`
         .a-1 {
           color: red;
         }

packages/react-jss/test-utils/createBasicTests.js

@@ -1,9 +1,10 @@
 /* eslint-disable global-require, react/prop-types, no-underscore-dangle */
-
 import expect from 'expect.js'
 import React from 'react'
 import {spy} from 'sinon'
 import TestRenderer from 'react-test-renderer'
+import {renderToString} from 'react-dom/server'
+import {stripIndent} from 'common-tags'
 
 import {JssProvider, SheetsRegistry} from '../src'
 
@@ -26,25 +27,42 @@ export default ({createStyledComponent}) => {
     console.error.restore()
   })
 
-  describe('reusing style sheets', () => {
-    it('should reuse one static sheet for many elements and detach sheet', () => {
-      const registry = new SheetsRegistry()
-      const MyComponent = createStyledComponent({
-        button: {color: 'red'}
-      })
+  it('should reuse one static sheet for many elements and detach sheet', () => {
+    const registry = new SheetsRegistry()
+    const MyComponent = createStyledComponent({
+      button: {color: 'red'}
+    })
 
-      TestRenderer.act(() => {
-        TestRenderer.create(
-          <JssProvider registry={registry}>
-            <MyComponent />
-            <MyComponent />
-            <MyComponent />
-          </JssProvider>
-        )
-      })
+    TestRenderer.act(() => {
+      TestRenderer.create(
+        <JssProvider registry={registry}>
+          <MyComponent />
+          <MyComponent />
+          <MyComponent />
+        </JssProvider>
+      )
+    })
+
+    expect(registry.registry.length, 1)
+  })
 
-      expect(registry.registry.length, 1)
+  it('should register style sheets when `renderToString`', () => {
+    const registry = new SheetsRegistry()
+    const MyComponent = createStyledComponent({
+      button: {color: 'red'}
     })
+    const generateId = () => 'id'
+    renderToString(
+      <JssProvider registry={registry} generateId={generateId}>
+        <MyComponent />
+      </JssProvider>
+    )
+
+    expect(registry.toString()).to.be(stripIndent`
+      .id {
+        color: red;
+      }
+    `)
   })
 
   describe('preserving source order', () => {