stylelint-browser-compat 1.0.0-beta.1

package/lib/rule.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ruleName = exports.plugin = exports.meta = exports.messages = void 0;
+
+var _browserCompatData = _interopRequireDefault(require("@mdn/browser-compat-data"));
+
+var _browserslist = _interopRequireDefault(require("browserslist"));
+
+var _dotProp = _interopRequireDefault(require("dot-prop"));
+
+var _stylelint = _interopRequireDefault(require("stylelint"));
+
+var _collect_features = require("./collect_features");
+
+var _is_supported = require("./is_supported");
+
+var _options = require("./options");
+
+var _parse_browserslist_version = require("./parse_browserslist_version");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ruleName = 'plugin/browser-compat';
+exports.ruleName = ruleName;
+
+const messages = _stylelint.default.utils.ruleMessages(ruleName, {
+  disallowPrefix: featureName => {
+    return `${featureName} with vendor prefix is not allowed by stylelint config.`;
+  },
+  rejected: (featureName, targets, mdnUrl) => {
+    if (mdnUrl) {
+      return `${featureName} is not supported in ${targets}. See ${mdnUrl}.`;
+    }
+
+    return `${featureName} is not supported in ${targets}.`;
+  }
+});
+
+exports.messages = messages;
+const meta = {
+  url: 'https://github.com/3846masa/stylelint-browser-compat'
+};
+exports.meta = meta;
+
+const ruleFunction = (enabled, passedOptions) => {
+  return async (postcssRoot, postcssResult) => {
+    if (!enabled) {
+      return;
+    }
+
+    const parseOptionsResult = _options.ruleOptionsSchema.safeParse(passedOptions);
+
+    const validOptions = _stylelint.default.utils.validateOptions(postcssResult, ruleName, {
+      actual: passedOptions,
+      optional: true,
+      possible: () => parseOptionsResult.success
+    });
+
+    if (!validOptions || !parseOptionsResult.success) {
+      return;
+    }
+
+    const options = parseOptionsResult.data;
+    const versions = (0, _browserslist.default)(options.browserslist ?? null, {});
+    const targets = (0, _parse_browserslist_version.parseBrowsersListVersion)(versions);
+    const features = await (0, _collect_features.collectFeatures)({
+      container: postcssRoot,
+      ignoreFeatures: new Set(options.allow.features)
+    });
+
+    for (const feature of features) {
+      const compat = _dotProp.default.get(_browserCompatData.default.css, feature.id);
+
+      if (!(compat !== null && compat !== void 0 && compat.__compat)) {
+        continue;
+      }
+
+      const {
+        mdn_url: mdnUrl,
+        support: supportBlock
+      } = compat.__compat;
+
+      if (options.allow.prefix !== true && feature.prefix != null) {
+        _stylelint.default.utils.report({
+          endIndex: feature.endIndex,
+          index: feature.index,
+          message: messages.disallowPrefix(feature.name),
+          node: feature.node,
+          result: postcssResult,
+          ruleName
+        });
+
+        continue;
+      }
+
+      const notSupportedTargets = targets.filter(target => {
+        return (0, _is_supported.isSupported)(supportBlock, target, {
+          allow: options.allow
+        }) === false;
+      });
+
+      if (notSupportedTargets.length === 0) {
+        continue;
+      }
+
+      const notSupportedTargetText = notSupportedTargets.map(target => `${target.target.name} ${target.versionString}`).join(', ');
+
+      _stylelint.default.utils.report({
+        endIndex: feature.endIndex,
+        index: feature.index,
+        message: messages.rejected(feature.name, notSupportedTargetText, mdnUrl ?? ''),
+        node: feature.node,
+        result: postcssResult,
+        ruleName
+      });
+    }
+  };
+};
+
+const plugin = _stylelint.default.createPlugin(ruleName, ruleFunction);
+
+exports.plugin = plugin;

package/lib/selectors/__attributes/collect_features.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+async function collectFeatures({
+  node,
+  parent
+}) {
+  const features = [];
+  const index = node.sourceIndex;
+  const endIndex = index + node.toString().length;
+  features.push({
+    endIndex,
+    id: `selectors.attribute`,
+    index,
+    name: `Attribute selector`,
+    node: parent
+  });
+
+  if (node.insensitive || node.raws.insensitiveFlag === 'i' || node.raws.insensitiveFlag === 'I') {
+    features.push({
+      endIndex,
+      id: `selectors.attribute.case_insensitive_modifier`,
+      index,
+      name: `Attribute selector with case-insensitive modifier`,
+      node: parent
+    });
+  }
+
+  if (node.raws.insensitiveFlag === 's' || node.raws.insensitiveFlag === 'S') {
+    features.push({
+      endIndex,
+      id: `selectors.attribute.case_sensitive_modifier`,
+      index,
+      name: `Attribute selector with case-sensitive modifier`,
+      node: parent
+    });
+  }
+
+  return features;
+}

package/lib/selectors/__classes/collect_features.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+async function collectFeatures({
+  node,
+  parent
+}) {
+  const features = [];
+  const index = node.sourceIndex;
+  const endIndex = index + node.toString().length;
+  features.push({
+    endIndex,
+    id: `selectors.class`,
+    index,
+    name: `Class selector`,
+    node: parent
+  });
+  return features;
+}

package/lib/selectors/__combinators/collect_features.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+async function collectFeatures({
+  node,
+  parent
+}) {
+  const features = [];
+  const index = node.sourceIndex;
+  const endIndex = index + node.value.length;
+
+  switch (node.value) {
+    case '+':
+      {
+        features.push({
+          endIndex,
+          id: `selectors.adjacent_sibling`,
+          index,
+          name: `Adjacent sibling combinator`,
+          node: parent
+        });
+        break;
+      }
+
+    case '>':
+      {
+        features.push({
+          endIndex,
+          id: `selectors.child`,
+          index,
+          name: `Child combinator`,
+          node: parent
+        });
+        break;
+      }
+
+    case '||':
+      {
+        features.push({
+          endIndex,
+          id: `selectors.column`,
+          index,
+          name: `Column combinator`,
+          node: parent
+        });
+        break;
+      }
+
+    case ' ':
+      {
+        features.push({
+          endIndex,
+          id: `selectors.descendant`,
+          index,
+          name: `Descendant combinator`,
+          node: parent
+        });
+        break;
+      }
+
+    case '>>':
+      {
+        features.push({
+          endIndex,
+          id: `selectors.descendant.two_greater_than_syntax`,
+          index,
+          name: `">>" syntax for descendant combinator`,
+          node: parent
+        });
+        break;
+      }
+
+    case '~':
+      {
+        features.push({
+          endIndex,
+          id: `selectors.general_sibling`,
+          index,
+          name: `General sibling combinator`,
+          node: parent
+        });
+        break;
+      }
+  }
+
+  return features;
+}

package/lib/selectors/__ids/collect_features.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+async function collectFeatures({
+  node,
+  parent
+}) {
+  const features = [];
+  const index = node.sourceIndex;
+  const endIndex = index + node.toString().length;
+  features.push({
+    endIndex,
+    id: `selectors.id`,
+    index,
+    name: `ID selector`,
+    node: parent
+  });
+  return features;
+}

package/lib/selectors/__pseudos/collect_features.js

@@ -0,0 +1,228 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+var _postcssSelectorParser = require("postcss-selector-parser");
+
+var _pseudo_selector_name_set = require("./pseudo_selector_name_set");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PSEUDO_TYPE_CLASS = 'pseudo-class';
+const PSEUDO_TYPE_ELEMENT = 'pseudo-element';
+
+async function collectFeatures({
+  node,
+  parent
+}) {
+  const promises = [];
+  const pseudoType = (0, _postcssSelectorParser.isPseudoElement)(node) ? PSEUDO_TYPE_ELEMENT : PSEUDO_TYPE_CLASS;
+  const index = node.sourceIndex;
+  const endIndex = index + node.toString().length;
+  const [, vendorPrefix] = /^::?(-(?:webkit|moz|ms|o)-)/.exec(node.value) ?? [];
+  const selector = node.value;
+  const id = selector.replace(/^::?/, '');
+
+  if (_pseudo_selector_name_set.pseudoSelectorNameSet.has(id)) {
+    promises.push(Promise.resolve([{
+      endIndex,
+      id: `selectors.${id}`,
+      index,
+      name: `"${selector}" ${pseudoType}`,
+      node: parent
+    }]));
+  } else if (vendorPrefix != null) {
+    const selector = node.value.replace(vendorPrefix, '');
+    const id = selector.replace(/^::?/, '');
+
+    if (_pseudo_selector_name_set.pseudoSelectorNameSet.has(id)) {
+      promises.push(Promise.resolve([{
+        endIndex,
+        id: `selectors.${id}`,
+        index,
+        name: `"${selector}" ${pseudoType}`,
+        node: parent,
+        prefix: vendorPrefix
+      }]));
+    }
+  }
+
+  switch (id) {
+    case 'active':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../active/non_a_elements/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'after':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../after/animation_and_transition_support/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'backdrop':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../backdrop/dialog/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'before':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../before/animation_and_transition_support/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'cue':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../cue/selector_argument/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'host':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../hostfunction/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'hover':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../hover/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'invalid':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../invalid/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'marker':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../marker/animation_and_transition_support/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'not':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../not/selector_list/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'nth-child':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../nth-child/of_syntax/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'nth-last-child':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../nth-last-child/of_syntax/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+
+    case 'valid':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../valid/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node,
+            parent
+          });
+        }));
+        break;
+      }
+  }
+
+  const features = (await Promise.all(promises)).flat();
+  return features;
+}

package/lib/selectors/__pseudos/pseudo_selector_name_set.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pseudoSelectorNameSet = void 0;
+
+var _browserCompatData = _interopRequireDefault(require("@mdn/browser-compat-data"));
+
+var _dotProp = _interopRequireDefault(require("dot-prop"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const IGNORE_KEYS = new Set(['adjacent_sibling', 'attribute', 'child', 'class', 'column', 'descendant', 'general_sibling', 'id', 'list', 'namespace', 'type', 'universal', // for @page at-rule
+'first', // same as :host
+'hostfunction']);
+const pseudoSelectorNameSet = new Set(Array.from(Object.keys(_dotProp.default.get(_browserCompatData.default.css, 'selectors') ?? {})).filter(k => !IGNORE_KEYS.has(k)));
+exports.pseudoSelectorNameSet = pseudoSelectorNameSet;

package/lib/selectors/__tags/collect_features.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+async function collectFeatures({
+  node,
+  parent
+}) {
+  const features = [];
+
+  if (node.namespace === '*') {
+    const namespaceLength = `${node.namespace}|`.length;
+    const index = node.sourceIndex - namespaceLength;
+    const endIndex = index + namespaceLength;
+    features.push({
+      endIndex,
+      id: `selectors.universal.namespaces`,
+      index,
+      name: `Universal namespace selector`,
+      node: parent
+    });
+  } else if (node.namespace != null) {
+    const namespaceLength = `${node.namespace}|`.length;
+    const index = node.sourceIndex - namespaceLength;
+    const endIndex = index + namespaceLength;
+    features.push({
+      endIndex,
+      id: `selectors.type.namespaces`,
+      index,
+      name: `Namespace selector`,
+      node: parent
+    });
+  }
+
+  const index = node.sourceIndex;
+  const endIndex = index + node.value.length;
+  features.push({
+    endIndex,
+    id: `selectors.type`,
+    index,
+    name: `Type selector`,
+    node: parent
+  });
+  return features;
+}

package/lib/selectors/__universal/collect_features.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+async function collectFeatures({
+  node,
+  parent
+}) {
+  const features = [];
+
+  if (node.namespace === '*') {
+    const namespaceLength = `${node.namespace}|`.length;
+    const index = node.sourceIndex - namespaceLength;
+    const endIndex = index + namespaceLength;
+    features.push({
+      endIndex,
+      id: `selectors.universal.namespaces`,
+      index,
+      name: `Universal namespace selector`,
+      node: parent
+    });
+  }
+
+  const index = node.sourceIndex;
+  const endIndex = index + node.value.length;
+  features.push({
+    endIndex,
+    id: `selectors.universal`,
+    index,
+    name: `Universal selector`,
+    node: parent
+  });
+  return features;
+}

package/lib/selectors/active/non_a_elements/collect_features.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+async function collectFeatures({
+  node,
+  parent
+}) {
+  if (node.value !== ':active') {
+    return [];
+  }
+
+  const features = [];
+  let current = node;
+
+  while (current = current.prev()) {
+    if (['id', 'class', 'attribute', 'tag', 'pseudo'].includes(current.type) !== true) {
+      break;
+    }
+
+    if (current.type === 'tag' && current.value !== 'a') {
+      const index = node.sourceIndex;
+      const endIndex = index + node.value.length;
+      features.push({
+        endIndex,
+        id: `selectors.active.non_a_elements`,
+        index,
+        name: `":active" pseudo-class with the non-anchor tag`,
+        node: parent
+      });
+    }
+  }
+
+  return features;
+}