stylelint-browser-compat 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright © 2022 3846masa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+# stylelint-browser-compat
+
+![](./assets/ogp.png)
+
+[![npm](https://flat.badgen.net/npm/v/stylelint-browser-compat)](https://www.npmjs.com/package/stylelint-browser-compat)
+[![license](https://flat.badgen.net/badge/license/MIT/blue)](LICENSE)
+[![standard-readme compliant](https://flat.badgen.net/badge/readme%20style/standard/green)](https://github.com/RichardLitt/standard-readme)
+
+Yet another linter rule to detect compatibility of CSS features.
+
+This plugin checks if the CSS you're using is supported by the browsers you're targeting.
+It uses [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) to detect browser support.
+
+**:warning: This plugin is beta. USE AT YOUR OWN RISK.**
+
+## Table of Contents
+
+- [Background](#background)
+- [Install](#install)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Background
+
+`stylelint-no-unsupported-browser-features` (using `doiuse`) are available to detect compatibility of CSS features.
+
+However, `doiuse` have not been maintained for a long time.
+
+This library provides another alternative to detect compatibility of CSS features.
+
+Although `doiuse` detects compatibility from `caniuse` data, this library uses `@mdn/browser-compat-data` to do so.
+
+## Install
+
+```bash
+$ npm install --dev browserslist stylelint stylelint-browser-compat
+```
+
+```bash
+$ yarn add --dev browserslist stylelint stylelint-browser-compat
+```
+
+## Usage
+
+```js
+module.exports = {
+  plugins: ['stylelint-browser-compat'],
+  rules: {
+    'plugin/browser-compat': [
+      true,
+      {
+        allow: {
+          features: ['at-rules.supports'],
+          flagged: false,
+          partialImplementation: false,
+          prefix: true,
+        },
+        browserslist: ['last 2 versions'],
+      },
+    ],
+  },
+};
+```
+
+### Options
+
+- `browserslist` (string or array, optional)
+  - Accepts [browserslist queries](https://github.com/browserslist/browserslist#queries) for target browsers.
+  - By default, browserslist automatically loads the configuration file (e.g. `package.json`, `.browserslistrc`).
+- `allow.features` (array, optional)
+  - Accepts an array of features to allow.
+  - Feature names are from [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data).
+    - For example, if you want to use `@supports` at-rules, pass `at-rules.supports`.
+- `allow.flagged` (boolean, optional)
+  - Allows features that are available when the browser's feature flags is enabled.
+  - `false` by default
+- `allow.partialImplementation` (boolean, optional)
+  - Allows features that are partial implementations.
+  - `false` by default
+- `allow.prefix` (boolean, optional)
+  - Allows features with vendor prefix.
+  - `true` by default
+
+## Contributing
+
+PRs accepted.
+
+## License
+
+[MIT (c) 3846masa](./LICENSE)

package/lib/at-rules/at_rules_name_set.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.atRulesNameSet = 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([]);
+const atRulesNameSet = new Set(Array.from(Object.keys(_dotProp.default.get(_browserCompatData.default.css, 'at-rules') ?? {})).filter(k => !IGNORE_KEYS.has(k)));
+exports.atRulesNameSet = atRulesNameSet;

package/lib/at-rules/collect_features.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+var _at_rules_name_set = require("./at_rules_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; }
+
+async function collectFeatures({
+  ignoreFeatures,
+  node
+}) {
+  const promises = [];
+
+  if (_at_rules_name_set.atRulesNameSet.has(node.name)) {
+    promises.push(Promise.resolve([{
+      endIndex: `@${node.name}`.length,
+      id: `at-rules.${node.name}`,
+      index: 0,
+      name: `"@${node.name}" at rules`,
+      node
+    }]));
+  }
+
+  switch (node.name) {
+    case 'counter-style':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./counter-style/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node
+          });
+        }));
+        break;
+      }
+
+    case 'document':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./document/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            ignoreFeatures,
+            node
+          });
+        }));
+        break;
+      }
+
+    case 'font-face':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./font-face/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node
+          });
+        }));
+        break;
+      }
+
+    case 'font-feature-values':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./font-feature-values/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node
+          });
+        }));
+        break;
+      }
+
+    case 'keyframes':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./keyframes/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node
+          });
+        }));
+        break;
+      }
+
+    case 'media':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./media/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            ignoreFeatures,
+            node
+          });
+        }));
+        break;
+      }
+
+    case 'page':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./page/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            ignoreFeatures,
+            node
+          });
+        }));
+        break;
+      }
+
+    case 'property':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./property/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node
+          });
+        }));
+        break;
+      }
+
+    case 'scroll-timeline':
+      {
+        promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./scroll-timeline/collect_features"))).then(({
+          collectFeatures
+        }) => {
+          return collectFeatures({
+            node
+          });
+        }));
+        break;
+      }
+  }
+
+  const features = (await Promise.all(promises)).flat();
+  return features;
+}

package/lib/at-rules/counter-style/collect_features.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+var _descriptor_name_set = require("./descriptor_name_set");
+
+async function collectFeatures({
+  node
+}) {
+  const features = [];
+  node.walkDecls(delc => {
+    const [vendorPrefix] = /^-(webkit|moz|ms|o)-/.exec(delc.prop) ?? [];
+
+    if (_descriptor_name_set.descriptorNameSet.has(delc.prop)) {
+      features.push({
+        endIndex: delc.prop.length,
+        id: `at-rules.counter-style.${delc.prop}`,
+        index: 0,
+        name: `"${delc.prop}" descriptor of the @counter-style`,
+        node: delc
+      });
+    } else if (vendorPrefix != null) {
+      const name = delc.prop.replace(vendorPrefix, '');
+
+      if (_descriptor_name_set.descriptorNameSet.has(name)) {
+        features.push({
+          endIndex: delc.prop.length,
+          id: `at-rules.counter-style.${name}`,
+          index: 0,
+          name: `"${name}" descriptor of the @counter-style`,
+          node: delc,
+          prefix: vendorPrefix
+        });
+      }
+    }
+  });
+  return features;
+}

package/lib/at-rules/counter-style/descriptor_name_set.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.descriptorNameSet = 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([]);
+const descriptorNameSet = new Set(Array.from(Object.keys(_dotProp.default.get(_browserCompatData.default.css, 'at-rules.counter-style') ?? {})).filter(k => !IGNORE_KEYS.has(k)));
+exports.descriptorNameSet = descriptorNameSet;

package/lib/at-rules/document/collect_features.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+async function collectFeatures({
+  ignoreFeatures,
+  node
+}) {
+  const promises = [];
+  const valueRoot = (0, _postcssValueParser.default)(node.params);
+
+  for (const valueNode of valueRoot.nodes) {
+    if (valueNode.type === 'function' && valueNode.value === 'regexp') {
+      promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./regexp/collect_features"))).then(({
+        collectFeatures
+      }) => {
+        return collectFeatures({
+          node: valueNode,
+          parent: node
+        });
+      }));
+    }
+  }
+
+  promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("../../collect_features"))).then(({
+    collectFeatures
+  }) => {
+    return collectFeatures({
+      container: node,
+      ignoreFeatures
+    });
+  }));
+  const features = (await Promise.all(promises)).flat();
+  return features;
+}

package/lib/at-rules/document/regexp/collect_features.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+async function collectFeatures({
+  node,
+  parent
+}) {
+  const features = [];
+
+  if (node.type === 'function' && node.value === 'regexp') {
+    var _parent$raws$afterNam;
+
+    const offset = `@${parent.name}`.length + (((_parent$raws$afterNam = parent.raws.afterName) === null || _parent$raws$afterNam === void 0 ? void 0 : _parent$raws$afterNam.length) ?? 0);
+    const index = offset + node.sourceIndex;
+    const endIndex = offset + node.sourceEndIndex;
+    features.push({
+      endIndex,
+      id: `at-rules.document.regexp`,
+      index,
+      name: `"regexp()" function of the @document`,
+      node: parent
+    });
+  }
+
+  return features;
+}

package/lib/at-rules/font-face/__font_type/collect_features.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+var _nodePath = _interopRequireDefault(require("node:path"));
+
+var _tsResults = require("ts-results");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+async function collectFeatures({
+  node,
+  parent
+}) {
+  var _parent$raws$between;
+
+  const features = [];
+
+  if (node.type !== 'function' || node.value !== 'url' || node.nodes.length !== 1 || node.nodes[0] == null) {
+    return features;
+  }
+
+  const urlPathNode = node.nodes[0];
+
+  const url = _tsResults.Result.wrap(() => new URL(urlPathNode.value, 'https://example.com/')).unwrapOr(null);
+
+  if (url == null || url.protocol !== 'http:' && url.protocol !== 'https:') {
+    return features;
+  }
+
+  const extension = _nodePath.default.extname(url.pathname);
+
+  const offset = parent.prop.length + (((_parent$raws$between = parent.raws.between) === null || _parent$raws$between === void 0 ? void 0 : _parent$raws$between.length) ?? 0);
+  const index = offset + urlPathNode.sourceIndex;
+  const endIndex = offset + urlPathNode.sourceEndIndex;
+
+  switch (extension.toLowerCase()) {
+    case '.svg':
+      {
+        features.push({
+          endIndex,
+          id: `at-rules.font-face.SVG_fonts`,
+          index,
+          name: `SVG fonts`,
+          node: parent
+        });
+        break;
+      }
+
+    case '.woff':
+      {
+        features.push({
+          endIndex,
+          id: `at-rules.font-face.WOFF`,
+          index,
+          name: `WOFF`,
+          node: parent
+        });
+        break;
+      }
+
+    case '.woff2':
+      {
+        features.push({
+          endIndex,
+          id: `at-rules.font-face.WOFF_2`,
+          index,
+          name: `WOFF2`,
+          node: parent
+        });
+        break;
+      }
+  }
+
+  return features;
+}

package/lib/at-rules/font-face/collect_features.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+
+var _descriptor_name_set = require("./descriptor_name_set");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+async function collectFeatures({
+  node
+}) {
+  const promises = [];
+  node.walkDecls(delc => {
+    const [vendorPrefix] = /^-(webkit|moz|ms|o)-/.exec(delc.prop) ?? [];
+
+    if (_descriptor_name_set.descriptorNameSet.has(delc.prop)) {
+      promises.push(Promise.resolve([{
+        endIndex: delc.prop.length,
+        id: `at-rules.font-face.${delc.prop}`,
+        index: 0,
+        name: `"${delc.prop}" descriptor of the @font-face`,
+        node: delc
+      }]));
+    } else if (vendorPrefix != null) {
+      const name = delc.prop.replace(vendorPrefix, '');
+
+      if (_descriptor_name_set.descriptorNameSet.has(name)) {
+        promises.push(Promise.resolve([{
+          endIndex: delc.prop.length,
+          id: `at-rules.font-face.${name}`,
+          index: 0,
+          name: `"${name}" descriptor of the @font-face`,
+          node: delc,
+          prefix: vendorPrefix
+        }]));
+      }
+    }
+
+    const valueRoot = (0, _postcssValueParser.default)(delc.value);
+
+    if (delc.prop === 'src') {
+      for (const valueNode of valueRoot.nodes) {
+        if (valueNode.type === 'function' && valueNode.value === 'url') {
+          promises.push(Promise.resolve().then(() => _interopRequireWildcard(require("./__font_type/collect_features"))).then(({
+            collectFeatures
+          }) => {
+            return collectFeatures({
+              node: valueNode,
+              parent: delc
+            });
+          }));
+        }
+      }
+    }
+  });
+  const features = (await Promise.all(promises)).flat();
+  return features;
+}

package/lib/at-rules/font-face/descriptor_name_set.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.descriptorNameSet = 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(['SVG_fonts', 'WOFF', 'WOFF_2']);
+const descriptorNameSet = new Set(Array.from(Object.keys(_dotProp.default.get(_browserCompatData.default.css, 'at-rules.font-face') ?? {})).filter(k => !IGNORE_KEYS.has(k)));
+exports.descriptorNameSet = descriptorNameSet;

package/lib/at-rules/font-feature-values/at_rules_name_set.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.atRulesNameSet = 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([]);
+const atRulesNameSet = new Set(Array.from(Object.keys(_dotProp.default.get(_browserCompatData.default.css, 'at-rules.font-feature-values') ?? {})).filter(k => !IGNORE_KEYS.has(k)));
+exports.atRulesNameSet = atRulesNameSet;

package/lib/at-rules/font-feature-values/collect_features.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+var _at_rules_name_set = require("./at_rules_name_set");
+
+async function collectFeatures({
+  node
+}) {
+  const features = [];
+  node.each(node => {
+    if (node.type !== 'atrule') {
+      return;
+    }
+
+    if (_at_rules_name_set.atRulesNameSet.has(node.name)) {
+      features.push({
+        endIndex: `@${node.name}`.length,
+        id: `at-rules.font-feature-values.${node.name}`,
+        index: 0,
+        name: `"@${node.name}" at rules of the @font-feature-values`,
+        node
+      });
+    }
+  });
+  return features;
+}

package/lib/at-rules/keyframes/collect_features.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectFeatures = collectFeatures;
+
+async function collectFeatures({
+  node
+}) {
+  const features = [];
+  node.walkDecls(delc => {
+    const prop = delc.prop.replace(/^-(webkit|moz|ms|o)-/, '');
+
+    switch (prop) {
+      case 'clip-path':
+        {
+          features.push({
+            endIndex: delc.prop.length,
+            id: `properties.clip-path.animations`,
+            index: 0,
+            name: `CSS animation for clip-path`,
+            node: delc
+          });
+        }
+    }
+  });
+  return features;
+}