Non-Bug: JSS server rendering produces font families with escaped quote characters.

Function createMuiTheme() created the font families with escaped " characters:

fontFamily: "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif" which is converted to " by JSS function SheetsRegistry.toString() instead of ", and this style will be ignore during initial render by browser causing the font to flip.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

• output of createMuiTheme():

  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'

// or
  fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif"

• style written to index.html

<style id="jss-server-side">html {
    ...
.jss49 {
    ....
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

Current Behavior

• output of createMuiTheme():

  fontFamily: "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif"

• style written to index.html

<style id="jss-server-side">html {
    ...
.jss49 {
    ....
    font-family: &quot;Roboto&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, sans-serif;
}

This style will be ignored by the browser and replaced when the hydration completed with the correct font, causing the screen to flip.

Steps to Reproduce

Please run createMuiTheme() and observe the result.

I suggest this is a bug because material-ui decision to use JSS should mean it should provide what JSS need to work.

• SSR rendering part

  renderToHtml: (render, Comp, meta) => {
    const sheetsRegistry = new SheetsRegistry() 
    const sheetsManager = new Map() 

    const theme = createMuiTheme()  // <-- this is the problem
\\  the font families were created with escaped quote characters: 
\\ `fontFamily: "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif"`

    const generateClassName = createGenerateClassName()
    const html = render(
      <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
        <MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
          <Comp />
        </MuiThemeProvider>
      </JssProvider>
    )

    meta.jssStyles = sheetsRegistry.toString()  // <-- this will convert escaped quote characters \" to  &quot; instead of "

    return html
  },

–> Link: N/A

Context

initial font rendered by the client is incorrect, causing the screen to flip.

Your Environment

Tech	Version
Material-UI	v3.1.0
React	16.5.1
Browser	Google Chrome v69.0.3497.100 (64-bit)
TypeScript	N/A
etc.

[oliviertassinari]

You can check out #12827 for the support of CSS variables in the theme. Bulma, Bootstrap, Material-UI are competing libraires. There is little use cases for using two at the same time. I agree on your point regarding CSS-in-JS. In the next style iterations I want to allow people to use different styles backend, JSS, emotion, etc.

[awidjaja]

@oliviertassinari

Yes, I am currently injecting muiTheme through emotion theme provider.

Currently each component library brings it’s own css-in-js framework (jss, emotion, styled-components, etc.) and theme provider/consumer. Even if you only need to use one component, you’ll have to add all the dependencies and add clutter to your react dom tree, and passing/sync the theme. This lead to higher development and maintenance efforts, higher bundle size, higher client’s computation and memory footprint.

Imagine that one can have a universal theme of CSS custom variables that are automatically accessible by all components:

• input

  const theme = {
    palette: {
      primary: '#aabbcc'
    }
  }
  const muiTheme = createMuiTheme(theme)

• possible output of globally injected CSS variables:

` : root {
  --palette-primary-main: #aabbcc
  --palette-primary-100: ...
  ...other variables
}

• Developer can then use a single framework to inject the style, e.g. using emotion:

const StyledButton = styled(Button)`
  background-color: var(--palette-primary-main, #ddeeff);
`

• or override global css variables to for specific component and it’s children

const StyledButton2 = styled(StyledButton)`
  --palette-primary-main: var(--palette-accent-200);
  background-color: var(--palette-primary-main, #ddeeff);
`

• Imagine if all component library (in the future) can accept a universal CSS variable theme, one can do:

  import { Button } from '@material-ui/core'
  ...
  <Button primary>Click Me!</Button>
   // the right CSS variables is auto assigned to the component's style

The CSS variables can also be injected to component using css/sass/css-modules (e.g. bootstrap, bulma. etc.).

Isn’t that powerful?