Gatsby: order of styles

[jole78]

Hey,

thanks for a great library...loving it!

However, got a question.

I'm building site with styled-components and semantic-ui (react). The problem I'm facing is that I'm importing the semantic-ui css in my layouts/index.js file and that's all working great but when I then define some styled components that sometimes take a component from semantic-ui and alters it my styled-component styles get appended before the semantic-ui css in the head tag, thus they take precedence over the styled component ones.

Is there something I can do about that or am I going at this in the wrong way somehow?

[kristojorg]

I am also running into a similar issue. I'm using gatsby-plugin-styled-components and gatsby-plugin-jss (the latter for material-ui), and the jss styles are injected after the styled-components, thus making them take precedence. I want the opposite, and it doesn't seem to change anything if I reorder them in gatsby-config

[KyleAMathews]

I'm pretty sure the order of the injected css follows the order of your plugin declarations. Try moving that around.

[jole78]

I kinda solved my problem. The thing is I was importing a standard css file, e.g. import "semantic-ui-css/lib/style.css" (or what not) in my layout component. Maybe it was just me being used to webpack and extract text plugin but those "css plain imports" I had in previous react/webpack projects just put into css files that I was in charge of when and where they got imported in my html (e.g. a vendor.css or something). What struck me here since I was building public facing site was that could just use semantic-ui css from their CDN and just do a plain old in html.js which of course works just as fine. And then I could use my styled-comps in the way I wanted to. So...maybe a bad design/thinking on my part perhaps....dunno?? Maybe there's a question/discussion in here somewhere on where plain import "somestyle.css" should really end up the outputted html...??

[tomholford]

Same thing here - importing normalize.css as well as my own styles like this:

require('normalize.css')
require('prismjs/themes/prism-twilight.css')
import './index.sass';

but the output css has normalize concatenated at the end, overriding my custom styling :(

[arielger]

Hey I just ran into a bug with the order of the styles using styled-jsx global tag and importing a .css file.

I'm importing bootstrap-reboot.min.css from bootstrap 4.0.0-beta.3. This file has a reset for the color of the a tags:

a {
    color: #007bff;
}

In the IndexPage I'm adding the following tag:

<style jsx global>{`
      a {
        color: red;
      }
    `}</style>

The styled-jsx styles are taking precedence in development mode (the a tag is red) but when I deploy the site the bootstrap styles are taking precedence.

You can check this in this project:
https://github.com/arielger/gatsby-styled-jsx-bug/blob/master/src/pages/index.js

I also deployed the sample project to Netlify:
https://gatsby-styled-jsx-bug.netlify.com/

Edit: After following this advice https://github.com/gatsbyjs/gatsby/issues/1994#issuecomment-351767141 from @KyleAMathews my site is working 😄. I would like to know why we are importing the default CSS after the css-in-js instead of reversing it by default?

The error that appears only in production seems to be related to Webpack. More info in this issue: https://github.com/webpack/webpack/issues/215#issuecomment-38894429

[gilesbutler]

Seeing this issue too. Followed the advice and switch...

{css}
{this.props.headComponents}

But still seeing the css output in the wrong order.

My styled components appear first then the sass imports are appearing last which ends up with normalize.css overriding everything.

[Whipgit]

I'm having a similar problem. Is there any known fix?

[tremby]

I worked around this issue just now by installing gatsby-plugin-postcss along with the postcss-import plugin.

There was only a critical order for two of my stylesheets -- normalize.css and my global.css stylesheet. The above plugins allow me to move the import of the normalize.css stylesheet into the top of my global.css one.

[akoolenbourke]

I have just discovered this issue too but in a slightly different scenario. My project is based off the default starter and in the Helmet tag of layout.js, I added a style sheet like so

link={[ { rel: 'stylesheet', href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' } ]}

When using develop, the stylesheet ends up as the last stylesheet in the head, which has consequences of not showing the correct styles (In this case the font height). When I build then it's put at the top and everything works fine.

I haven't tried it but I assume I can switch to a non CDN based bootstrap css and then import it but I'd prefer not to.

[akoolenbourke]

Any news on this issue? I have just built a site with bootstrap that imports the bootstrap css where needed (layouts and pages) and production builds are rearranging the import order in the final CSS so bootstrap override what should be MY overrides.

[codejamninja]

I'm having a similar issue at #9908

[axelboc]

In case it helps someone, here is what happened to me. I have a single import in my layout to an index.css file. When I had ordering issues with normalize.css coming after my base styles, this index used to have:

@import "~normalize.css/normalize.css";
@import "./base.css";

The tilde ~ is for webpack's css-loader to look into node_modules. This is equivalent to requiring from JS with require('normalize.css'). Anyway, so I think css-loader has (or used to have) ordering issues when importing stylesheets from modules. Not sure it's still the case.

I worked around this in Gatsby v1 by importing normalize.css with a relative import:

@import "../../node_modules/etc."

In Gatsby v2, @tremby's solution with postcss-import works like a charm:

@import "normalize.css";
@import "./base.css";

Only problem left for me is that Gatsby still seems to inline some "critical" components' styles (e.g. header/footer) before normalize.css and my base styles. I'm lucky that this has no effect for me thanks to specificity, but it could be a problem for others.

[silvenon]

You probably meant @import url("..."), not @import "...", right?

[axelboc]

Hmm, no, just @import "...". I think the spec supports both syntaxes. Not sure about postcss-import.

[silvenon]

Oh, I thought @import "..." was exclusively a postcss-import/Sass thing. Nevermind.

[FMCorz]

I ran into this issue as well, I solved it by importing my main CSS file in gastby-browser.js as described in the docs at Add global styles with CSS files and no layout component.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[tomholford]

Have not tested this in some time, but last I checked it was still an issue. Bumping it to keep it from being auto-closed by @gatsbot

[KyleAMathews]

I published a fix for this where we're not code splitting CSS which should solve the problems y'all are facing. Please update to [email protected] and lemme know if you're still having troubles!

https://github.com/gatsbyjs/gatsby/issues/11072

[KyleAMathews]

This fixes the typography.js problem https://github.com/gatsbyjs/gatsby/pull/12295