With compiled components, it seems useful to rely on Autoprefixer to limit code to CSS standard and let Autoprefixer do the legwork for enabling our browser support matrix range.
@Volker_E, I think we have this set up now. Please update this task if there is anything remaining.
@Niedzielski This looks by and large great. One question that comes back to our other discussion of broadening WVUI in future, is current browserlist.
What browser support for the Search Case Study are we adhering to? Grade A exclusively? Or Grade X aspirationally?
This is the current output of npx --no-install browserslist, following Grade A browser list:
android 81
android 4.4.3-4.4.4
android 4.4
android 4.2-4.3
android 4.1
chrome 83
chrome 81
edge 83
edge 81
firefox 78
firefox 77
ie 11
ios_saf 13.4-13.5
ios_saf 13.3
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
ios_saf 12.0-12.1
ios_saf 11.3-11.4
ios_saf 11.0-11.2
ios_saf 10.3
ios_saf 10.0-10.2
ios_saf 9.3
ios_saf 9.0-9.2
ios_saf 8.1-8.4
ios_saf 8
ios_saf 7.0-7.1
ios_saf 6.0-6.1
opera 69
opera 68
safari 13.1
safari 13
safari 12.1
safari 12
safari 11.1
safari 11
safari 10.1
safari 10
safari 9.1
safari 9
safari 8
safari 7.1
safari 7
safari 6.1
safari 6
safari 5.1
That automatically means older Chrome/Firefox are not included? Are they definitely excluded?
@Volker_E, the browser list currently adheres to the grade A compatibility matrix as you noted. For Chrome and Firefox, that means current and previous version. I was going to say older versions are not excluded but that's incorrect, I just learned. The default configuration is to remove unnecessary prefixes.
The browser list is used for both linting the usage of unavailable features (for example, outline is added as an exception) and vendor prefixing. The linter is optional and can be removed if it is unhelpful but it may be better to define a grade C Browserlist config for the prefixer instead. I say grade C because I'm not sure how to define grade X other than "greater than grade C".
Should we try a ".browserslistrc-prefixer" config? Should we disable automatic removal of outdated prefixes? Something else?
@Niedzielski A Grade C browserlist config sounds good. We need to clarify though what our support targets are for the library. I think it would be preferable to be aspirational for the time being (Grade C! Grade X? See task) as long as we don't run into performance bottlenecks without other options in the Search Case Study (or elsewhere).
Captured in T258464
Not fully sure, how outline is connected to unavailable features. Guess you refer to stylelint rules here. "plugin/no-unsupported-browser-features": ["error", { "ignore": ["outline"] }]…
Closing this as resolved. The browser support definition is only an outcome of the Autoprefixer work.