Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

A pure css without any draft features #946

Closed
Mister-Hope opened this issue Oct 10, 2023 · 1 comment
Closed

A pure css without any draft features #946

Mister-Hope opened this issue Oct 10, 2023 · 1 comment
Labels
feature New feature or request

Comments

@Mister-Hope
Copy link

Mister-Hope commented Oct 10, 2023 •
edited
Loading

Related Problem:

I run into an issue when integrating this in to a Webpack - postcss- postcss-csso - csso - css-tree chain in a normal webpack application.

https://github.com/vidstack/vidstack/blob/8b6120b4e91cf6c6443d4f4d07be2b57a847870b/packages/vidstack/player/styles/default/layouts/video.css#L215-L219

The above lines is using @container which is still an editor draft at https://drafts.csswg.org/css-contain-3/#container-rule

  1. css-tree do not know this rule, see Support container queries csstree/csstree#174
  2. So csso failed to parse it, and lead to Syntax Error on @container Queries lahmatiy/postcss-csso#26

I am not sure, but seems all of css-tree csso postcss-csso may not be responsible for this issue, as it's totally reasonable for an editor draft being unrecognized (with a very low version support range).

image

Suggestions

Could you split those draft syntax into a new entrance and let users optionaly import that?

My error logs:

demo/components demo:webpack-build: {
demo/components demo:webpack-build:   moduleIdentifier: '/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css',
demo/components demo:webpack-build:   moduleName: '../../node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css.webpack[javascript/auto]!=!../../node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!../../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!../../node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css',
demo/components demo:webpack-build:   message: 'Module build failed (from ../../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/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:     '(215:8) from "postcss-csso" plugin: /home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css ")" is expected\n' +
demo/components demo:webpack-build:     '\n' +
demo/components demo:webpack-build:     ' \x1B[90m [213](https://github.com/vuepress-theme-hope/vuepress-theme-hope/actions/runs/6454534570/job/17520420165#step:6:214) | \x1B[39m\x1B[33m}\x1B[39m\n' +
demo/components demo:webpack-build:     ' \x1B[90m [214](https://github.com/vuepress-theme-hope/vuepress-theme-hope/actions/runs/6454534570/job/17520420165#step:6:215) | \x1B[39m\n' +
demo/components demo:webpack-build:     '\x1B[1m\x1B[31m>\x1B[39m\x1B[22m\x1B[90m [215](https://github.com/vuepress-theme-hope/vuepress-theme-hope/actions/runs/6454534570/job/17520420165#step:6:216) | \x1B[39m\x1B[36m@container\x1B[39m\x1B[36m \x1B[39m\x1B[36m(width >= 980px)\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 [216](https://github.com/vuepress-theme-hope/vuepress-theme-hope/actions/runs/6454534570/job/17520420165#step:6:217) | \x1B[39m  \x1B[33m:\x1B[39m\x1B[36mwhere\x1B[39m\x1B[36m([data-fullscreen] .vds-video-layout .vds-captions)\x1B[39m \x1B[33m{\x1B[39m\n' +
demo/components demo:webpack-build:     ' \x1B[90m [217](https://github.com/vuepress-theme-hope/vuepress-theme-hope/actions/runs/6454534570/job/17520420165#step:6:218) | \x1B[39m    bottom\x1B[33m:\x1B[39m \x1B[36mvar\x1B[39m\x1B[36m(--video-lg-fullscreen-captions-offset, 54px)\x1B[39m\x1B[33m;\x1B[39m\n',
demo/components demo:webpack-build:   moduleId: null,
demo/components demo:webpack-build:   moduleTrace: [
demo/components demo:webpack-build:     {
demo/components demo:webpack-build:       originIdentifier: '/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected]/node_modules/mini-css-extract-plugin/dist/loader.js!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css',
demo/components demo:webpack-build:       originName: '../../node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css',
demo/components demo:webpack-build:       moduleIdentifier: '/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css',
demo/components demo:webpack-build:       moduleName: '../../node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css.webpack[javascript/auto]!=!../../node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!../../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!../../node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css',
demo/components demo:webpack-build:       dependencies: [],
demo/components demo:webpack-build:       originId: null,
demo/components demo:webpack-build:       moduleId: null
demo/components demo:webpack-build:     },
demo/components demo:webpack-build:     {
demo/components demo:webpack-build:       originIdentifier: 'javascript/esm|/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/packages/components/lib/client/components/VidStack.js',
demo/components demo:webpack-build:       originName: '../../packages/components/lib/client/components/VidStack.js',
demo/components demo:webpack-build:       moduleIdentifier: '/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected]/node_modules/mini-css-extract-plugin/dist/loader.js!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css',
demo/components demo:webpack-build:       moduleName: '../../node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css',
demo/components demo:webpack-build:       dependencies: [Array],
demo/components demo:webpack-build:       originId: null,
demo/components demo:webpack-build:       moduleId: null
demo/components demo:webpack-build:     },
demo/components demo:webpack-build:     {
demo/components demo:webpack-build:       originIdentifier: '/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/demo/components/src/.vuepress/.temp/components/config.js',
demo/components demo:webpack-build:       originName: './src/.vuepress/.temp/components/config.js',
demo/components demo:webpack-build:       moduleIdentifier: 'javascript/esm|/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/packages/components/lib/client/components/VidStack.js',
demo/components demo:webpack-build:       moduleName: '../../packages/components/lib/client/components/VidStack.js',
demo/components demo:webpack-build:       dependencies: [Array],
demo/components demo:webpack-build:       originId: null,
demo/components demo:webpack-build:       moduleId: null
demo/components demo:webpack-build:     },
demo/components demo:webpack-build:     {
demo/components demo:webpack-build:       originIdentifier: '/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/demo/components/src/.vuepress/.temp/internal/clientConfigs.js',
demo/components demo:webpack-build:       originName: './src/.vuepress/.temp/internal/clientConfigs.js',
demo/components demo:webpack-build:       moduleIdentifier: '/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/demo/components/src/.vuepress/.temp/components/config.js',
demo/components demo:webpack-build:       moduleName: './src/.vuepress/.temp/components/config.js',
demo/components demo:webpack-build:       dependencies: [Array],
demo/components demo:webpack-build:       originId: null,
demo/components demo:webpack-build:       moduleId: null
demo/components demo:webpack-build:     },
demo/components demo:webpack-build:     {
demo/components demo:webpack-build:       originIdentifier: 'javascript/esm|/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/@[email protected]/node_modules/@vuepress/client/dist/app.js',
demo/components demo:webpack-build:       originName: '../../node_modules/.pnpm/@[email protected]/node_modules/@vuepress/client/dist/app.js',
demo/components demo:webpack-build:       moduleIdentifier: '/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/demo/components/src/.vuepress/.temp/internal/clientConfigs.js',
demo/components demo:webpack-build:       moduleName: './src/.vuepress/.temp/internal/clientConfigs.js',
demo/components demo:webpack-build:       dependencies: [],
demo/components demo:webpack-build:       originId: 5664,
demo/components demo:webpack-build:       moduleId: null
demo/components demo:webpack-build:     }
demo/components demo:webpack-build:   ],
demo/components demo:webpack-build:   details: undefined,
demo/components demo:webpack-build:   stack: 'ModuleBuildError: Module build failed (from ../../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/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:     '(215:8) from "postcss-csso" plugin: /home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected]/node_modules/vidstack/player/styles/default/layouts/video.css ")" is expected\n' +
demo/components demo:webpack-build:     '\n' +
demo/components demo:webpack-build:     ' \x1B[90m 213 | \x1B[39m\x1B[33m}\x1B[39m\n' +
demo/components demo:webpack-build:     ' \x1B[90m 214 | \x1B[39m\n' +
demo/components demo:webpack-build:     '\x1B[1m\x1B[31m>\x1B[39m\x1B[22m\x1B[90m 215 | \x1B[39m\x1B[36m@container\x1B[39m\x1B[36m \x1B[39m\x1B[36m(width >= 980px)\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 216 | \x1B[39m  \x1B[33m:\x1B[39m\x1B[36mwhere\x1B[39m\x1B[36m([data-fullscreen] .vds-video-layout .vds-captions)\x1B[39m \x1B[33m{\x1B[39m\n' +
demo/components demo:webpack-build:     ' \x1B[90m 217 | \x1B[39m    bottom\x1B[33m:\x1B[39m \x1B[36mvar\x1B[39m\x1B[36m(--video-lg-fullscreen-captions-offset, 54px)\x1B[39m\x1B[33m;\x1B[39m\n' +
demo/components demo:webpack-build:     '\n' +
demo/components demo:webpack-build:     '    at processResult (/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected]/node_modules/webpack/lib/NormalModule.js:764:19)\n' +
demo/components demo:webpack-build:     '    at /home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected]/node_modules/webpack/lib/NormalModule.js:866:5\n' +
demo/components demo:webpack-build:     '    at /home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected]/node_modules/loader-runner/lib/LoaderRunner.js:400:11\n' +
demo/components demo:webpack-build:     '    at /home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected]/node_modules/loader-runner/lib/LoaderRunner.js:252:18\n' +
demo/components demo:webpack-build:     '    at context.callback (/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected]/node_modules/loader-runner/lib/LoaderRunner.js:124:13)\n' +
demo/components demo:webpack-build:     '    at reportError (/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/postcss-loader/dist/utils.js:416:5)\n' +
demo/components demo:webpack-build:     '    at Object.loader (/home/runner/work/vuepress-theme-hope/vuepress-theme-hope/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/postcss-loader/dist/index.js:118:28)',
demo/components demo:webpack-build:   compilerPath: undefined
demo/components demo:webpack-build: }
@Mister-Hope Mister-Hope added the feature New feature or request label Oct 10, 2023
@mihar-22
Copy link
Member

Removed them all as there's no need. They all reference fullscreen so @media should suffice. It'll roll out in 1.1.10 soon today.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mihar-22 @Mister-Hope