CSS – Properties with alternative names

alternativeCSSPropertiesByStandardName.js

/* Gathered from mdn-browser-compat-data using the default browserslist config */

export const alternativeCSSPropertiesByStandardName = [
  "color-adjust": ["-webkit-print-color-adjust"],
  "grid-auto-columns": ["-ms-grid-columns"],
  "grid-auto-rows": ["-ms-grid-rows"],
  "overflow-wrap": ["word-wrap"],
  "scroll-margin-bottom": ["scroll-snap-margin-bottom"],
  "scroll-margin-left": ["scroll-snap-margin-left"],
  "scroll-margin-right": ["scroll-snap-margin-right"],
  "scroll-margin-top": ["scroll-snap-margin-top"],
  "scroll-margin": ["scroll-snap-margin"],
  "text-combine-upright": ["-ms-text-combine-horizontal", "-webkit-text-combine"],
]

/* =========================== Source (unpolished) =========================== */

import browserslist from "browserslist";
import compareVersions from "compare-versions";
import MDNBrowserCompatData from "mdn-browser-compat-data";
import MDNData from "mdn-data";

const cssPropertyNames = new Set(
  Object.entries(MDNData.css.properties)
    .filter(
      ([, { status }]) => status === "standard" || status === "experimental"
    )
    .map(([name]) => name)
);

const mdnIdsByBrowserslistId = new Map([
  /* Keys: https://github.com/browserslist/browserslist#browsers */
  /* Values: https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers */
  ["chrome", "chrome"],
  ["and_chr", "chrome_android"],
  ["edge", "edge"],
  ["firefox", "firefox"],
  ["and_ff", "firefox_android"],
  ["ie", "ie"],
  ["node", "nodejs"],
  ["opera", "opera"],
  ["op_mob", "opera_android"],
  ["and_qq", "qq_android"],
  ["safari", "safari"],
  ["ios_saf", "safari_ios"],
  ["samsung", "samsunginternet_android"],
  ["and_uc", "uc_android"],
  ["and_uc", "uc_chinese_android"],
  ["android", "webview_android"],
]);

/*
browserslist("defaults")
  .map((stat) => {
    const [browserId, versionRange] = stat.split(" ");
    return [mdnIdsByBrowserslistId.get(browserId), versionRange.split("-")];
  })
  .filter(([browserId]) => browserId);
*/
const supportedMinVersionsByBrowserId = new Map([
  ["chrome_android", "81"],
  ["firefox_android", "68"],
  ["qq_android", "10.4"],
  ["uc_chinese_android", "12.12"],
  ["chrome", "83"],
  ["edge", "18"],
  ["firefox", "68"], // TODO: Use 77 instead of 68
  ["ie", "11"],
  ["safari_ios", "12.2"],
  ["opera", "68"],
  ["safari", "13"],
  ["samsunginternet_android", "11.1"],
]);

for (const [property, { __compat }] of Object.entries(
  MDNBrowserCompatData.css.properties
)) {
  if (__compat && cssPropertyNames.has(property)) {
    for (const [browserId, supportStatement] of Object.entries(
      __compat.support
    )) {
      if (!supportedMinVersionsByBrowserId.has(browserId)) continue;
      const supportStatements = Array.isArray(supportStatement)
        ? supportStatement
        : [supportStatement];
      supportStatements.forEach(
        ({ version_added, version_removed, prefix, alternative_name }) => {
          const minSupportedVersion = supportedMinVersionsByBrowserId.get(
            browserId
          );
          if (
            !version_removed ||
            compareVersions(version_removed, minSupportedVersion) > 0
          ) {
            const hasNativeSupport = supportStatements.find(
              (otherStatement) =>
                !otherStatement.prefix &&
                !otherStatement.alternative_name &&
                (typeof otherStatement.version_added === "string"
                  ? compareVersions(
                      otherStatement.version_added.replace("≤", ""),
                      minSupportedVersion
                    ) <= 0
                  : otherStatement.version_added) &&
                !otherStatement.version_removed
            );
            if (!hasNativeSupport) {
              if (alternative_name) {
                console.log(property, alternative_name);
              }
              if (prefix) {
                // console.log(property, prefix + property);
              }
            }
          }
        }
      );
    }
  }
}

console.log(supportedMinVersionsByBrowserId);