Material-ui: [docs] CSS injection order guidance doesn't work for create-react-app production build

Created on 17 Jan 2018 · 3Comments · Source: mui-org/material-ui

The docs (https://material-ui-next.com/customization/css-in-js/#css-injection-order) suggest using a HTML Comment Node as a custom jss insertion point to control the order in which CSS is injected.

This does not work if users strip out HTML comments as part of their build process.

create-react-app, which currently strips HTML comments when creating the production build, can only be reconfigured to not strip comments if "ejected", which is undesirable for many users.

A work-around is to reference a node other than a comment node as the jss insertion point.

const insertionPoint = document.getElementById('insertion-point-jss')
jss.setup({ insertionPoint })

  <head>
    <noscript id="insertion-point-jss"></noscript>
    <title>I am the last element</title>
  </head>

As create-react-app + material-ui is a pretty common combination I think it could be worth highlighting this problem in the docs, or providing guidance that doesn't rely on html comments.

Thoughts on a less hacky solution?

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

If docs are followed CSS injection order should be honoured when using create-react-app

Current Behavior

If HTML Comments are stripped (eg by create-react-app default config) then injection order is broken.

Steps to Reproduce (for bugs)

in a react-scripts app

yarn run build

Context

https://github.com/styled-components/styled-components/issues/860#issuecomment-357964487

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.x |
| React | x.x |
| browser | x.x |
| create-react-app | 1.x |

docs

Source

PTaylour

Most helpful comment

I looked around for a solution until I finally got into the codesandbox linked in the docs, and then noticed this two extra lines (which are missing in the docs):

const styleNode = document.createComment("insertion-point-jss");
document.head.insertBefore(styleNode, document.head.firstChild);

This did the trick for me.

I'm all in for a better solution. But it would do a great difference to add to the docs the scenario where the comments are stripped out... and this two lines would make a difference.

obedcorrales on 18 Jan 2018

👍4 ❤2

All 3 comments

I think it could be worth highlighting this problem in the docs, or providing guidance that doesn't rely on html comments.

@PTaylour I agree. We have been documenting the following solution: https://material-ui-next.com/guides/interoperability/#styled-components (with a codesandbox). Does it help? Do you think we can do better?

oliviertassinari on 17 Jan 2018

@oliviertassinari Comparing the two, @PTaylour's solution seems more elegant.

mbrookes on 17 Jan 2018

I looked around for a solution until I finally got into the codesandbox linked in the docs, and then noticed this two extra lines (which are missing in the docs):

const styleNode = document.createComment("insertion-point-jss");
document.head.insertBefore(styleNode, document.head.firstChild);

This did the trick for me.

I'm all in for a better solution. But it would do a great difference to add to the docs the scenario where the comments are stripped out... and this two lines would make a difference.

obedcorrales on 18 Jan 2018

👍4 ❤2

Was this page helpful?

0 / 5 - 0 ratings