When using Gatsby, the CSS order is inconsistent.
The Component Styles (i.e. Mui-Appbar) loaded after Box sx styles in gatsby build, but before ****Box sx styles in gatsby develop.
Current Behavior 😯
When running gatsby develop, the style order is as follows:
<style data-jss data-meta="CssBaseline">...</style>
<style data-emotion="css" data-s>...</style> (MuiBox)
<style data-emotion-css="abcdef">...</style>
However, when running gatsby build, the style order is as follows:
<style data-emotion="css abcdef-MuiBox">...</style>
<style data-emotion-css="abcdef">...</style>
<style data-jss data-meta="CssBaseline">...</style>
Additionally, the component CSS seems to "flicker" onto the screen (i.e. the correct CSS order appears at first, but then the incorrect order is applied!).
My only thoughts are because the Box Style appears inlined with the HTML in the body in gatsby build, but I don't really know.
<div><style data-emotion="css abcdef-MuiBox">...</style>...</div>
Expected Behavior 🤔
The order should remain the same, regardless of build or develop.
Steps to Reproduce 🕹
gatsby-config:
gatsby-plugin-material-ui,
gatsby-plugin-emotion,
package.json
"@emotion/react": "^11.1.2",
"@emotion/styled": "^11.0.0",
"@material-ui/core": "^5.0.0-alpha.18",
"gatsby-plugin-emotion": "5.1.0",
"gatsby-plugin-material-ui": "^2.1.10",
"react": "17.0.1",
Your Environment 🌎
System:
OS: Windows 10 10.0.17134
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Memory: 2.64 GB / 7.86 GB
Binaries:
Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD
Managers:
pip3: 20.1.1 - ~\AppData\Local\Programs\Python\Python38\Scripts\pip3.EXE
Utilities:
Git: 2.20.1. - C:\Users\ashallke\AppData\Local\Programs\Git\cmd\git.EXE
IDEs:
Visual Studio: 15.9.28307.53 (Visual Studio Professional 2017)
Languages:
Python: 3.8.5 - C:\Users\ashallke\AppData\Local\Programs\Python\Python38\python.EXE
Databases:
PostgreSQL: 10.7 - C:\Program Files (x86)\PostgreSQL\10\bin\postgres.EXE
Browsers:
Chrome: 87.0.4280.88
Edge: Spartan (42.17134.1098.0)
Internet Explorer: 11.0.17134.1
When using Gatsby, the CSS order is inconsistent.
The Component Styles (i.e. Mui-Appbar) loaded after Box sx styles in
gatsby build, but before ****Box sx styles ingatsby develop.Current Behavior 😯
When running gatsby develop, the style order is as follows:
However, when running gatsby build, the style order is as follows:
Additionally, the component CSS seems to "flicker" onto the screen (i.e. the correct CSS order appears at first, but then the incorrect order is applied!).
My only thoughts are because the Box Style appears inlined with the HTML in the body in
gatsby build, but I don't really know.<div><style data-emotion="css abcdef-MuiBox">...</style>...</div>Expected Behavior 🤔
The order should remain the same, regardless of build or develop.
Steps to Reproduce 🕹
gatsby-config:
gatsby-plugin-material-ui,gatsby-plugin-emotion,package.json
"@emotion/react": "^11.1.2",
"@emotion/styled": "^11.0.0",
"@material-ui/core": "^5.0.0-alpha.18",
"gatsby-plugin-emotion": "5.1.0",
"gatsby-plugin-material-ui": "^2.1.10",
"react": "17.0.1",
Your Environment 🌎
System:
OS: Windows 10 10.0.17134
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Memory: 2.64 GB / 7.86 GB
Binaries:
Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD
Managers:
pip3: 20.1.1 - ~\AppData\Local\Programs\Python\Python38\Scripts\pip3.EXE
Utilities:
Git: 2.20.1. - C:\Users\ashallke\AppData\Local\Programs\Git\cmd\git.EXE
IDEs:
Visual Studio: 15.9.28307.53 (Visual Studio Professional 2017)
Languages:
Python: 3.8.5 - C:\Users\ashallke\AppData\Local\Programs\Python\Python38\python.EXE
Databases:
PostgreSQL: 10.7 - C:\Program Files (x86)\PostgreSQL\10\bin\postgres.EXE
Browsers:
Chrome: 87.0.4280.88
Edge: Spartan (42.17134.1098.0)
Internet Explorer: 11.0.17134.1