Un-mount and re-mount JssProvider

Expected behavior: Expect dynamically generated style names and statically generated style names to be unique

Describe the bug: I have a component wrapped by a JssProvider and Theme provider eg.

const jss = createJss()
jss.use(global(), nested(), extend(), compose(), camelCase(), vendorPrefixer())

      <JssProvider classNamePrefix={this.props.classNamePrefix} jss={jss}>
        <ThemeProvider theme={this.props.theme}>
          {this.props.children}
        </ThemeProvider>
      </JssProvider>

When I unmount this component and re-mount this component, any dynamically generated styles in the child components now have style names that clash with the original statically generated styles.

Codesandbox link: Only happens in production. Will try to write an example soon

Versions:

• jss: “jss”: “^9.8.1”, “jss-camel-case”: “^6.1.0”, “jss-compose”: “^5.0.0”, “jss-global”: “^3.0.0”, “jss-nested”: “^6.0.1”, “jss-vendor-prefixer”: “^8.0.1”,
• Browser [e.g. chrome, safari]: latest Chrome (Version 70.0.3538.77 (Official Build) (64-bit) ), latest Firefox (63.0 (64-bit))
• OS [e.g. Windows, macOS]: Ubuntu 18.10

[kof]

Do we have a test that makes sure this keeps working?

[scaredcat]

It seems v10 of react-jss has the issue fixed regardless of whether re-using generateId or not: Previously with v8 the static ID generator was re-used but the dynamic style Id started from scratch…

v8

First mount Remount Notice how the dynamic style classes have an ID generated that clash with the static styles on the re-mount. At this stage I’m not sure what was the cause of this, or why the same IDs for static styles were used.

v10

First mount Remount In v10 regardless of whether generateId was passed in as a prop, it seems to keep around the pointer to the generator used when re-mounting and increment both the static and dymanic style IDs.