Update the `caniuse` database when running `grunt precommit:css`

[desrosj]

The autoprefixer dependency is responsible for applying browser specific prefixing and other changes to Core CSS generated from Sass files. It relies on the browserslist package, which in turn relies on the caniuse-lite database for determining which browser versions are supported for the project based on the browserslist field in the package.json file.

The caniuse-lite data is updated pretty frequently (several times a month), but unless it is manually updated, the data used is most likely outdated. This can result in unsupported browsers being considered supported due to outdated data.

When grunt precommit:css is run, the script should check whether browserslist is at the latest version to ensure the generated CSS supports the correct browsers.

The recommended way to do this is running npx browserslist@latest --update-db.

[desrosj]

There is a bug to make note of. When running npx browserslist@latest --update-db, the indentation of the package-lock.json file is reverted to using 2 spaces instead of standard tabs.

There is a ​bug open for this. It appears to be a relic of old NPM versions, which always enforced 2 spaces for indentation. NPM 5.0+ detects indentation and preserves it when updating the lock file.

Updates the browserslist DB in package-lock.json via command:

npx browserslist@latest --update-db

Result is addition of caniuse-lite 1.0.30001312, and removal of versions 1.0.30001245, 1.0.30001291, and 1.0.30001300.

Trac ticket: https://core.trac.wordpress.org/ticket/53685

@ironprogrammer Thanks for the PR! Correct me if I'm wrong, but I don't think the intent of the ticket(https://core.trac.wordpress.org/ticket/53685) is to just manually run the command.

I think it's goal is to integrate an automated check of the caniuse API for the latest version, then possibly run the command during the appropriate build step if necessary.

[ironprogrammer]

Hi, @desrosj 👋🏻:

In my testing with npm v6.14.16, it is still an issue where package-lock.json indentation is converted to 2 spaces. This can be worked around by first deleting the lock file, where the browserslist update will copy the indentation from package.json (as expected) while regenerating the lock file. (See "Short Term Maintenance" below.)

On the other hand, in npm v7-8, the indentation issue appears to have been fixed. During the lock file update, tabs are preserved, but v7 introduced "lockFileVersion": 2 to package.json. It would seem that in order to support a pre-commit check for the latest caniuse-lite data, it would need to happen after migrating npm to a higher version.

Short Term Maintenance

I've prepared a patch (PR 2379) for the caniuse-lite DB with npm 6.14.16, if we only wanted to bring the browsers list up to date. Here is the list of changes as of today:

Target browser changes:
- and_chr 91
+ and_chr 98
- and_uc 12.12
- android 91
+ android 98
- chrome 91
- chrome 90
+ chrome 98
+ chrome 97
+ chrome 96
- edge 91
- edge 90
+ edge 98
+ edge 97
+ edge 96
- firefox 90
- firefox 89
+ firefox 97
+ firefox 96
+ firefox 95
- ios_saf 14.5-14.7
- ios_saf 14.0-14.4
+ ios_saf 15.2-15.3
+ ios_saf 15.0-15.1
+ ios_saf 14.5-14.8
- opera 77
- opera 76
+ opera 83
+ opera 82
- safari 14
+ safari 15.2-15.3
+ safari 15.1
- samsung 14.0
+ samsung 16.0

I know this doesn't address the need to update precommit:css, but offers some additional time while an update to npm is considered.

@ironprogrammer Disregard my comment. I see on the actual ticket you've explained the PR. Thanks again!

[ironprogrammer]

comment

1058732087
}}}
​dream-encode commented on ​PR #2379:

Hi, @davidb:

Yes, sorry my explanation of why this might be a short-term maintenance item was taking a bit long to compose 😅 I do understand what the underlying objective is. This would be purely short term maintenance.

I updated caniuse-lite to the last version quite recently. See ​https://github.com/WordPress/wordpress-develop/commit/65e8a87320ff36327e2e76fa48341dff3920381a. We can close this PR

Per @gziolo above, a stopgap update to browserslist DB has been applied. Thank you!

Closing this PR.

[ironprogrammer]

As noted in comment:1 and comment:4, this is blocked dependent on updating support for npm 7+, tracked in #56658.