I’m working on a project that uses Gatsby 5.12.11 and I ran into an issue with styling components in the pages folder. I’m using a CSS framework I created called srcry css which has a couple classes that use CSS variables for customization. To keep things simple I created an example that successfully reproduces the same issue.

Lets say we have a stylesheet in our styles folder called demoStyles.css with this class in it

.demoClass{
    --bg-color: red;
    background-color: var(--bg-color);
}

Then we import it into our global.css file like this

@import('./demoStyles.css');

Then we import the global.css file into our gatsby-browser.js file like this

import './src/styles/global.css';

In my project I created css module for my pages so if we use the index.js component for example I apply the demoClass to one of my objects as follows

import * as styles from `./index.module.css`;

export const HomePage = ()=>{

    return(
        <LayoutComponent>
            <section className={`demoClass ${styles.pageContainer}`}>
                {/* other stuff */}
            </section>
        </LayoutComponent>
    );
}

Then in the index.module.css file we can customize the styles inherited from the demoClass class like this

.pageContainer{
    --bg-color: green;
}

Now so far when doing this with the components in my components folder the background-color of the element turns green as expected. However in the components in my pages folder the background stays red.

When looking at the styles tab in the inspector while inspecting the element I noticed the demoClass class has a higher priority than the pageContainer class. In the pageContainer class the --bg-color property is crossed out. However if I define the pageContainer class in the global.css file the background color changes to green as desired.

What is it about the pages folder that stops the scoped styling from being a higher priority while the scoped styles in my components folder behave as expected? Does anybody know how I can work around this issue because I’d rather not use my global.css file to style my pages.