Gatsby: Using CSS modules with a global stylesheet

[baseten]

I'm using gatsby-plugin-postcss-sass with both a global stylesheet (for typography, grid layout, etc.) and css modules for components.

It seems that the component css code is output before the global styles, both during develop and build. I'm not sure why this is the case as I would have thought that components would always want to override global styles?

Either way, is it possible to alter this behaviour either by editing gatsby files by hand (as a short term fix) or some sort of option in config so that css module styles override global styles?

[KyleAMathews]

Oh interesting — how do you import the css files?

Not sure how webpack css extraction works exactly.

[baseten]

Ah, I'd forgotten how I set this up originally!

The global stylesheet is imported in src/layouts/index.js. I'm not super familiar with how gatsby's webpack config works, but usually I would add this as an additional entry to the webpack config and then use the extract text plugin. I'm not sure if this would make any difference though. Perhaps I should import this somewhere else?

The CSS modules (SCSS) are imported into each respective component.

Am I right in thinking that during develop all of these are added to the head via the webpack style loader, but that during build they are first compiled into a single css file and this is then inlined into the html?

[KyleAMathews]

Yeah and we are using the extract text plugin. Just seems like it's not respecting the order of imports.

[jquense]

The order is going to be determined by when you import the global css. It should be done super early, before you import any components in order to make sure its first in the dep tree

[baseten]

Yes you're right. I thought I'd imported the global styles first, but there was a single component above it. Maybe I can try and blame IntelliJ auto imports :)

Thanks!

[baseten]

Hmm. So it's now working correctly for develop but not for build... Any insights?

[baseten]

Moving the style import to the top of gatsby-browser.js and gatsby-ssr.js seemed to do the trick. If I have any time I might investigate customising the webpack config to add it first in an array of entries, but it's working for now. While testing things I noticed that gatsby build doesn't fully clean up the public folder.

[jaydickinson]

@baseten

Hi Alex unrelated but Just started using Gatsby and what is the best way to add additional classes from a global stylesheet (Tachyons in my case) to something with a css module on it?

import styles from "./header.module.scss"
const Header = () => (
  <div className={styles.header}>

How do you add your global classes to the styles.header as well?

[baseten]

Hi @jaydickinson, you can use the classnames utility lib for this (and for composing classnames in general with React, especially if they depend on state).

import classnames from "classnames"
import styles from "./header.module.scss"
const Header = () => (
  <div className={ classnames( styles.header, 'some-global-class' ) }/>

[jaydickinson]

Thanks @baseten for the quick response and that worked perfectly!

[bjrn]

The vanilla alternative would be to use template strings in the classNames prop, like so:

import styles from "./header.module.scss"
const Header = () => (
  <div className={`${styles.header} some-global-class`}/>

[cupojoe]

@baseten How did you do the gatsby-ssr.js setup? I tried it and I still get inverted order on npm run build

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!