Skip to content

[v5] Inconsistent CSS order between gatsby develop and gatsby build #24091

Description

@nagiek

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.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    docsImprovements or additions to the documentation.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions