stylehacks 5.0.1 → 5.1.0

package/README.md

@@ -52,7 +52,11 @@ it will return `false` instead.
 h1 { _color: red }
 ```
 
-### `stylehacks.process(css, [options]).then(function(result) {})`
+### `postcss([ stylehacks(opts) ])`
+
+stylehacks can also be consumed as a PostCSS plugin. See the
+[documentation](https://github.com/postcss/postcss#usage) for examples for
+your environment.
 
 #### options
 
@@ -65,13 +69,6 @@ If lint mode is enabled, stylehacks will not remove hacks from the CSS; instead,
 it will add warnings to `Result#messages`.
 
 
-### `postcss([ stylehacks(opts) ])`
-
-stylehacks can also be consumed as a PostCSS plugin. See the
-[documentation](https://github.com/postcss/postcss#usage) for examples for
-your environment.
-
-
 ## Related
 
 stylehacks works well with your existing PostCSS setup:

package/package.json

@@ -1,17 +1,14 @@
 {
   "name": "stylehacks",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "Detect/remove browser hacks from CSS files.",
-  "main": "dist/index.js",
+  "main": "src/index.js",
+  "types": "types/index.d.ts",
   "files": [
     "LICENSE-MIT",
-    "dist"
+    "src",
+    "types"
   ],
-  "scripts": {
-    "prebuild": "del-cli dist",
-    "build": "cross-env BABEL_ENV=publish babel src --config-file ../../babel.config.json --out-dir dist --ignore \"**/__tests__/\"",
-    "prepublish": "yarn build"
-  },
   "keywords": [
     "browsers",
     "css",
@@ -31,7 +28,7 @@
   },
   "repository": "cssnano/cssnano",
   "dependencies": {
-    "browserslist": "^4.16.0",
+    "browserslist": "^4.16.6",
     "postcss-selector-parser": "^6.0.4"
   },
   "bugs": {
@@ -46,5 +43,5 @@
   "peerDependencies": {
     "postcss": "^8.2.15"
   },
-  "gitHead": "28c247175032fa03f04911cde56ad82d74d211cc"
-}
+  "readme": "# stylehacks\n\n> Detect/remove browser hacks from CSS files.\n\n\n## Install\n\nWith [npm](https://npmjs.org/package/stylehacks) do:\n\n```\nnpm install stylehacks --save\n```\n\n\n## Example\n\nIn its default mode, stylehacks will remove hacks from your CSS file, based on\nthe browsers that you wish to support.\n\n### Input\n\n```css\nh1 {\n    _color: white;\n    color: rgba(255, 255, 255, 0.5);\n}\n```\n\n### Output\n\n```css\nh1 {\n    color: rgba(255, 255, 255, 0.5);\n}\n```\n\n\n## API\n\n### `stylehacks.detect(node)`\n\nType: `function`  \nReturns: `boolean`\n\nThis method will take any PostCSS *node*, run applicable plugins depending on\nits type, then will return a boolean depending on whether it found any of\nthe supported hacks. For example, if the `decl` node found below is passed to\nthe `detect` function, it will return `true`. But if the `rule` node is passed,\nit will return `false` instead.\n\n```css\nh1 { _color: red }\n```\n\n### `postcss([ stylehacks(opts) ])`\n\nstylehacks can also be consumed as a PostCSS plugin. See the\n[documentation](https://github.com/postcss/postcss#usage) for examples for\nyour environment.\n\n#### options\n\n##### lint\n\nType: `boolean`  \nDefault: `false`\n\nIf lint mode is enabled, stylehacks will not remove hacks from the CSS; instead,\nit will add warnings to `Result#messages`.\n\n\n## Related\n\nstylehacks works well with your existing PostCSS setup:\n\n* [stylelint] - Comprehensive & modern CSS linter, to ensure that your code\n  style rules are respected.\n\n\n## Contributing\n\nPull requests are welcome. If you add functionality, then please add unit tests\nto cover it.\n\n\n## License\n\nMIT © [Ben Briggs](http://beneb.info)\n\n\n[stylelint]: https://github.com/stylelint/stylelint\n"
+}

package/src/dictionary/browsers.js

@@ -0,0 +1,9 @@
+'use strict';
+const FF_2 = 'firefox 2';
+const IE_5_5 = 'ie 5.5';
+const IE_6 = 'ie 6';
+const IE_7 = 'ie 7';
+const IE_8 = 'ie 8';
+const OP_9 = 'opera 9';
+
+module.exports = { FF_2, IE_5_5, IE_6, IE_7, IE_8, OP_9 };

package/src/dictionary/identifiers.js

@@ -0,0 +1,7 @@
+'use strict';
+const MEDIA_QUERY = 'media query';
+const PROPERTY = 'property';
+const SELECTOR = 'selector';
+const VALUE = 'value';
+
+module.exports = { MEDIA_QUERY, PROPERTY, SELECTOR, VALUE };

package/src/dictionary/postcss.js

@@ -0,0 +1,6 @@
+'use strict';
+const ATRULE = 'atrule';
+const DECL = 'decl';
+const RULE = 'rule';
+
+module.exports = { ATRULE, DECL, RULE };

package/src/dictionary/tags.js

@@ -0,0 +1,5 @@
+'use strict';
+const BODY = 'body';
+const HTML = 'html';
+
+module.exports = { BODY, HTML };

package/src/exists.js

@@ -0,0 +1,13 @@
+'use strict';
+
+/**
+ * @param {import('postcss-selector-parser').Selector} selector
+ * @param {number} index
+ * @param {string} value
+ * @return {boolean | undefined | ''}
+ */
+module.exports = function exists(selector, index, value) {
+  const node = selector.at(index);
+
+  return node && node.value && node.value.toLowerCase() === value;
+};

package/src/index.js

@@ -0,0 +1,60 @@
+'use strict';
+const browserslist = require('browserslist');
+const plugins = require('./plugins');
+
+/** @typedef {{lint?: boolean}} Options */
+
+/**
+ * @type {import('postcss').PluginCreator<Options>}
+ * @param {Options} opts
+ * @return {import('postcss').Plugin}
+ */
+function pluginCreator(opts = {}) {
+  return {
+    postcssPlugin: 'stylehacks',
+
+    OnceExit(css, { result }) {
+      /** @type {typeof result.opts & browserslist.Options} */
+      const resultOpts = result.opts || {};
+      const browsers = browserslist(null, {
+        stats: resultOpts.stats,
+        path: __dirname,
+        env: resultOpts.env,
+      });
+
+      /** @type {import('./plugin').Plugin[]} */
+      const processors = [];
+      for (const Plugin of plugins) {
+        const hack = new Plugin(result);
+        if (!browsers.some((browser) => hack.targets.has(browser))) {
+          processors.push(hack);
+        }
+      }
+      css.walk((node) => {
+        processors.forEach((proc) => {
+          if (!proc.nodeTypes.has(node.type)) {
+            return;
+          }
+
+          if (opts.lint) {
+            return proc.detectAndWarn(node);
+          }
+
+          return proc.detectAndResolve(node);
+        });
+      });
+    },
+  };
+}
+
+/** @type {(node: import('postcss').Node) => boolean} */
+pluginCreator.detect = (node) => {
+  return plugins.some((Plugin) => {
+    const hack = new Plugin();
+
+    return hack.any(node);
+  });
+};
+
+pluginCreator.postcss = true;
+module.exports = pluginCreator;

package/src/isMixin.js

@@ -0,0 +1,15 @@
+'use strict';
+/**
+ * @param {import('postcss').Rule} node
+ * @return {boolean}
+ */
+module.exports = function isMixin(node) {
+  const { selector } = node;
+
+  // If the selector ends with a ':' it is likely a part of a custom mixin.
+  if (!selector || selector[selector.length - 1] === ':') {
+    return true;
+  }
+
+  return false;
+};

package/src/plugin.js

@@ -0,0 +1,108 @@
+'use strict';
+/**
+ * @typedef {object} Plugin
+ * @prop {Set<string>} targets
+ * @prop {Set<string>} nodeTypes
+ * @prop {(node: import('postcss').Node) => void} detectAndResolve
+ * @prop {(node: import('postcss').Node) => void} detectAndWarn
+ */
+
+/** 
+ * @typedef {import('postcss').Node & {_stylehacks: {
+                                          message: string, 
+                                          browsers: Set<string>, 
+                                          identifier: string, 
+                                          hack: string }}} NodeWithInfo
+ */
+
+module.exports = class BasePlugin {
+  /**
+   * @param {string[]} targets
+   * @param {string[]} nodeTypes
+   * @param {import('postcss').Result=} result
+   */
+  constructor(targets, nodeTypes, result) {
+    /** @type {NodeWithInfo[]} */
+    this.nodes = [];
+    this.targets = new Set(targets);
+    this.nodeTypes = new Set(nodeTypes);
+    this.result = result;
+  }
+
+  /**
+   * @param {import('postcss').Node} node
+   * @param {{identifier: string, hack: string}} metadata
+   * @return {void}
+   */
+  push(node, metadata) {
+    /** @type {NodeWithInfo} */ (node)._stylehacks = Object.assign(
+      {},
+      metadata,
+      {
+        message: `Bad ${metadata.identifier}: ${metadata.hack}`,
+        browsers: this.targets,
+      }
+    );
+
+    this.nodes.push(/** @type {NodeWithInfo} */ (node));
+  }
+
+  /**
+   * @param {import('postcss').Node} node
+   * @return {boolean}
+   */
+  any(node) {
+    if (this.nodeTypes.has(node.type)) {
+      this.detect(node);
+
+      return /** @type {NodeWithInfo} */ (node)._stylehacks !== undefined;
+    }
+
+    return false;
+  }
+
+  /**
+   * @param {import('postcss').Node} node
+   * @return {void}
+   */
+  detectAndResolve(node) {
+    this.nodes = [];
+
+    this.detect(node);
+
+    return this.resolve();
+  }
+
+  /**
+   * @param {import('postcss').Node} node
+   * @return {void}
+   */
+  detectAndWarn(node) {
+    this.nodes = [];
+
+    this.detect(node);
+
+    return this.warn();
+  }
+  /** @param {import('postcss').Node} node */
+  // eslint-disable-next-line no-unused-vars
+  detect(node) {
+    throw new Error('You need to implement this method in a subclass.');
+  }
+
+  /** @return {void} */
+  resolve() {
+    return this.nodes.forEach((node) => node.remove());
+  }
+
+  warn() {
+    return this.nodes.forEach((node) => {
+      const { message, browsers, identifier, hack } = node._stylehacks;
+
+      return node.warn(
+        /** @type {import('postcss').Result} */ (this.result),
+        message + JSON.stringify({ browsers, identifier, hack })
+      );
+    });
+  }
+};

package/src/plugins/bodyEmpty.js

@@ -0,0 +1,49 @@
+'use strict';
+const parser = require('postcss-selector-parser');
+const exists = require('../exists');
+const isMixin = require('../isMixin');
+const BasePlugin = require('../plugin');
+const { FF_2 } = require('../dictionary/browsers');
+const { SELECTOR } = require('../dictionary/identifiers');
+const { RULE } = require('../dictionary/postcss');
+const { BODY } = require('../dictionary/tags');
+
+module.exports = class BodyEmpty extends BasePlugin {
+  /** @param {import('postcss').Result} result */
+  constructor(result) {
+    super([FF_2], [RULE], result);
+  }
+
+  /**
+   * @param {import('postcss').Rule} rule
+   * @return {void}
+   */
+  detect(rule) {
+    if (isMixin(rule)) {
+      return;
+    }
+    parser(this.analyse(rule)).processSync(rule.selector);
+  }
+
+  /**
+   * @param {import('postcss').Rule} rule
+   * @return {parser.SyncProcessor<void>}
+   */
+  analyse(rule) {
+    return (selectors) => {
+      selectors.each((selector) => {
+        if (
+          exists(selector, 0, BODY) &&
+          exists(selector, 1, ':empty') &&
+          exists(selector, 2, ' ') &&
+          selector.at(3)
+        ) {
+          this.push(rule, {
+            identifier: SELECTOR,
+            hack: selector.toString(),
+          });
+        }
+      });
+    };
+  }
+};

package/src/plugins/htmlCombinatorCommentBody.js

@@ -0,0 +1,54 @@
+'use strict';
+const parser = require('postcss-selector-parser');
+const exists = require('../exists');
+const isMixin = require('../isMixin');
+const BasePlugin = require('../plugin');
+const { IE_5_5, IE_6, IE_7 } = require('../dictionary/browsers');
+const { SELECTOR } = require('../dictionary/identifiers');
+const { RULE } = require('../dictionary/postcss');
+const { BODY, HTML } = require('../dictionary/tags');
+
+module.exports = class HtmlCombinatorCommentBody extends BasePlugin {
+  /** @param {import('postcss').Result} result */
+  constructor(result) {
+    super([IE_5_5, IE_6, IE_7], [RULE], result);
+  }
+
+  /**
+   * @param {import('postcss').Rule} rule
+   * @return {void}
+   */
+  detect(rule) {
+    if (isMixin(rule)) {
+      return;
+    }
+    if (rule.raws.selector && rule.raws.selector.raw) {
+      parser(this.analyse(rule)).processSync(rule.raws.selector.raw);
+    }
+  }
+
+  /** @param {import('postcss').Rule} rule
+   *  @return {parser.SyncProcessor<void>}
+   */
+  analyse(rule) {
+    return (selectors) => {
+      selectors.each((selector) => {
+        if (
+          exists(selector, 0, HTML) &&
+          (exists(selector, 1, '>') || exists(selector, 1, '~')) &&
+          selector.at(2) &&
+          selector.at(2).type === 'comment' &&
+          exists(selector, 3, ' ') &&
+          exists(selector, 4, BODY) &&
+          exists(selector, 5, ' ') &&
+          selector.at(6)
+        ) {
+          this.push(rule, {
+            identifier: SELECTOR,
+            hack: selector.toString(),
+          });
+        }
+      });
+    };
+  }
+};

package/src/plugins/htmlFirstChild.js

@@ -0,0 +1,50 @@
+'use strict';
+const parser = require('postcss-selector-parser');
+const exists = require('../exists');
+const isMixin = require('../isMixin');
+const BasePlugin = require('../plugin');
+const { OP_9 } = require('../dictionary/browsers');
+const { SELECTOR } = require('../dictionary/identifiers');
+const { RULE } = require('../dictionary/postcss');
+const { HTML } = require('../dictionary/tags');
+
+module.exports = class HtmlFirstChild extends BasePlugin {
+  /** @param {import('postcss').Result} result */
+  constructor(result) {
+    super([OP_9], [RULE], result);
+  }
+
+  /**
+   * @param {import('postcss').Rule} rule
+   * @return {void}
+   */
+  detect(rule) {
+    if (isMixin(rule)) {
+      return;
+    }
+
+    parser(this.analyse(rule)).processSync(rule.selector);
+  }
+
+  /**
+   * @param {import('postcss').Rule} rule
+   * @return {parser.SyncProcessor<void>}
+   */
+  analyse(rule) {
+    return (selectors) => {
+      selectors.each((selector) => {
+        if (
+          exists(selector, 0, HTML) &&
+          exists(selector, 1, ':first-child') &&
+          exists(selector, 2, ' ') &&
+          selector.at(3)
+        ) {
+          this.push(rule, {
+            identifier: SELECTOR,
+            hack: selector.toString(),
+          });
+        }
+      });
+    };
+  }
+};

package/src/plugins/important.js

@@ -0,0 +1,25 @@
+'use strict';
+const BasePlugin = require('../plugin');
+const { IE_5_5, IE_6, IE_7 } = require('../dictionary/browsers');
+const { DECL } = require('../dictionary/postcss');
+
+module.exports = class Important extends BasePlugin {
+  /** @param {import('postcss').Result=} result */
+  constructor(result) {
+    super([IE_5_5, IE_6, IE_7], [DECL], result);
+  }
+  /**
+   * @param {import('postcss').Declaration} decl
+   * @return {void}
+   */
+  detect(decl) {
+    const match = decl.value.match(/!\w/);
+    if (match && match.index) {
+      const hack = decl.value.substr(match.index, decl.value.length - 1);
+      this.push(decl, {
+        identifier: '!important',
+        hack,
+      });
+    }
+  }
+};

package/src/plugins/index.js

@@ -0,0 +1,28 @@
+'use strict';
+const bodyEmpty = require('./bodyEmpty');
+const htmlCombinatorCommentBody = require('./htmlCombinatorCommentBody');
+const htmlFirstChild = require('./htmlFirstChild');
+const important = require('./important');
+const leadingStar = require('./leadingStar');
+const leadingUnderscore = require('./leadingUnderscore');
+const mediaSlash0 = require('./mediaSlash0');
+const mediaSlash0Slash9 = require('./mediaSlash0Slash9');
+const mediaSlash9 = require('./mediaSlash9');
+const slash9 = require('./slash9');
+const starHtml = require('./starHtml');
+const trailingSlashComma = require('./trailingSlashComma');
+
+module.exports = [
+  bodyEmpty,
+  htmlCombinatorCommentBody,
+  htmlFirstChild,
+  important,
+  leadingStar,
+  leadingUnderscore,
+  mediaSlash0,
+  mediaSlash0Slash9,
+  mediaSlash9,
+  slash9,
+  starHtml,
+  trailingSlashComma,
+];

package/src/plugins/leadingStar.js

@@ -0,0 +1,55 @@
+'use strict';
+const BasePlugin = require('../plugin');
+const { IE_5_5, IE_6, IE_7 } = require('../dictionary/browsers');
+const { PROPERTY } = require('../dictionary/identifiers');
+const { ATRULE, DECL } = require('../dictionary/postcss');
+
+const hacks = '!_$_&_*_)_=_%_+_,_._/_`_]_#_~_?_:_|'.split('_');
+
+module.exports = class LeadingStar extends BasePlugin {
+  /** @param {import('postcss').Result=} result */
+  constructor(result) {
+    super([IE_5_5, IE_6, IE_7], [ATRULE, DECL], result);
+  }
+
+  /**
+   * @param {import('postcss').Declaration | import('postcss').AtRule} node
+   * @return {void}
+   */
+  detect(node) {
+    if (node.type === DECL) {
+      // some values are not picked up by before, so ensure they are
+      // at the beginning of the value
+      hacks.forEach((hack) => {
+        if (!node.prop.indexOf(hack)) {
+          this.push(node, {
+            identifier: PROPERTY,
+            hack: node.prop,
+          });
+        }
+      });
+      const { before } = node.raws;
+      if (!before) {
+        return;
+      }
+      hacks.forEach((hack) => {
+        if (before.includes(hack)) {
+          this.push(node, {
+            identifier: PROPERTY,
+            hack: `${before.trim()}${node.prop}`,
+          });
+        }
+      });
+    } else {
+      // test for the @property: value; hack
+      const { name } = node;
+      const len = name.length - 1;
+      if (name.lastIndexOf(':') === len) {
+        this.push(node, {
+          identifier: PROPERTY,
+          hack: `@${name.substr(0, len)}`,
+        });
+      }
+    }
+  }
+};

package/src/plugins/leadingUnderscore.js

@@ -0,0 +1,51 @@
+'use strict';
+const BasePlugin = require('../plugin');
+const { IE_6 } = require('../dictionary/browsers');
+const { PROPERTY } = require('../dictionary/identifiers');
+const { DECL } = require('../dictionary/postcss');
+
+/**
+ * @param {string} prop
+ * @return {string}
+ */
+function vendorPrefix(prop) {
+  let match = prop.match(/^(-\w+-)/);
+  if (match) {
+    return match[0];
+  }
+
+  return '';
+}
+
+module.exports = class LeadingUnderscore extends BasePlugin {
+  /** @param {import('postcss').Result=} result */
+  constructor(result) {
+    super([IE_6], [DECL], result);
+  }
+
+  /**
+   * @param {import('postcss').Declaration} decl
+   * @return {void}
+   */
+  detect(decl) {
+    const { before } = decl.raws;
+
+    if (before && before.includes('_')) {
+      this.push(decl, {
+        identifier: PROPERTY,
+        hack: `${before.trim()}${decl.prop}`,
+      });
+    }
+
+    if (
+      decl.prop[0] === '-' &&
+      decl.prop[1] !== '-' &&
+      vendorPrefix(decl.prop) === ''
+    ) {
+      this.push(decl, {
+        identifier: PROPERTY,
+        hack: decl.prop,
+      });
+    }
+  }
+};

package/src/plugins/mediaSlash0.js

@@ -0,0 +1,26 @@
+'use strict';
+const BasePlugin = require('../plugin');
+const { IE_8 } = require('../dictionary/browsers');
+const { MEDIA_QUERY } = require('../dictionary/identifiers');
+const { ATRULE } = require('../dictionary/postcss');
+
+module.exports = class MediaSlash0 extends BasePlugin {
+  /** @param {import('postcss').Result} result */
+  constructor(result) {
+    super([IE_8], [ATRULE], result);
+  }
+  /**
+   * @param {import('postcss').AtRule} rule
+   * @return {void}
+   */
+  detect(rule) {
+    const params = rule.params.trim();
+
+    if (params.toLowerCase() === '\\0screen') {
+      this.push(rule, {
+        identifier: MEDIA_QUERY,
+        hack: params,
+      });
+    }
+  }
+};

package/src/plugins/mediaSlash0Slash9.js

@@ -0,0 +1,27 @@
+'use strict';
+const BasePlugin = require('../plugin');
+const { IE_5_5, IE_6, IE_7, IE_8 } = require('../dictionary/browsers');
+const { MEDIA_QUERY } = require('../dictionary/identifiers');
+const { ATRULE } = require('../dictionary/postcss');
+
+module.exports = class MediaSlash0Slash9 extends BasePlugin {
+  /** @param {import('postcss').Result} result */
+  constructor(result) {
+    super([IE_5_5, IE_6, IE_7, IE_8], [ATRULE], result);
+  }
+
+  /**
+   * @param {import('postcss').AtRule} rule
+   * @return {void}
+   */
+  detect(rule) {
+    const params = rule.params.trim();
+
+    if (params.toLowerCase() === '\\0screen\\,screen\\9') {
+      this.push(rule, {
+        identifier: MEDIA_QUERY,
+        hack: params,
+      });
+    }
+  }
+};