eslint-plugin-compat VS browserslist

eslint-plugin-compat [0] and stylelint-no-unsupported-browser-features [1] can help you know when you're using an unsupported browser feature.

[0] https://github.com/amilajack/eslint-plugin-compat

For now I'm trying to set up [eslint-plugin-compat](https://github.com/amilajack/eslint-plugin-compat) to check it for me, but I'm not sure it works — get 0 errors and 3 polyfills for a test snippet.

warn - The `content` option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration Browserslist: caniuse-lite is outdated. Please run: npx [email protected] --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating Rebuilding... Done in 88ms.

Browserslist: caniuse-lite is outdated. Please run: npx [email protected] --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating Latest version: 1.0.30001444 Installed version: 1.0.30001298 Removing old caniuse-lite from lock file Installing new caniuse-lite version $ yarn add -W caniuse-lite (...) caniuse-lite has been successfully updated Target browser changes: - and_chr 96 + and_chr 108 (...) - ios_saf 12.2-12.5 + ios_saf 16.2 (...) - safari 13.1 + safari 16.2 (...) npm notice New major version of npm available! 8.15.0 -> 9.3.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.3.0 npm notice Run npm install -g [email protected] to update! npm notice

Unfortunately I'm not able to fix the issue for older versions of Chrome on Android. The tool I use to convert code to be backwards compatible only seems to know about the latest version of Chrome for Android, as mentioned in this issue. I left a comment in there but I doubt any solution is forthcoming.

I’m a long time user of Browserslist and Vite and I was pretty convinced they paired very-well. It seems to be the case for both CSS and JavaScript output, but it actually is not for JavaScript.

w/ postcss-preset-env(v7.8.3): convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments. It takes the support data that comes from MDN and Can I Use and determine from a browserlist whether those transformations are needed. It also packs Autoprefixer within and shares the list with it, so prefixes are only applied when you're going to need them given your browser support list.

[email protected]:~/gatsby-starter-netlify-cms# npm run build > [email protected] build > npm run clean && gatsby build > [email protected] clean > gatsby clean info Deleting .cache, public, /root/gatsby-starter-netlify-cms/node_modules/.cache/babel-loader, /root/gatsby-starter-netlify-cms/node_modules/.cache/terser-webpack-plugin info Successfully deleted directories success compile gatsby files - 1.048s success load gatsby config - 0.043s success load plugins - 1.357s warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying the document head. Learn more at https://gatsby.dev/gatsby-head success onPreInit - 0.040s success initialize cache - 0.161s success copy gatsby files - 0.134s success Compiling Gatsby Functions - 0.270s success onPreBootstrap - 0.286s success createSchemaCustomization - 0.010s success Checking for changed pages - 0.013s success source and transform nodes - 0.384s info Writing GraphQL type definitions to /root/gatsby-starter-netlify-cms/.cache/schema.gql success building schema - 0.542s success createPages - 0.077s success createPagesStatefully - 0.134s info Total nodes: 135, SitePage nodes: 20 (use --verbose for breakdown) success Checking for changed pages - 0.001s success onPreExtractQueries - 0.001s success extract queries from components - 2.251s success write out redirect data - 0.026s success onPostBootstrap - 0.002s info bootstrap finished - 9.801s success write out requires - 0.006s warn Browserslist: caniuse-lite is outdated. Please run: npx [email protected] --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating ⠴ Building production JavaScript and CSS bundles Browserslist: caniuse-lite is outdated. Please run: npx [email protected] --update-db gatsby-plugin-purgecss: Only processing /root/gatsby-starter-netlify-cms/src/components/all.sass ⠏ Building production JavaScript and CSS bundles Browserslist: caniuse-lite is outdated. Please run: npx [email protected] --update-db success Building production JavaScript and CSS bundles - 76.447s gatsby-plugin-purgecss: Previous CSS Size: 207.53 KB New CSS Size: 19.24 KB (-90.73%) Removed ~188.29 KB of CSS success Building HTML renderer - 20.640s success Execute page configs - 0.064s success Caching Webpack compilations - 0.001s success run queries in workers - 1.133s - 22/22 19.42/s success Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 5.756s - 26/26 4.52/s success Merge worker state - 0.003s success Rewriting compilation hashes - 0.002s success Writing page-data.json files to public directory - 0.033s - 20/20 611.17/s success Building static HTML for pages - 3.170s - 20/20 6.31/s info [gatsby-plugin-netlify] Creating SSR/DSG redirects... info [gatsby-plugin-netlify] Created 0 SSR/DSG redirects... success onPostBuild - 0.015s info Done building in 116.458844476 sec Pages ┌ src/templates/index-page.js │ └ / ├ src/templates/about-page.js │ └ /about/ ├ src/templates/blog-post.js │ ├ /blog/2016-12-17-making-sense-of-the-scaas-new-flavor-wheel/ │ └ ...2 more pages available ├ src/templates/product-page.js │ └ /products/ ├ src/templates/tags.js │ ├ /tags/flavor/ │ └ ...5 more pages available ├ src/pages/404.js │ ├ /404/ │ └ /404.html ├ src/pages/blog/index.js │ └ /blog/ ├ src/pages/contact/examples.js │ └ /contact/examples/ ├ src/pages/contact/file-upload.js │ └ /contact/file-upload/ ├ src/pages/contact/index.js │ └ /contact/ ├ src/pages/contact/thanks.js │ └ /contact/thanks/ └ src/pages/tags/index.js └ /tags/ ╭────────────────────────────────────────────────────────────────╮ │ │ │ (SSG) Generated at build time │ │ D (DSG) Deferred static generation - page generated at runtime │ │ ∞ (SSR) Server-side renders at runtime (uses getServerData) │ │ λ (Function) Gatsby function │ │ │ ╰────────────────────────────────────────────────────────────────╯

Tooling takes away alot of headaches and saves yourself from "being clever" (stupid). Most front-end tooling can be run out of the nodeJS runtime, so even if your stack isn't JS oriented, it's still worth running node. The obvious shoutouts: Vite, eslint, stylelint, postCSS, browserslist. Playwright is somethin else you can give a look at if your scope of work is large enough.

Actually this site doesn't use the latest caniuse-lite db. This one uses the latest one: https://browsersl.ist

https://browsersl.ist does the same thing.