diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index fbd62c1..ec96f83 100644 --- a/.github/workflows/node.js.yml +++ b/.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 diff --git a/.npmignore b/.npmignore index b912b5f..dc8bb2f 100644 --- a/.npmignore +++ b/.npmignore @@ -1,5 +1,4 @@ -sample_project/ -sample_project_2/ +sample_projects/ *.test.* *.spec.* src/ diff --git a/.vscode-test.mjs b/.vscode-test.mjs index 6d48333..31bf069 100644 --- a/.vscode-test.mjs +++ b/.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", diff --git a/.vscodeignore b/.vscodeignore index 692ab7b..1ef4ebf 100644 --- a/.vscodeignore +++ b/.vscodeignore @@ -1,5 +1,4 @@ -sample_project/ -sample_project_2/ +sample_projects/ *.test.* *.spec.* **/test/** diff --git a/CHANGELOG.md b/CHANGELOG.md index 93f65e9..35c97da 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 233d8cd..685f38f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,15 @@ { "name": "browser-compatibility-checker", - "version": "1.0.4", + "version": "1.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "browser-compatibility-checker", - "version": "1.0.4", + "version": "1.1.0", "dependencies": { "@mdn/browser-compat-data": "^5.5.8", + "browserslist": "^4.22.3", "commander": "^12.0.0", "kleur": "^4.1.5", "minimatch": "^9.0.3" @@ -767,6 +768,37 @@ "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==", "dev": true }, + "node_modules/browserslist": { + "version": "4.22.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz", + "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "caniuse-lite": "^1.0.30001580", + "electron-to-chromium": "^1.4.648", + "node-releases": "^2.0.14", + "update-browserslist-db": "^1.0.13" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -788,6 +820,25 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/caniuse-lite": { + "version": "1.0.30001587", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz", + "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ] + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -1026,6 +1077,11 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true }, + "node_modules/electron-to-chromium": { + "version": "1.4.665", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.665.tgz", + "integrity": "sha512-UpyCWObBoD+nSZgOC2ToaIdZB0r9GhqT2WahPKiSki6ckkSuKhQNso8V2PrFcHBMleI/eqbKgVQgVC4Wni4ilw==" + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", @@ -1036,7 +1092,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "dev": true, "engines": { "node": ">=6" } @@ -2056,6 +2111,11 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/node-releases": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", + "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==" + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -2191,6 +2251,11 @@ "node": ">=8" } }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + }, "node_modules/picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", @@ -2744,6 +2809,35 @@ "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", "dev": true }, + "node_modules/update-browserslist-db": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", + "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "escalade": "^3.1.1", + "picocolors": "^1.0.0" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index 74db91c..bee6f1f 100644 --- a/package.json +++ b/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" diff --git a/sample_project/index.html b/sample_projects/sample_project/index.html similarity index 100% rename from sample_project/index.html rename to sample_projects/sample_project/index.html diff --git a/sample_project/script.js b/sample_projects/sample_project/script.js similarity index 100% rename from sample_project/script.js rename to sample_projects/sample_project/script.js diff --git a/sample_project/style.css b/sample_projects/sample_project/style.css similarity index 100% rename from sample_project/style.css rename to sample_projects/sample_project/style.css diff --git a/sample_project_2/index.html b/sample_projects/sample_project_2/index.html similarity index 100% rename from sample_project_2/index.html rename to sample_projects/sample_project_2/index.html diff --git a/sample_project_2/script.js b/sample_projects/sample_project_2/script.js similarity index 100% rename from sample_project_2/script.js rename to sample_projects/sample_project_2/script.js diff --git a/sample_project_2/style.css b/sample_projects/sample_project_2/style.css similarity index 100% rename from sample_project_2/style.css rename to sample_projects/sample_project_2/style.css diff --git a/sample_projects/sample_project_3/package.json b/sample_projects/sample_project_3/package.json new file mode 100644 index 0000000..1991418 --- /dev/null +++ b/sample_projects/sample_project_3/package.json @@ -0,0 +1,5 @@ +{ + "browserslist": [ + "> 0%" + ] +} diff --git a/src/browser-compatibility-checker/browserslist.ts b/src/browser-compatibility-checker/browserslist.ts new file mode 100644 index 0000000..f975d44 --- /dev/null +++ b/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); +} diff --git a/src/browser-compatibility-checker/compat-issues.ts b/src/browser-compatibility-checker/compat-issues.ts index c535ed0..def4177 100644 --- a/src/browser-compatibility-checker/compat-issues.ts +++ 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(); diff --git a/src/browser-compatibility-checker/index.ts b/src/browser-compatibility-checker/index.ts index 5a059a9..db6caaf 100644 --- a/src/browser-compatibility-checker/index.ts +++ b/src/browser-compatibility-checker/index.ts @@ -1,2 +1,3 @@ export { findIssues } from "./check"; export { CompatIssue } from "./compat-issues"; +export { getBrowsersList } from "./browserslist"; diff --git a/src/browser-compatibility-checker/test/browserslist.spec.ts b/src/browser-compatibility-checker/test/browserslist.spec.ts new file mode 100644 index 0000000..4bff284 --- /dev/null +++ b/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); + }); +}); diff --git a/src/browser-compatibility-checker/test/check.spec.ts b/src/browser-compatibility-checker/test/check.spec.ts index 0155330..a6a87dc 100644 --- a/src/browser-compatibility-checker/test/check.spec.ts +++ b/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"), { "", "Folder to scan") .option( "-b, --browsers [browsers]", "Comma seperated list of browsers to check", - [ - "chrome", - "edge", - "firefox", - "opera", - "safari", - "ie", - "chrome_android", - "firefox_android", - "opera_android", - "safari_ios", - "samsunginternet_android", - "webview_android", - ], + DEFAULT_BROWSERS, ) .option( "-i, --ignore [ignore]", @@ -45,15 +51,21 @@ program program.parse(process.argv); const { folder, browsers, ignore } = program.opts() as CliOptions; -const browsersToCheck = - typeof browsers === "string" ? browsers.split(",") : browsers; -const pathsToIgnore = typeof ignore === "string" ? ignore.split(",") : ignore; if (!folder) { console.error(kleur.red("No folder path provided.")); process.exit(1); } +const browsersList = getBrowsersList(folder); +const browsersArg = + typeof browsers === "string" ? browsers.split(",") : browsers; +const browsersToCheck = + browsersList && browsersList.length > 0 && browsersArg == DEFAULT_BROWSERS + ? browsersList + : browsersArg; +const pathsToIgnore = typeof ignore === "string" ? ignore.split(",") : ignore; + const files = readdirSync(folder, { recursive: true, encoding: "utf8" }); console.log(`Scanning: ${folder} (${files.length} files)`); let hasIssue = false; diff --git a/src/extension.ts b/src/extension.ts index 600aba1..c3c9c4c 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -1,5 +1,9 @@ import * as vscode from "vscode"; -import { findIssues, CompatIssue } from "./browser-compatibility-checker"; +import { + findIssues, + CompatIssue, + getBrowsersList, +} from "./browser-compatibility-checker"; import { minimatch } from "minimatch"; const compatIssues: { @@ -89,11 +93,21 @@ export function activate(context: vscode.ExtensionContext) { const vscodeConfig = vscode.workspace.getConfiguration( "browser-compatibility-checker", ); + let browsersToCheck = vscodeConfig.browsersToCheck; + if (vscode.workspace.workspaceFolders) { + const detectedBrowsersList = getBrowsersList( + vscode.workspace.workspaceFolders![0].uri.fsPath, + ); + if (detectedBrowsersList && detectedBrowsersList.length > 0) { + vscode.window.showInformationMessage("Using detected browserslist"); + browsersToCheck = detectedBrowsersList; + } + } const config: Config = { enableOnChange: vscodeConfig.enableOnChange, warnForOtherBrowsers: vscodeConfig.warnForOtherBrowsers, useError: vscodeConfig.useError, - browsersToCheck: vscodeConfig.browsersToCheck, + browsersToCheck, foldersToIgnore: vscodeConfig.foldersToIgnore, };