-
-
Notifications
You must be signed in to change notification settings - Fork 76
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use MDN data to generate :autofill support data #86
Conversation
If this MR gets merged updating the browser compat data package will need to be part of the steps for generating up-to-date data. This approach could also be used to add support data for |
Task to do:
|
Are there utils I should look at which are used for generating the tiny output data? If so I'm happy to get this so it's generating JSON in the right format and putting it thought that util to minify it. |
Here is the packer code https://github.com/browserslist/caniuse-lite/blob/main/src/packer/feature.js You can find usage somewhere in updater script. |
Managed to get this as the output format so far. Which looks largely correct. Will take a look at running it through the utils tomorrow to see what the packed output looks like. {
"title":":autofill CSS pseudo-class",
"spec":"https://html.spec.whatwg.org/multipage/semantics-other.html#selector-autofill",
"stats":{
"chrome":{
"1":"n",
"2":"n",
"3":"n",
"4":"n",
"5":"n",
"6":"n",
"7":"n",
"8":"n",
"9":"n",
"10":"n",
"11":"n",
"12":"n",
"13":"n",
"14":"n",
"15":"n",
"16":"n",
"17":"n",
"18":"n",
"19":"n",
"20":"n",
"21":"n",
"22":"n",
"23":"n",
"24":"n",
"25":"n",
"26":"n",
"27":"n",
"28":"n",
"29":"n",
"30":"n",
"31":"n",
"32":"n",
"33":"n",
"34":"n",
"35":"n",
"36":"n",
"37":"n",
"38":"n",
"39":"n",
"40":"n",
"41":"n",
"42":"n",
"43":"n",
"44":"n",
"45":"n",
"46":"n",
"47":"n",
"48":"n",
"49":"n",
"50":"n",
"51":"n",
"52":"n",
"53":"n",
"54":"n",
"55":"n",
"56":"n",
"57":"n",
"58":"n",
"59":"n",
"60":"n",
"61":"n",
"62":"n",
"63":"n",
"64":"n",
"65":"n",
"66":"n",
"67":"n",
"68":"n",
"69":"n",
"70":"n",
"71":"n",
"72":"n",
"73":"n",
"74":"n",
"75":"n",
"76":"n",
"77":"n",
"78":"n",
"79":"n",
"80":"n",
"81":"n",
"83":"n",
"84":"n",
"85":"n",
"86":"n",
"87":"n",
"88":"n",
"89":"n",
"90":"n",
"91":"n",
"92":"n",
"93":"n",
"94":"n",
"95":"n",
"96":"n"
},
"and_chr":{
"18":"n",
"25":"n",
"26":"n",
"27":"n",
"28":"n",
"29":"n",
"30":"n",
"31":"n",
"32":"n",
"33":"n",
"34":"n",
"35":"n",
"36":"n",
"37":"n",
"38":"n",
"39":"n",
"40":"n",
"41":"n",
"42":"n",
"43":"n",
"44":"n",
"45":"n",
"46":"n",
"47":"n",
"48":"n",
"49":"n",
"50":"n",
"51":"n",
"52":"n",
"53":"n",
"54":"n",
"55":"n",
"56":"n",
"57":"n",
"58":"n",
"59":"n",
"60":"n",
"61":"n",
"62":"n",
"63":"n",
"64":"n",
"65":"n",
"66":"n",
"67":"n",
"68":"n",
"69":"n",
"70":"n",
"71":"n",
"72":"n",
"73":"n",
"74":"n",
"75":"n",
"76":"n",
"77":"n",
"78":"n",
"79":"n",
"80":"n",
"81":"n",
"83":"n",
"84":"n",
"85":"n",
"86":"n",
"87":"n",
"88":"n",
"89":"n",
"90":"n",
"91":"n",
"92":"n",
"93":"n",
"94":"n",
"95":"n",
"96":"n"
},
"edge":{
"12":"n",
"13":"n",
"14":"n",
"15":"n",
"16":"n",
"17":"n",
"18":"n",
"79":"n",
"80":"n",
"81":"n",
"83":"n",
"84":"n",
"85":"n",
"86":"n",
"87":"n",
"88":"n",
"89":"n",
"90":"n",
"91":"n",
"92":"n",
"93":"n",
"94":"n",
"95":"n",
"96":"n"
},
"firefox":{
"1":"n",
"2":"n",
"3":"n",
"4":"n",
"5":"n",
"6":"n",
"7":"n",
"8":"n",
"9":"n",
"10":"n",
"11":"n",
"12":"n",
"13":"n",
"14":"n",
"15":"n",
"16":"n",
"17":"n",
"18":"n",
"19":"n",
"20":"n",
"21":"n",
"22":"n",
"23":"n",
"24":"n",
"25":"n",
"26":"n",
"27":"n",
"28":"n",
"29":"n",
"30":"n",
"31":"n",
"32":"n",
"33":"n",
"34":"n",
"35":"n",
"36":"n",
"37":"n",
"38":"n",
"39":"n",
"40":"n",
"41":"n",
"42":"n",
"43":"n",
"44":"n",
"45":"n",
"46":"n",
"47":"n",
"48":"n",
"49":"n",
"50":"n",
"51":"n",
"52":"n",
"53":"n",
"54":"n",
"55":"n",
"56":"n",
"57":"n",
"58":"n",
"59":"n",
"60":"n",
"61":"n",
"62":"n",
"63":"n",
"64":"n",
"65":"n",
"66":"n",
"67":"n",
"68":"n",
"69":"n",
"70":"n",
"71":"n",
"72":"n",
"73":"n",
"74":"n",
"75":"n",
"76":"n",
"77":"n",
"78":"n",
"79":"n",
"80":"n",
"81":"n",
"82":"n",
"83":"n",
"84":"n",
"85":"n",
"86":"y",
"87":"y",
"88":"y",
"89":"y",
"90":"y",
"91":"y",
"92":"y",
"93":"y",
"94":"y",
"95":"y",
"96":"y",
"97":"y",
"98":"y",
"1.5":"n",
"3.5":"n",
"3.6":"n"
},
"and_ff":{
"4":"n",
"5":"n",
"6":"n",
"7":"n",
"8":"n",
"9":"n",
"10":"n",
"14":"n",
"15":"n",
"16":"n",
"17":"n",
"18":"n",
"19":"n",
"20":"n",
"21":"n",
"22":"n",
"23":"n",
"24":"n",
"25":"n",
"26":"n",
"27":"n",
"28":"n",
"29":"n",
"30":"n",
"31":"n",
"32":"n",
"33":"n",
"34":"n",
"35":"n",
"36":"n",
"37":"n",
"38":"n",
"39":"n",
"40":"n",
"41":"n",
"42":"n",
"43":"n",
"44":"n",
"45":"n",
"46":"n",
"47":"n",
"48":"n",
"49":"n",
"50":"n",
"51":"n",
"52":"n",
"53":"n",
"54":"n",
"55":"n",
"56":"n",
"57":"n",
"58":"n",
"59":"n",
"60":"n",
"61":"n",
"62":"n",
"63":"n",
"64":"n",
"65":"n",
"66":"n",
"67":"n",
"68":"n",
"79":"n",
"80":"n",
"81":"n",
"82":"n",
"83":"n",
"84":"n",
"85":"n",
"86":"y",
"87":"y",
"88":"y",
"89":"y",
"90":"y",
"91":"y",
"92":"y",
"93":"y",
"94":"y",
"95":"y",
"96":"y",
"97":"y",
"98":"y"
},
"ie":{
"1":"n",
"2":"n",
"3":"n",
"4":"n",
"5":"n",
"6":"n",
"7":"n",
"8":"n",
"9":"n",
"10":"n",
"11":"n",
"5.5":"n"
},
"opera":{
"2":"n",
"3":"n",
"4":"n",
"5":"n",
"6":"n",
"7":"n",
"8":"n",
"9":"n",
"10":"n",
"11":"n",
"12":"n",
"15":"n",
"16":"n",
"17":"n",
"18":"n",
"19":"n",
"20":"n",
"21":"n",
"22":"n",
"23":"n",
"24":"n",
"25":"n",
"26":"n",
"27":"n",
"28":"n",
"29":"n",
"30":"n",
"31":"n",
"32":"n",
"33":"n",
"34":"n",
"35":"n",
"36":"n",
"37":"n",
"38":"n",
"39":"n",
"40":"n",
"41":"n",
"42":"n",
"43":"n",
"44":"n",
"45":"n",
"46":"n",
"47":"n",
"48":"n",
"49":"n",
"50":"n",
"51":"n",
"52":"n",
"53":"n",
"54":"n",
"55":"n",
"56":"n",
"57":"n",
"58":"n",
"60":"n",
"62":"n",
"63":"n",
"64":"n",
"65":"n",
"66":"n",
"67":"n",
"68":"n",
"69":"n",
"70":"n",
"71":"n",
"72":"n",
"73":"n",
"74":"n",
"75":"n",
"76":"n",
"77":"n",
"78":"n",
"79":"n",
"80":"n",
"81":"n",
"3.5":"n",
"3.6":"n",
"5.1":"n",
"7.1":"n",
"7.2":"n",
"7.5":"n",
"8.5":"n",
"9.1":"n",
"9.2":"n",
"9.5":"n",
"9.6":"n",
"10.1":"n",
"10.5":"n",
"10.6":"n",
"11.1":"n",
"11.5":"n",
"11.6":"n",
"12.1":"n"
},
"op_mob":{
"11":"n",
"12":"n",
"14":"n",
"15":"n",
"16":"n",
"18":"n",
"19":"n",
"20":"n",
"21":"n",
"22":"n",
"24":"n",
"25":"n",
"26":"n",
"27":"n",
"28":"n",
"29":"n",
"30":"n",
"32":"n",
"33":"n",
"34":"n",
"35":"n",
"36":"n",
"37":"n",
"41":"n",
"42":"n",
"43":"n",
"44":"n",
"45":"n",
"46":"n",
"47":"n",
"48":"n",
"49":"n",
"50":"n",
"51":"n",
"52":"n",
"53":"n",
"54":"n",
"55":"n",
"56":"n",
"57":"n",
"58":"n",
"59":"n",
"60":"n",
"61":"n",
"62":"n",
"63":"n",
"64":"n",
"10.1":"n",
"11.1":"n",
"11.5":"n",
"12.1":"n"
},
"safari":{
"1":"n",
"2":"n",
"3":"n",
"4":"n",
"5":"n",
"6":"n",
"7":"n",
"8":"n",
"9":"n",
"10":"n",
"11":"n",
"12":"n",
"13":"n",
"14":"n",
"15":"n",
"1.1":"n",
"1.2":"n",
"1.3":"n",
"3.1":"n",
"5.1":"n",
"6.1":"n",
"9.1":"n",
"10.1":"n",
"11.1":"n",
"12.1":"n",
"13.1":"n",
"14.1":"n",
"15.1":"n"
},
"ios_saf":{
"1":"n",
"2":"n",
"3":"n",
"4":"n",
"5":"n",
"6":"n",
"7":"n",
"8":"n",
"9":"n",
"10":"n",
"11":"n",
"12":"n",
"13":"n",
"14":"n",
"15":"n",
"3.2":"n",
"4.2":"n",
"6.1":"n",
"9.3":"n",
"10.3":"n",
"11.3":"n",
"12.2":"n",
"13.4":"n",
"14.5":"n"
},
"samsung":{
"1.0":"n",
"1.5":"n",
"1.6":"n",
"2.0":"n",
"2.1":"n",
"3.0":"n",
"3.2":"n",
"4.0":"n",
"4.2":"n",
"5.0":"n",
"5.2":"n",
"5.4":"n",
"6.0":"n",
"6.2":"n",
"6.4":"n",
"7.0":"n",
"7.2":"n",
"7.4":"n",
"8.0":"n",
"8.2":"n",
"9.0":"n",
"9.2":"n",
"9.4":"n",
"10.0":"n",
"10.2":"n",
"11.0":"n",
"11.2":"n",
"12.0":"n",
"12.1":"n",
"13.0":"n",
"13.2":"n",
"14.0":"n",
"14.2":"n",
"15.0":"n",
"16.0":"n"
},
"android":{
"1":"n",
"2":"n",
"3":"n",
"4":"n",
"37":"n",
"38":"n",
"39":"n",
"40":"n",
"41":"n",
"42":"n",
"43":"n",
"44":"n",
"45":"n",
"46":"n",
"47":"n",
"48":"n",
"49":"n",
"50":"n",
"51":"n",
"52":"n",
"53":"n",
"54":"n",
"55":"n",
"56":"n",
"57":"n",
"58":"n",
"59":"n",
"60":"n",
"61":"n",
"62":"n",
"63":"n",
"64":"n",
"65":"n",
"66":"n",
"67":"n",
"68":"n",
"69":"n",
"70":"n",
"71":"n",
"72":"n",
"73":"n",
"74":"n",
"75":"n",
"76":"n",
"77":"n",
"78":"n",
"79":"n",
"80":"n",
"81":"n",
"83":"n",
"84":"n",
"85":"n",
"86":"n",
"87":"n",
"88":"n",
"89":"n",
"90":"n",
"91":"n",
"92":"n",
"93":"n",
"94":"n",
"95":"n",
"96":"n",
"1.5":"n",
"2.2":"n",
"4.4":"n",
"4.4.3":"n"
}
}
} |
I've got it "working" I think I'm not sure on next steps and how best to test it |
Next steps:
|
copy-mdn.js
Outdated
let supported = browserData.version_added | ||
supported &&= browserData.version_added !== 'preview' | ||
supported &&= parseFloat(version) >= parseFloat(browserData.version_added) | ||
supported &&= !browserData.prefix |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need to add x
postfix to result.stats[bcdBrowserToCanIUseBrowser(browser)][version]
when we need prefix?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can find these one-letter codes description here https://github.com/Fyrd/caniuse/blob/main/CONTRIBUTING.md
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeap, for Chrome 96 we need "y x"
value.
Autoprefixer inserts prefix only if string contain / x($|\s)/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So I've changed the code to make it so if the support statement has a version_added entry and a prefix entry it will add the x otherwise it won't.
So in the above example it should generate "n x" for all chrome versions up to and including Chrome 95, but for 96 onwards it will generate "y". Which I think is correct behaviour? If we need to handle situations where both prefix and unprefix is supported that will require changing the processing code?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will have a read and update accordingly
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've updated the code to handle these more complicated scenarios as well as some edge cases that can occur in MDN data such as "range" values (e.g. ≤18
) and true
for version_added, and the version_removed column for if a feature is no longer supported.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you very much for your guidance on this btw!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good. Can you show the current output after decompressing?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://gist.github.com/lukewarlow/2ecfb7c525ce00de1add3488ced6d93b - this is the contents of the json file that gets written to disc.
Let me know if you meant after it had been packed.
…aniuse has a new version.
Add x to data if prefix
Update code to select the entry for arrays based on the browser version in the array. This handles prefix support upto a certain version and full support after that. Previously, the data would be not supported until fully supported. Handle version_added being a range value or true. Handle version_removed having a value.
data/features/css-autofill.js
Outdated
@@ -0,0 +1 @@ | |||
module.exports={A:{D:{"33":"0 1 2 3 4 5 6 7 8 9 undefined lB cB I e J E F G A B C K L D M N O f g h i j k l m n o p q r s t u v w x y z AB BB CB DB EB FB GB HB IB dB JB eB KB LB S MB NB OB PB QB RB SB TB UB VB WB XB YB ZB P Q T U V W X Y Z a b c R d H fB pB"},L:{"33":"0 1 2 3 4 5 6 7 8 9 O l m n o p q r s t u v w x y z AB BB CB DB EB FB GB HB IB dB JB eB KB LB S MB NB OB PB QB RB SB TB UB VB WB XB YB ZB P Q T U V W X Y Z a b c R d H fB pB"},B:{"33":"P Q T U V W X Y Z a b c R d H fB pB","34":"C K L D M N O"},C:{"1":"X Y Z a b c R d H fB pB qB","2":"0 1 2 3 4 5 6 7 8 9 undefined lB cB I e J E F G A B C K L D M N O f g h i j k l m n o p q r s t u v w x y z AB BB CB DB EB FB GB HB IB dB JB eB KB LB S MB NB OB PB QB RB SB TB UB VB WB XB YB ZB P Q T mB U V W nB oB"},M:{"1":"X Y Z a b c R d H fB pB qB undefined","2":"0 1 2 3 4 5 6 7 8 9 I e J E F G A L D M N O f g h i j k l m n o p q r s t u v w x y z AB BB CB DB EB FB GB HB IB dB JB eB KB LB S MB NB OB PB P Q T mB U V W"},A:{"2":"undefined lB cB I e J E F G A B kB"},F:{"33":"0 1 2 3 4 5 6 7 8 9 D M N O f g h i j k l m n o p q r s t u v w x y z AB BB CB DB EB FB GB HB IB JB KB LB S MB NB OB PB QB RB SB TB UB VB WB XB YB ZB P Q T","34":"lB cB I e J E F G A B C nB oB sB uB undefined vB ZC hB 1B 2B aB iB 3B bB"},K:{"33":"1 2 3 4 5 6 7 8 9 L D M O f g h i k l m n o p q s t u v w x AB BB CB DB EB FB GB HB IB dB JB eB KB LB S","34":"B C hB aB iB bB"},E:{"33":"undefined cB I e J E F G A B C K L D rB sB tB vB hB aB bB wB xB","34":"lB"},G:{"33":"undefined lB cB I e J E F G A B C K L D gB tB AC CC"},P:{"33":"undefined OC gB YC ZC bC bB cC IC dC eC"},I:{"33":"0 1 2 3 4 5 6 7 8 9 undefined lB cB I x y z AB BB CB DB EB FB GB HB IB dB JB eB KB LB S MB NB OB PB QB RB SB TB UB VB WB XB YB ZB P Q T U V W X Y Z a b c R d H fB pB PC SC"}},B:NaN,C:":autofill CSS pseudo-class"}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Strange that we have undefined
in the packed array and NaN
.
Seems like we are doing something wrong.
I am not very familiar with packager
code, but you can try to put console.log
or debugger
to https://github.com/browserslist/caniuse-lite/blob/main/src/packer/feature.js#L80
and to https://github.com/browserslist/caniuse-lite/blob/main/src/packer/feature.js#L99
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One of the error could created by this line https://gist.github.com/lukewarlow/65d234b378e57b9153421b6ba65da188#file-output-js-L669
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe the NaN is caused by the lack of a "status" value in the caniuse formatted data. It's rather hard to determine the status of the spec for an MDN entry because it only has a spec_url
and a standards_track
boolean value. I wouldn't be able to map those to statuses without making some assumptions probably. I'd be curious to know what caniuse treats WICG URLs as too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can use status: "other"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So the undefined I think is coming from a mismatch between browser versions in MDN and browser versions in caniuse.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can generate u
(for unknown
) for there versions. Or try to copy versions more precise.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The mdn data should now only generate an entry for a version where the version matches a caniuse version. And should have a status of other
https://gist.github.com/lukewarlow/65d234b378e57b9153421b6ba65da188 - this is the data converted, packed, and then unpacked. |
Merged. Now let’s wait for the next |
Released in |
This uses MDN's browser compat data npm package to get the support data for the
:autofill
Pseudo class.This is required because caniuse won't add entries that are duplicated with MDN. And autoprefixer requires the data to generate a prefix see postcss/autoprefixer#626.
Not exactly sure on the exact output format required but so far I've got this JSON being generated.