Add browserslist support (version 1.1.0) (#3)

.github/workflows/node.js.yml

@@ -23,14 +23,14 @@ jobs:
       - name: Run CLI Command (expected to fail)
         run: |
           set +e
-          browser-compatibility-checker -f sample_project
+          browser-compatibility-checker -f sample_projects/sample_project
           if [ $? -eq 0 ]; then
             echo "Command succeeded unexpectedly"
             exit 1
           fi
           echo "Command failed as expected"
       - name: Run CLI Command (expected to pass)
-        run: browser-compatibility-checker -f sample_project_2
+        run: browser-compatibility-checker -f sample_projects/sample_project_2
       - name: Run unit tests
         run: npm test
       - name: Run extension tests
@@ -48,11 +48,11 @@ jobs:
       - name: Run CLI Command (expected to fail)
         run: |
           set +e
-          npx browser-compatibility-checker -f sample_project
+          npx browser-compatibility-checker -f sample_projects/sample_project
           if [ $? -eq 0 ]; then
             echo "Command succeeded unexpectedly"
             exit 1
           fi
           echo "Command failed as expected"
       - name: Run CLI Command (expected to pass)
-        run: npx browser-compatibility-checker -f sample_project_2
+        run: npx browser-compatibility-checker -f sample_projects/sample_project_2

.npmignore

@@ -1,5 +1,4 @@
-sample_project/
-sample_project_2/
+sample_projects/
 *.test.*
 *.spec.*
 src/

.vscode-test.mjs

@@ -4,7 +4,10 @@ import path, { dirname } from "path";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-const testFolderPath = path.resolve(__dirname, "./sample_project");
+const testFolderPath = path.resolve(
+  __dirname,
+  "./sample_projects/sample_project",
+);
 
 export default defineConfig({
   files: "out/test/**/*.test.js",

.vscodeignore

@@ -1,5 +1,4 @@
-sample_project/
-sample_project_2/
+sample_projects/
 *.test.*
 *.spec.*
 **/test/**

CHANGELOG.md

@@ -31,3 +31,7 @@ All notable changes to the "browser-compatibility-checker" extension will be doc
 
 - Only generate JSON on compile
 - Update keywords
+
+## [1.1.0] - 2024-02-12
+
+- Add browserslist support

package.json

@@ -4,7 +4,7 @@
   "description": "Checks compatibility of your HTML/CSS/JS with modern browsers. Uses MDN compatibility data to check for deprecated/mixed-support features.",
   "publisher": "benandrew",
   "icon": "icon.png",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/BenAAndrew/browser-compatibility-checker.git"
@@ -123,6 +123,7 @@
   },
   "dependencies": {
     "@mdn/browser-compat-data": "^5.5.8",
+    "browserslist": "^4.22.3",
     "commander": "^12.0.0",
     "kleur": "^4.1.5",
     "minimatch": "^9.0.3"

sample_projects/sample_project_3/package.json

@@ -0,0 +1,5 @@
+{
+  "browserslist": [
+    "> 0%"
+  ]
+}

src/browser-compatibility-checker/browserslist.ts

@@ -0,0 +1,27 @@
+import browserslist from "browserslist";
+
+const BROWSERLIST_TO_MDN_MAP: { [key: string]: string } = {
+  chrome: "chrome",
+  edge: "edge",
+  firefox: "firefox",
+  opera: "opera",
+  safari: "safari",
+  ie: "ie",
+  and_chr: "chrome_android",
+  and_ff: "firefox_android",
+  op_mob: "opera_android",
+  ios_saf: "safari_ios",
+  samsung: "samsunginternet_android",
+  android: "webview_android",
+};
+
+export function getBrowsersList(path: string) {
+  const browserQuery = browserslist.findConfig(path)?.defaults;
+  if (!browserQuery || browserQuery.length === 0) return;
+  const browsersList = browserslist(browserQuery);
+  if (browsersList.length === 0) return;
+  const browsers = Array.from(
+    new Set(browsersList.map((b) => b.split(" ")[0])),
+  );
+  return browsers.map((b) => BROWSERLIST_TO_MDN_MAP[b]).filter((b) => b);
+}

src/browser-compatibility-checker/compat-issues.ts

@@ -81,7 +81,7 @@ export function createCompatFile() {
   const jsonString = JSON.stringify(processCompatData(), null, 2);
   const filePath = path.join(__filename, "../compat-issues.json");
   fs.writeFileSync(filePath, jsonString, "utf-8");
-  fs.chmodSync(filePath, '644');
+  fs.chmodSync(filePath, "644");
 }
 
 createCompatFile();

src/browser-compatibility-checker/index.ts

@@ -1,2 +1,3 @@
 export { findIssues } from "./check";
 export { CompatIssue } from "./compat-issues";
+export { getBrowsersList } from "./browserslist";

src/browser-compatibility-checker/test/browserslist.spec.ts

@@ -0,0 +1,26 @@
+import * as assert from "assert";
+import { getBrowsersList } from "../";
+
+describe("Browserslist", function () {
+  it("Get browserslist", function () {
+    const browsersList = getBrowsersList("sample_projects/sample_project_3");
+    assert.deepStrictEqual(browsersList, [
+      "chrome_android",
+      "firefox_android",
+      "webview_android",
+      "chrome",
+      "edge",
+      "firefox",
+      "ie",
+      "safari_ios",
+      "opera_android",
+      "opera",
+      "safari",
+      "samsunginternet_android",
+    ]);
+  });
+  it("No browserslist", function () {
+    const browsersList = getBrowsersList("sample_projects/sample_project");
+    assert.equal(browsersList, undefined);
+  });
+});

src/browser-compatibility-checker/test/check.spec.ts

@@ -5,7 +5,7 @@ import { readFileSync } from "fs";
 describe("Find Issues", function () {
   it("Find CSS issues", function () {
     const issues = findIssues(
-      readFileSync("sample_project/style.css", "utf8"),
+      readFileSync("sample_projects/sample_project/style.css", "utf8"),
       {
         "-webkit-mask-repeat-y:": {
           deprecated: false,
@@ -47,7 +47,7 @@ describe("Find Issues", function () {
   });
   it("Find HTML issues", function () {
     const issues = findIssues(
-      readFileSync("sample_project/index.html", "utf8"),
+      readFileSync("sample_projects/sample_project/index.html", "utf8"),
       {
         "<center": { deprecated: true, browserIssues: [] },
         "is=": { deprecated: false, browserIssues: ["chrome"] },
@@ -68,7 +68,7 @@ describe("Find Issues", function () {
   });
   it("Find JS issues", function () {
     const issues = findIssues(
-      readFileSync("sample_project/script.js", "utf8"),
+      readFileSync("sample_projects/sample_project/script.js", "utf8"),
       {
         "VideoEncoder\\(": { deprecated: true, browserIssues: ["firefox"] },
         "InternalError\\(": { deprecated: false, browserIssues: ["chrome"] },
@@ -90,7 +90,7 @@ describe("Find Issues", function () {
   });
   it("Warning issue", function () {
     const issues = findIssues(
-      readFileSync("sample_project/style.css", "utf8"),
+      readFileSync("sample_projects/sample_project/style.css", "utf8"),
       {
         "-webkit-mask-repeat-y:": { deprecated: false, browserIssues: ["ie"] },
       },
@@ -108,7 +108,7 @@ describe("Find Issues", function () {
   });
   it("Ignore excluded browsers", function () {
     const issues = findIssues(
-      readFileSync("sample_project/style.css", "utf8"),
+      readFileSync("sample_projects/sample_project/style.css", "utf8"),
       {
         "-webkit-mask-repeat-y:": { deprecated: false, browserIssues: ["ie"] },
       },
@@ -119,7 +119,7 @@ describe("Find Issues", function () {
   });
   it("Include MDN Url", function () {
     const issues = findIssues(
-      readFileSync("sample_project/style.css", "utf8"),
+      readFileSync("sample_projects/sample_project/style.css", "utf8"),
       {
         "-webkit-mask-repeat-y:": {
           deprecated: false,