Postcss plugin applied inconsistently

[ukch]

Description

I have gatsby-plugin-postcss installed. I am using a postcss.config.js to manage my postCSS config. Gatsby sometimes uses the plugin to compile my CSS, and sometimes does not (I can tell when it does not because it does not understand my nested CSS rules). This happens during both develop and build stages.
Often during development, my CSS will suddenly break and I need to restart the server - normally, restarting the server fixes my problem.

Steps to reproduce

• Install a Gatsby 2 starter project.
• npm install gatsby-plugin-postcss postcss-import postcss-preset-env
• Create gatsby-config.js:

module.exports = {
    plugins: [
        "gatsby-plugin-postcss",
    ]
}

• Create postcss.config.js:

module.exports = {
    map: true,
    plugins: {
        "postcss-import": {},
        "postcss-preset-env": {
            stage: 0,
        },
    },
};

• Create a CSS file with nested rules. Example file:

h1 {
    color: green;
    & a {
        color: pink;
    }
}

• Import the CSS in your index.js, and run gatsby develop.

Expected result

e.g. the link colour should be pink

Actual result

e.g. the link colour is green. Inspecting the CSS shows the nesting still in place, which the browser does not understand.

Environment

Because of #8502 I am unable to post the output of gatsby info, but here are some details:

$ which node
/usr/local/nvm/versions/node/v9.2.1/bin/node
$ node --version
v9.2.1
$ which gatsby
/usr/local/nvm/versions/node/v9.2.1/bin/gatsby
$ gatsby --version
2.4.1
$ npm ls | grep gatsby
├─┬ UNMET PEER DEPENDENCY gatsby@2.0.0-rc.0
npm ERR! peer dep missing: gatsby@>=1, required by gatsby-plugin-eslint@2.0.1
npm ERR! peer dep missing: gatsby@^1.0.0, required by gatsby-plugin-react-helmet@2.0.11
npm ERR! peer dep missing: stylelint@^8.3.0 || ^9.0.0, required by stylelint-config-recommended@2.1.0
│ ├─┬ gatsby-cli@2.0.0-rc.0
│ ├─┬ gatsby-link@2.0.0-rc.0
│ ├─┬ gatsby-plugin-page-creator@2.0.0-rc.0
│ ├─┬ gatsby-react-router-scroll@2.0.0-rc.0
├── gatsby-plugin-eslint@2.0.1
├─┬ gatsby-plugin-postcss@2.0.0
├─┬ gatsby-plugin-react-helmet@2.0.11

[kakadiadarpan]

@ukch Your configuration of postcss.config.js is different than the one provided in the documentation. Can you check that once?

[ukch]

@kakadiadarpan I can confirm that changing the postcss.config.js to explicitly require the libraries does not fix the issue.

[kakadiadarpan]

@ukch can you provide a reproduction repo for this? That would make it much simpler to diagnose this issue.

[ukch]

@kakadiadarpan Unfortunately not at the moment, but I can confirm the issue seems to happen most often whenever I add a new second-level CSS block while the development server is running.

[AgtLucas]

@kakadiadarpan I can confirm, I'm having the same issue.

Here's the repo: https://github.com/AgtLucas/gatsby-postcss-issue/
My PostCSS config: https://github.com/AgtLucas/gatsby-postcss-issue/blob/master/postcss.config.js
The CSS not working: https://github.com/AgtLucas/gatsby-postcss-issue/blob/master/src/components/header.css#L10-L13

[ukch]

@kakadiadarpan Here's an example that is reproducing this error:

postcss.config.js: see above

src/pages/header-test.js

import React from "react";

import styles from "../css/modules/header-test.module.css";

export default props => (
    <header class={styles.myHeader}>
        <h1>This should be blue</h1>
    </header>
);

css/modules/header-test.module.css:

.my-header {
    padding: 65px 0;
}

To reproduce:

• Follow the instructions in the first post
• Create the above files
• gatsby develop
• Visit the site -> heading is not blue, but this is expected at this stage
• Change the file header-test.module.css to the following:

.my-header {
    padding: 65px 0;

    & > h1 {
        color: blue;
    }
}

• Return to the browser and look at the header

Expected: the heading text should be blue

Actual:

• The heading text stubbornly remains black
• Inspecting the header.my-header element in devTools yields garbage CSS like the following:

.header-test-module--my-header--2sUuC {
	padding: 65px 0;
	& > h1 { color: blue;
	}: ;
}

• Restarting the Gatsby server causes the correct CSS output to be generated

[gatsbot]

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! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[kalm42]

Leaving a comment for those who like myself came here looking for answers. This is not an issue with the latest versions. Upgrade as necessity and time dictate. Happy coding!