Plugin does not work with media queries

[tyteen4a03]

I have this media query:

            @media not all and (hover: none) {
                scrollbar-width: none;
            }

It returns TypeError: Cannot read property 'selector' of undefined.

/* eslint global-require: 0, import/no-extraneous-dependencies: 0 */

const production = !process.env.ROLLUP_WATCH;

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-preset-env'),
        require('tailwindcss'),
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-color-mod-function'),
        require('postcss-scrollbar'),
        require('autoprefixer'),
        require('postcss-nested'),
        ...(production ? [require('@fullhuman/postcss-purgecss')({
            content: ['./**/*.html', './**/*.svelte'],
            whitelistPatterns: [/svelte-/, /tippy/],
            defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        })] : []),
        ...(production
            ? [require('cssnano')({
                preset: 'default',
            })] : []
        ),
    ],
};

[pascalduez]

Hi,

this is because you use nesting, and your postcss-nested plugin is one of the last one in the chain.
A quick fix would be to move it up.
Nonetheless, I'll land a patch to prevent this.