^2.4.1 -- Invalid pseudo class after ::-webkit-scrollbar pseudo element

[kenzaflow]

🐛 bug report

🎛 Configuration (package.json)

now - doesn't work

"devDependencies": {
    "@parcel/transformer-sass": "^2.4.1",
    "@parcel/transformer-webmanifest": "^2.4.1",
    "parcel": "^2.4.1"
  }

before - working

"devDependencies": {
    "@parcel/transformer-sass": "^2.3.2",
    "@parcel/transformer-webmanifest": "^2.3.2",
    "parcel": "^2.3.2"
  }

🤔 Expected Behavior

Change background of pseudo-element -webkit-scrollbar on hover, compiling just fine on 2.3.2. Ok, a pseudo-element of a pseudo-element, well, simply works...

Server running at http://localhost:1234
✨ Built in 1.33s

https://user-images.githubusercontent.com/74398451/161364288-5e331f0f-3c7f-4af8-ad45-e002f972cf02.mp4

😯 Current Behavior

Server running at http://localhost:1234
🚨 Build failed.

@parcel/transformer-css: Invalid pseudo class after ::-webkit-scrollbar pseudo element

  /home/kevinzaracho/Escritorio/bemarketing/src/assets/scss/main.scss:649:28
    648 | }
  > 649 | *::-webkit-scrollbar-thumb:hover {
  >     |                            ^
    650 |   background-color: var(--palette-gray-light);
    651 | }

💁 Possible Solution

maybe newer version is getting too strict

💻 Code Sample

Link to the repo

🌍 Your Environment

Software	Version(s)
Parcel	2.4.1
Node	v16.14.2 LTS
npm/Yarn	8.5.0
Operating System	Kubuntu 21.10

Anyway, good work fellas!

[DaveO-Home]

I'm getting this error:

🚨 Build failed.

@parcel/transformer-css: Unexpected token Delim('.')

public/node_modules/dodex/dist/dodex.min.css:1:9367
  > 1 | after .content-input>div{width:400px;position:absolute;top:75px;left:33%;margin:10% auto;padding:5px 20px 13
  >   |      ^

[BuildError: Unexpected token Delim('.')] {
  diagnostics: [
    {
      origin: '@parcel/transformer-css',
      message: "Unexpected token Delim('.')",
      name: 'SyntaxError',
      stack: undefined,
      codeFrames: [Array]
    }
  ]
}

[devongovett]

@DaveO-Home from looking at that module, it looks like this is the culprit:

.dial::after .content-input>div

That selector is not valid because there is another selector following the ::after pseudo element. This would have never been applied in the browser, and was probably unintended. Maybe it should be reported to the module author?

(Also this is an unrelated issue to the original post. In the future, please open a separate bug.)

[DaveO-Home]

@devongovett Sorry, I thought it might be a duplicate since I got the error upgrading to 2.4.1. I validated the css at; https://jigsaw.w3.org/css-validator/validator Note; the css was generated by scss

Valid CSS information
.dial::before {
width : 70px;
height : 20px;
background-color : #666;
border-radius : 50%;
position : absolute;
content : "";
top : -11px;
}
.dial::after {
content : "";
top : 40px;
box-shadow : -5px 5px 5px #424141;
z-index : -1;
width : 70px;
height : 20px;
background-color : #444000;
border-radius : 40px / 25px;
position : absolute;
}
.dial::after .content-input > div {
width : 400px;
position : absolute;
top : 75px;
left : 33%;
margin : 10% auto;
padding : 5px 20px 13px;
border-radius : 10px;
background : linear-gradient(khaki, #999);
z-index : 1005;
}

[Jsherborne92]

Same issue for me! Will downgrade in the meantime and see if that works.

[devongovett]

Fixed in @parcel/css v1.8.0. You may need to remove the previous version from your lock file to update.

[DaveO-Home]

@devongovett So this fixes the problem for @kenzaflow. Are you still saying my css is invalid? I used the following with same problem; { "extends": "@parcel/config-default", "transformers": { ".css": ["@parcel/transformer-css-experimental"] }, "optimizers": { ".css": ["@parcel/optimizer-css"] } }

[devongovett]

Yes, it is not valid to have additional selectors after a pseudo element.

[DaveO-Home]

Well, I guess I'll never get any further than 2.3.2 with parcel.

[devongovett]

Have you verified that the selector actually applies when run in a browser? This isn't a thing parcel decided was invalid, it's according to the CSS spec. Browsers will ignore it completely afaik.

[DaveO-Home]

As I mentioned above, I ran the css through https://jigsaw.w3.org/css-validator/#validate_by_input+with_options successfully. Do you have a more recent online validator? What vaidator does parcel use?

I ran it through another validator and got 4 warning: https://codebeautify.org/cssvalidate#

# | Type | Line | Column | Rule | Reason | Description | Browsers
-- | -- | -- | -- | -- | -- | -- | --
warning | undefined | undefined | Alphabetical order | .dial::before {Rule doesn't have all its properties in alphabetical order. | Assure properties are in alphabetical order | All
warning | undefined | undefined | Alphabetical order | .dial::after {Rule doesn't have all its properties in alphabetical order. | Assure properties are in alphabetical order | All
warning | undefined | undefined | Alphabetical order | .dial::after .content-input > div {Rule doesn't have all its properties in alphabetical order. | Assure properties are in alphabetical order | All
warning | undefined | undefined | Beware of broken box size | padding : 5px 20px 13px;Using width with padding can sometimes make elements larger than you expect. | Don't use width or height when using padding or border. | All

 </div> <nav class="pagination is-centered" role="navigation" aria-label="pagination"> <ul class="pagination-list"><li class="active"></li></ul> </nav>

Nothing about the added selector.

[devongovett]

I pasted your CSS into a code pen with some HTML. You can see that the .dial::after .content-input > div selector has no effect. If you remove the ::after part of it, it does. https://codepen.io/devongovett/pen/Rwxywyp

Edit: in addition, if you open the browser dev tools to the codepen iframe and log document.styleSheets[0].rules you'll see there is only 3 rules. The last one is ignored.

[DaveO-Home]

The input is for a handle when clicking, and a mouse can also drag down it to flip pages. Removing the "input" would remove functionality. So a lot more is going on. I will look into it, but sure would like to run a validator that errors.
Here what is looks like: