[Bug]: Invalid CSS syntax in pdf_viewer.css

[CherechesC]

Attach (recommended) or Link to PDF file

No PDF issue

Web browser and its version

Not browser related

Operating system and its version

All

PDF.js version

5.2.133

Is the bug present in the latest PDF.js version?

Yes

Is a browser extension

No

Steps to reproduce the problem

Storybook fails to build the scripts that import pdf_viewer.css due to invalid CSS syntax.

�[38;2;241;97;97mModule build failed (from ./node_modules/sass-loader/dist/cjs.js):
Expected token.
ÔòÀ
4397 Ôöé --csstools-color-scheme--light:;
Ôöé ^
ÔòÁ
node_modules\pdfjs-dist\web\pdf_viewer.css 4397:34 root stylesheet�[39m

What is the expected behavior?

There is no invalid CSS syntax in the library.

What went wrong?

No issues with PDF rendering, just with storybook.

Link to a viewer

No response

Additional context

No response

[CherechesC]

Link to the invalid syntax:

https://www.npmjs.com/package/pdfjs-dist/v/5.2.133?activeTab=code#:~:text=%2D%2Dcsstools%2Dcolor%2Dscheme%2D%2Dlight%3A%3B

[Snuffleupagus]

Storybook fails to build the scripts that import pdf_viewer.css due to invalid CSS syntax.

�[38;2;241;97;97mModule build failed (from ./node_modules/sass-loader/dist/cjs.js):

Unfortunately "Storybook" and "sass-loader" is not something that we use here, and consequently we cannot really provide any support for either of those. (Perhaps those tools lack support for modern CSS features?)

[CherechesC]

Just realized that the link I've posted does not work as expected.

I am asking about this line in the pdf_viewer.css.
Is this valid syntax that should be supported?

[Snuffleupagus]

Is this valid syntax that should be supported?

Well, browsers don't seem to have a problem with that (as far as I can tell).

[CherechesC]

Browsers ignore invalid CSS syntax to ensure that something like this won't break the whole web page.
But that does not mean it should be there or that is valid.

But I can see that this is coming from @csstools/postcss-light-dark-function:

[nicolo-ribaudo]

@CherechesC I just had the same problem.

This is valid CSS syntax (spec: https://www.w3.org/TR/css-variables-1/#defining-variables, note how the value is marked as optional by ?), but not valid SCSS syntax. I had accidentally configured my build process to parse PDF.js's CSS files as SASS/SCSS, and it seems like you made the same mistake.

[plpolak]

Including PDJjs as part of an e.g. SCSS enabled Angular project, will parse the CSS file as SCSS. This breaks building the Angular application.

[nicolo-ribaudo]

I mean it's like saying "parsing an JavaScript file as a TypeScript file breaks the application" 😅

They are different languages, with different parsing rules.

[nicolo-ribaudo]

This has been fixed in Sass 1.88.0.