adding styles to a nested class triggers error when parent has no styles.

[OdifYltsaeb]

Sorry for the long issue title. Perhaps someone can help me phrase it better.

Anyway. My issue is as follows. I have a CSS module like this:

.navbar {
    /* bunch of styles */

    nav {
        /* bunch of styles */

        a {
            /* bunch of styles */

            line-height: 1.3125rem;

            &:after {
                content: '';
                /* bunch of styles */
            }

            &.active {
                @apply text-black;

                &:after {
                    @apply w-full;
                }
            }
        }
    }
}

Now, If I Were to remove the @apply text-black; from within &.active, I instantly get the following error:

wait  - compiling...
error - ./styles/components/nav.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./styles/components/nav.module.css)
TypeError: Cannot set property 'parent' of undefined

To get by and still be able to do, what I want I just keep that completely redundant line (@apply text-black;) there.

[ai]

Do you have the full stacktrace with file and lines?

What other PostCSS plugins do you have?

[OdifYltsaeb]

Do you have the full stacktrace with file and lines?

No, unfortunately not. I'm running nextjs app and this error is the only printout I get. When I was exploring what is causing the error, I received more of the similar:

wait  - compiling...
error - ./styles/components/nav.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./styles/components/nav.module.css)
TypeError: Cannot set property 'parent' of undefined
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./styles/components/nav.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./styles/components/nav.module.css)
TypeError: Cannot set property 'parent' of undefined
    at runMicrotasks (<anonymous>)
error - ./styles/components/nav.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./styles/components/nav.module.css)
TypeError: Cannot set property 'parent' of undefined
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./styles/components/nav.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./styles/components/nav.module.css)
TypeError: Cannot set property 'parent' of undefined
    at runMicrotasks (<anonymous>)
error - ./styles/components/nav.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./styles/components/nav.module.css)
TypeError: Cannot set property 'parent' of undefined
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./styles/components/nav.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./styles/components/nav.module.css)
TypeError: Cannot set property 'parent' of undefined
error - ./styles/components/nav.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./styles/components/nav.module.css)
TypeError: Cannot set property 'parent' of undefined
wait  - compiling...

What other PostCSS plugins do you have?

This is what I have:

// postcss.config.js
module.exports = {
    plugins: [
        'postcss-import',
        'tailwindcss',
        'postcss-nested',
        'autoprefixer',
    ],
};

These are the dependencies from my package.json:

    "dependencies": {
        "autoprefixer": "^10.2.5",
        "axios": "^0.21.1",
        "color": "^3.1.3",
        "env-cmd": "^10.1.0",
        "next": "10.0.9",
        "next-redux-wrapper": "^6.0.2",
        "postcss": "^8.2.8",
        "postcss-import": "^14.0.0",
        "postcss-nested": "^5.0.5",
        "prop-types": "^15.7.2",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-redux": "^7.2.3",
        "redux": "^4.0.5",
        "redux-devtools-extension": "^2.13.9",
        "redux-thunk": "^2.3.0",
        "swr": "^0.5.5",
        "tailwindcss": "^2.0.4"
    },

[OdifYltsaeb]

Another example of code that generates error:

.card {
    box-shadow: 0 4px 5px theme("colors.black.boxShadow");

    .image {
        height: 160px;
    }

    .body {
        height: 250px;

        .icons {
            @apply text-black;

            li {
                @apply text-black;

                & + li {
                    @apply ml-0.5;
                }
            }
        }
    }
}

I keep adding those redundant @apply text-black; styles... because without them I would get error:

wait  - compiling...
error - ./styles/components/companycard.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./styles/components/companycard.module.css)
TypeError: Cannot set property 'parent' of undefined
    at runMicrotasks (<anonymous>)

To make things clear, this is the code that generates the error again:

.card {
    box-shadow: 0 4px 5px theme("colors.black.boxShadow");

    .image {
        height: 160px;
    }

    .body {
        height: 250px;

        .icons {
            li {
                & + li {
                    @apply ml-0.5;
                }
            }
        }
    }
}

so basically - whenever the parent rule is empty, You get the error.

[cullylarson]

I'm getting the same error. postcss-nested version 5.0.3 works fine. If I update to 5.0.4 or 5.0.5 I get the same error as the OP:

error - ./client/style/global.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-6-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-6-2!./client/style/global.css)
TypeError: Cannot set property 'parent' of undefined

[OdifYltsaeb]

@cullylarson well - at least there's a workaround :D. Just add some redundant rule to parent element and your code works again :)

[cullylarson]

@OdifYltsaeb I haven't actually tracked down specifically where the issue is happening in my styles. I think I likely have a lot of "empty" parent rules. I just downgraded to 5.0.3 :) But thanks for posting the workaround. That's helpful!

[ai]

Should be fixed with PostCSS 8.3.3.