Error: Unknown pseudo-class selector ":horizontal"

[Manuel Schulz]

Hi, I'm getting this error when compiling

Error: Unknown pseudo-class selector ":horizontal"

In my case it's from a vendor file https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/mixins/mixins.scss#L27.

Don't how to fix this on my site, as I can't (and probably don't want to) alter the vendor package.

Regards

[Alex Moser]

+1 to this, I am using auto prefixer to add vendor prefixes which is causing similar problems - in my case it's Error: Unknown pseudo-class selector ":-webkit-input-placeholder" .

[Jason Miller]

We'll have to manually strip unknown pseudo's.

[Jason Miller]

Should be fixed in 1.2.0.

[Vasyl Boroviak]

It was not fixed. I'm using v1.2.1.

1 rules skipped due to selector errors:
  .el-input:horizontal -> unknown pseudo-class selector ':horizontal'
Critters: inlined 2.67 kB (3% of original 80.3 kB) of css/chunk-vendors.0bb8d6eb.css.
2 rules skipped due to selector errors:
  .profile-wrapper:vertical -> unknown pseudo-class selector ':vertical'
   -> '' is not a valid selector
Critters: inlined 5 kB (4% of original 101 kB) of css/app.215d550f.css.
Critters: inlined 458 B (101% of original 452 B) of inline CSS.

PS: 101% 😂

[Jason Miller]

@koresar - if you're still able to, I'd love to know if 2.x fixed it for you!

[Vasyl Boroviak]

Just tried v2. Discovered another bug.

Here is what I did on my standard VUE CLI 3 project:

$ npm i -S critters-webpack-plugin@latest
+ critters-webpack-plugin@2.0.1

And then:

$ npm run build

> vue-cli-service build


⠙  Building for production...1 rules skipped due to selector errors:
  .el-input::-webkit-scrollbar -> unknown pseudo-class selector '::-webkit-scrollbar'
3 rules skipped due to selector errors:
  .profile-wrapper::-webkit-scrollbar -> unknown pseudo-class selector '::-webkit-scrollbar'
  a[data-v-23f15c82]:-webkit-any-link -> unknown pseudo-class selector ':-webkit-any-link'
  a[data-v-23f15c82]:-webkit-any-link -> unknown pseudo-class selector ':-webkit-any-link'
Critters: inlined 664 B (0% of original 100 kB) of css/app.723135db.css, reducing non-inlined size 57% to 57.8 kB.
⠹  Building for production...

 ERROR  Failed to compile with 1 errors                                                 10:33:28

  TypeError: Cannot read property 'trim' of undefined
  
  - critters.js:417 
    [flash-webapp]/[critters-webpack-plugin]/dist/critters.js:417:53
  
  - critters.js:42 
    [flash-webapp]/[critters-webpack-plugin]/dist/critters.js:42:13
  
  - critters.js:57 
    [flash-webapp]/[critters-webpack-plugin]/dist/critters.js:57:16
  
  - Array.filter

...

Here is my webpack config:

            const Critters = require("critters-webpack-plugin");
            config.plugins.push(
                new Critters({
                    fonts: false
                })
            );

I have no idea what's going on. But critters-webpack-plugin@1.2.1 was working perfectly fine.

Should I open a new issue for this?