postcss-scrollbar
postcss-scrollbar copied to clipboard
Plugin does not work with media queries
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',
})] : []
),
],
};
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.