Incorrect "Rule is not linked" warning on server when using function rules

Expected behavior: No warning.

Describe the bug: All function rules are triggering the following warning when run on the server: Warning: [JSS] Rule is not linked. Missing sheet option “link: true”.

I’ve traced the problem back to the fact that in Jss.js, options.Renderer is set to null when not in the browser. This eventually leads to the code in BaseStyleRule.prop() falling through to the warning because this.renderable and this.renderer are not defined at styleRule.js#L71.

The warning is incorrect: the sheet option link is actually true, and the fact that this.renderable and this.renderer are not defined is correct because on the server, we don’t need anything to happen in prop() because we’ll call toString() later the render the CSS.

I would contribute a test to replicate the bug, but I don’t think it’s possible with the existing karma setup because we need 'is-in-browser' to report false to trigger the bug. So, I’ve written a jest test (see link below) to demonstrate.

Codesandbox link: https://repl.it/@felthy/JssInvalidWarningDuringSSR

Versions:

• jss: 10.0.0-alpha.20

jest test source:

/**
 * @jest-environment node
 */
import warning from 'tiny-warning'
import {create, SheetsRegistry, SheetsManager} from 'jss/dist/jss.cjs'
import functionPlugin from 'jss-plugin-rule-value-function/dist/jss-plugin-rule-value-function.cjs'
import isInBrowser from 'is-in-browser'

jest.mock('tiny-warning')

describe('React-JSS: rendering in an SSR context', () => {
  it('should render a dynamic rule without warnings', () => {
    expect(isInBrowser).toBe(false)

    const jss = create().use(functionPlugin())
    const sheet = jss.createStyleSheet({
      rule: () => ({
        color: 'red'
      })
    }, {
      link: true
    }).attach()
    sheet.update({})
    const css = sheet.toString()

    expect(css).toContain('color: red;')
    expect(warning).not.toHaveBeenCalled()
  })
})

[hanayashiki]

Still get this annoying warning on the server side. Any solutions?

[benistary]

Exact problem. Any news?

Next 12.1.0 React-jss 10.9.0