Giters

GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.

Home Page:https://npm.im/critters-webpack-plugin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

unknown pseudo-class selector :-webkit-autofill

AlvinTCH opened this issue · comments

commented

Hi,
I have a css in my project that looks like this:

.q-field__input:-webkit-autofill+.q-field__label,[dir] .q-field .q-field__native:-webkit-autofill+.q-field__label {
    transform:translateY(-40%) scale(0.75)
}

When I tried to build, critters seem to be unable to understand the selector, giving the error below

｢Critters｣: 4 rules skipped due to selector errors:
  .q-field .q-field__input:-webkit-autofill+.q-field__label -> unknown pseudo-class selector ':-webkit-autofill+*'
  .q-field .q-field__native:-webkit-autofill+.q-field__label -> unknown pseudo-class selector ':-webkit-autofill+*'
  .q-field--dense .q-field__input:-webkit-autofill+.q-field__label -> unknown pseudo-class selector ':-webkit-autofill+*'
  .q-field--dense .q-field__native:-webkit-autofill+.q-field__label -> unknown pseudo-class selector ':-webkit-autofill+*'

Is there anything I have done wrongly?

commented

Those are just warnings. We should add a workaround, but the result with those warnings is actually correct - Critters won't inline the rule with the :-webkit-autofill selector, which is valid given that it's not a critical style.

commented

This issue is no longer present in Critters 0.0.11+, as of #69.