[Bug report] Webpack fail because of the inactive `postcss-csso`

[Mister-Hope]

Description

demo/components demo:webpack-build:   moduleIdentifier: '/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/css-loader@6.8.1_webpack@5.85.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/postcss-loader@7.3.2_postcss@8.4.24_webpack@5.85.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/vidstack@0.6.4/node_modules/vidstack/styles/community-skin/video.css',
demo/components demo:webpack-build:   moduleName: '../../node_modules/.pnpm/vidstack@0.6.4/node_modules/vidstack/styles/community-skin/video.css.webpack[javascript/auto]!=!../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.85.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!../../node_modules/.pnpm/postcss-loader@7.3.2_postcss@8.4.24_webpack@5.85.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!../../node_modules/.pnpm/vidstack@0.6.4/node_modules/vidstack/styles/community-skin/video.css',
demo/components demo:webpack-build:   message: 'Module build failed (from ../../node_modules/.pnpm/postcss-loader@7.3.2_postcss@8.4.24_webpack@5.85.0/node_modules/postcss-loader/dist/cjs.js):\n' +
demo/components demo:webpack-build:     '\n' +
demo/components demo:webpack-build:     'SyntaxError\n' +
demo/components demo:webpack-build:     '\n' +
demo/components demo:webpack-build:     '(359:72) from "postcss-csso" plugin: /home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/vidstack@0.6.4/node_modules/vidstack/styles/community-skin/video.css Selector is expected\n' +
demo/components demo:webpack-build:     '\n' +
demo/components demo:webpack-build:     ' \x1B[90m 357 | \x1B[39m\n' +
demo/components demo:webpack-build:     ' \x1B[90m 358 | \x1B[39m\x1B[33m:\x1B[39m\x1B[36mwhere\x1B[39m\x1B[36m(\x1B[39mmedia-player\x1B[33m:\x1B[39m\x1B[36mnot\x1B[39m\x1B[36m([data-started])\x1B[39m media-community-skin\x1B[33m[\x1B[39mdata-video\x1B[33m]\x1B[39m\x1B[33m[\x1B[39mdata-mobile\x1B[33m]\x1B[39m\x1B[36m)\x1B[39m\n' +
demo/components demo:webpack-build:     "\x1B[1m\x1B[31m>\x1B[39m\x1B[22m\x1B[90m 359 | \x1B[39m  \x1B[33m:\x1B[39m\x1B[36mwhere\x1B[39m\x1B[36m(\x1B[39m\x1B[33m[\x1B[39mdata-media-button\x1B[33m]\x1B[39m \x1B[33m[\x1B[39mdata-media-slider\x1B[33m]\x1B[39m, \x1B[33m[\x1B[39mpart=\x1B[32m'time-group'\x1B[39m\x1B[33m]\x1B[39m, \x1B[36m)\x1B[39m \x1B[33m{\x1B[39m\n" +
demo/components demo:webpack-build:     ' \x1B[90m     | \x1B[39m                                                                       \x1B[1m\x1B[31m^\x1B[39m\x1B[22m\n' +
demo/components demo:webpack-build:     ' \x1B[90m 360 | \x1B[39m  opacity\x1B[33m:\x1B[39m 0\x1B[33m;\x1B[39m\n' +
demo/components demo:webpack-build:     ' \x1B[90m 361 | \x1B[39m  visibility\x1B[33m:\x1B[39m hidden\x1B[33m;\x1B[39m\n',
demo/components demo:webpack-build:   moduleId: null,
demo/components demo:webpack-build:   moduleTrace: [
...

I am using vidstack, which register custom components.

The usage of modern css like @container will throw error above.

Vite is working fine.

[Mister-Hope]

@meteorlxy Can we try to replace that dep?

[meteorlxy]

@Mister-Hope Sure. No need to stick to a particular tool.

[github-actions[bot]]

This issue is marked as stale because it has not had recent activity. Issues marked with stale will be closed if they have no activity within 7 days.