If we make this change we are literally requiring all users to double up their style declarations related to :focus-visible.

/* this won't work in browsers don't have native :focus-visible support */
.foo.focus-visible,
.foo:focus-visible {
  outline: 2px solid blue;
}

/* we need to do this instead */
.foo.focus-visible {
  outline: 2px solid blue;
}
.foo:focus-visible {
  outline: 2px solid blue;
}

Imagine if we have many focus visible styles for different elements and components, this will cause a huge pain.

I naively went in and assumed most would want to author their code with :focus-visible instead of .focus-visible and then use something like csstools/postcss-focus-visible to process and duplicate the styles.

For the completely manual use case where you have to author your code with both, forcing those users to double up their styles can be disruptive. It would make :focus-visible way more seamless and usable for my use case.

I assume putting a config into this polyfill is out of the question? Maybe a different release which supports this behavior would be more appropriate if we can't work this into the same package.

Sorry to ping, do you have any remarks on the above? @Justineo

I was not talking about how we would author style code but as the feature detection is for runtime, we always need to ship the duplicated styles to our users.

@furudean @Justineo
In this issue #244, @Westbrook propose to provide 2 files:

• the current one without any change
• a new one not applying automatically, to let the user set a condition.

If users keep the current polyfill, no change.
If users want to apply it conditionally, they can use the second one with warning about double CSS declaration.

This solution can conciliate both of use cases.