lightningcss: Unsupported pseudo class or element: cue

🐛 bug report

I believe this is valid SCSS - it worked in my old environment (node 16, parcel 2.0), but now that I’ve needed to upgrade (node 18, parcel 2.6) it says “Unsupported pseudo class or element: cue”

::cue(v[voice="active"]) {
   color: yellow;
}

🎛 Configuration (.babelrc, package.json, cli command)

parcel build --public-url . src/index.html

🤔 Expected Behavior

::cue(v[voice="active"]) {color: yellow;}

appears in the final CSS

😯 Current Behavior

Build error: “Unsupported pseudo class or element: cue”

💁 Possible Solution

🔦 Context

This is the syntax for styling VTT subtitles used in HTML5 videos

https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#styling_webvtt_cues

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	2.6.0
Node	18.3.0
npm/Yarn	8.11
Operating System	Linux in Docker on an M1 Mac

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 18 (8 by maintainers)

Most upvoted comments

no but I guess we should probably suppress these vendor prefixed ones. I didn’t realize there were so many.

devongovett on Aug 25, 2022

Should be fixed in v1.13.1. Thanks @pfroud!

devongovett on Sep 2, 2022

Well I submitted a low-effort pull request (#266), let me know how it looks…

(It’s my first time using Rust!)

pfroud on Sep 1, 2022

Hello folks, I’m getting the same situation with parcel 2.6.2 and React 18.2.0:


> 
> `@parcel/transformer-css: Unsupported pseudo class or element: -webkit-outer-spin-button
> node_modules/antd/dist/antd.variable.css:322:17
>     321 | [type='number']::-webkit-inner-spin-button,
>   > 322 | [type='number']::-webkit-outer-spin-button {
>   >     |                 ^
>     323 |   height: auto;
>     324 | }
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -webkit-search-decoration
> /node_modules/antd/dist/antd.variable.css:330:17
>     329 | [type='search']::-webkit-search-cancel-button,
>   > 330 | [type='search']::-webkit-search-decoration {
>   >     |                 ^
>     331 |   -webkit-appearance: none;
>     332 | }
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -webkit-search-cancel-button
> /node_modules/antd/dist/antd.variable.css:329:17
>     328 | }
>   > 329 | [type='search']::-webkit-search-cancel-button,
>   >     |                 ^
>     330 | [type='search']::-webkit-search-decoration {
>     331 |   -webkit-appearance: none;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -webkit-search-cancel-button
> /node_modules/antd/dist/antd.variable.css:2738:102
>     2737 | }
>   > 2738 | .ant-select:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input::-webkit-search-cancel-button {
>   >      |                                                                                                      ^
>     2739 |   display: none;
>     2740 |   /* stylelint-disable-next-line property-no-vendor-prefix */
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-backdrop
> /node_modules/antd/dist/antd.variable.css:2769:39
>     2768 | @media all and (-ms-high-contrast: none) {
>   > 2769 |   .ant-select-selection-placeholder *::-ms-backdrop,
>   >      |                                       ^
>     2770 |   .ant-select-selection-placeholder {
>     2771 |     flex: auto;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-backdrop
> node_modules/antd/dist/antd.variable.css:2755:32
>     2754 | @media all and (-ms-high-contrast: none) {
>   > 2755 |   .ant-select-selection-item *::-ms-backdrop,
>   >      |                                ^
>     2756 |   .ant-select-selection-item {
>     2757 |     flex: auto;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> node_modules/antd/dist/antd.variable.css:8526:27
>     8525 | }
>   > 8526 | .ant-picker-input > input:-ms-input-placeholder {
>   >      |                           ^
>     8527 |   color: #bfbfbf;
>     8528 |   -ms-user-select: none;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> /node_modules/antd/dist/antd.variable.css:20007:19
>     20006 | }
>   > 20007 | .ant-input-number:-ms-input-placeholder {
>   >       |                   ^
>     20008 |   color: #bfbfbf;
>     20009 |   -ms-user-select: none;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
>   node_modules/antd/dist/antd.variable.css:8541:27
>     8540 | }
>   > 8541 | .ant-picker-input > input:-ms-input-placeholder {
>   >      |                           ^
>     8542 |   text-overflow: ellipsis;
>     8543 | }
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
>  node_modules/antd/dist/antd.variable.css:19792:33
>     19791 | }
>   > 19792 | .ant-input-number-affix-wrapper:-ms-input-placeholder {
>   >       |                                 ^
>     19793 |   text-overflow: ellipsis;
>     19794 | }
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
> node_modules/antd/dist/antd.variable.css:19777:33
>     19776 | }
>   > 19777 | .ant-input-number-affix-wrapper:-ms-input-placeholder {
>   >       |                                 ^
>     19778 |   color: #bfbfbf;
>     19779 |   -ms-user-select: none;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> /node_modules/antd/dist/antd.variable.css:20484:25
>     20483 | }
>   > 20484 | .ant-input-number-input:-ms-input-placeholder {
>   >       |                         ^
>     20485 |   color: #bfbfbf;
>     20486 |   -ms-user-select: none;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
>  node_modules/antd/dist/antd.variable.css:20022:19
>     20021 | }
>   > 20022 | .ant-input-number:-ms-input-placeholder {
>   >       |                   ^
>     20023 |   text-overflow: ellipsis;
>     20024 | }
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
> /node_modules/antd/dist/antd.variable.css:20499:25
>     20498 | }
>   > 20499 | .ant-input-number-input:-ms-input-placeholder {
>   >       |                         ^
>     20500 |   text-overflow: ellipsis;
>     20501 | }
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -webkit-inner-spin-button
> 
> /node_modules/antd/dist/antd.variable.css:20505:40
>     20504 | }
>   > 20505 | .ant-input-number-input[type='number']::-webkit-inner-spin-button,
>   >       |                                        ^
>     20506 | .ant-input-number-input[type='number']::-webkit-outer-spin-button {
>     20507 |   margin: 0;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> /node_modules/antd/dist/antd.variable.css:20977:12
>     20976 | }
>   > 20977 | .ant-input:-ms-input-placeholder {
>   >       |            ^
>     20978 |   color: #bfbfbf;
>     20979 |   -ms-user-select: none;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -webkit-outer-spin-button
> /node_modules/antd/dist/antd.variable.css:20506:40
>     20505 | .ant-input-number-input[type='number']::-webkit-inner-spin-button,
>   > 20506 | .ant-input-number-input[type='number']::-webkit-outer-spin-button {
>   >       |                                        ^
>     20507 |   margin: 0;
>     20508 |   /* stylelint-disable-next-line property-no-vendor-prefix */
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
> /node_modules/antd/dist/antd.variable.css:20695:26
>     20694 | }
>   > 20695 | .ant-input-affix-wrapper:-ms-input-placeholder {
>   >       |                          ^
>     20696 |   color: #bfbfbf;
>     20697 |   -ms-user-select: none;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> /node_modules/antd/dist/antd.variable.css:20710:26
>     20709 | }
>   > 20710 | .ant-input-affix-wrapper:-ms-input-placeholder {
>   >       |                          ^
>     20711 |   text-overflow: ellipsis;
>     20712 | }
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
> node_modules/antd/dist/antd.variable.css:20992:12
>     20991 | }
>   > 20992 | .ant-input:-ms-input-placeholder {
>   >       |            ^
>     20993 |   text-overflow: ellipsis;
>     20994 | }
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-backdrop
> 
> node_modules/antd/dist/antd.variable.css:22356:29
>     22355 | @media all and (-ms-high-contrast: none) {
>   > 22356 |   .ant-pagination-options *::-ms-backdrop,
>   >       |                             ^
>     22357 |   .ant-pagination-options {
>     22358 |     vertical-align: top;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
>   /node_modules/antd/dist/antd.variable.css:22410:44
>     22409 | }
>   > 22410 | .ant-pagination-options-quick-jumper input:-ms-input-placeholder {
>   >       |                                            ^
>     22411 |   text-overflow: ellipsis;
>     22412 | }
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
>  /node_modules/antd/dist/antd.variable.css:22395:44
>     22394 | }
>   > 22395 | .ant-pagination-options-quick-jumper input:-ms-input-placeholder {
>   >       |                                            ^
>     22396 |   color: #bfbfbf;
>     22397 |   -ms-user-select: none;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
> /node_modules/antd/dist/antd.variable.css:23078:15
>     23077 | }
>   > 23078 | .ant-mentions:-ms-input-placeholder {
>   >       |               ^
>     23079 |   color: #bfbfbf;
>     23080 |   -ms-user-select: none;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
>  node_modules/antd/dist/antd.variable.css:23093:15
>     23092 | }
>   > 23093 | .ant-mentions:-ms-input-placeholder {
>   >       |               ^
>     23094 |   text-overflow: ellipsis;
>     23095 | }
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
>   /node_modules/antd/dist/antd.variable.css:23217:26
>     23216 | }
>   > 23217 | .ant-mentions > textarea:-ms-input-placeholder {
>   >       |                          ^
>     23218 |   color: #bfbfbf;
>     23219 |   -ms-user-select: none;
> 
> 
> @parcel/transformer-css: Unsupported pseudo class or element: -ms-input-placeholder
> 
> /node_modules/antd/dist/antd.variable.css:23232:26
>     23231 | }
>   > 23232 | .ant-mentions > textarea:-ms-input-placeholder {
>   >       |                          ^
>     23233 |   text-overflow: ellipsis;
>     23234 | }
> `

A lot of warnings for unsupported elements, this time with Ant Design library, so please do open that issue if you can 😃

Thx in advance

leoiec on Aug 30, 2022

@devongovett Should I open an issue for suppressing this warning on vendor-prefixed classes as well, then?

I’d offer to put up a PR, but looking at https://github.com/parcel-bundler/parcel-css/commit/32c9e85805c96a69921ae88eaa6242693f88613b, it’s not immediately obvious to me what code might be needed for this.

broofa on Aug 29, 2022

@devongovett --log-level error works, but suppresses all the status output, too, which is a bit unexpected

larseggert on Aug 29, 2022

The fix for this issue was released, but this issue only covers the standard cue pseudo-class, not any other browser-specific pseudo-classes

shish on Aug 25, 2022