stylehacks 5.0.2 → 5.0.3

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "stylehacks",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Detect/remove browser hacks from CSS files.",
-  "main": "dist/index.js",
+  "main": "src/index.js",
   "files": [
     "LICENSE-MIT",
-    "dist"
+    "src"
   ],
   "keywords": [
     "browsers",
@@ -41,9 +41,5 @@
   "peerDependencies": {
     "postcss": "^8.2.15"
   },
-  "scripts": {
-    "prebuild": "rimraf dist",
-    "build": "babel src --config-file ../../babel.config.json --out-dir dist --ignore \"**/__tests__/\""
-  },
   "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,6 @@
+'use strict';
+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,50 @@
+'use strict';
+const browserslist = require('browserslist');
+const plugins = require('./plugins');
+
+function pluginCreator(opts = {}) {
+  return {
+    postcssPlugin: 'stylehacks',
+
+    OnceExit(css, { result }) {
+      const resultOpts = result.opts || {};
+      const browsers = browserslist(null, {
+        stats: resultOpts.stats,
+        path: __dirname,
+        env: resultOpts.env,
+      });
+
+      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);
+        });
+      });
+    },
+  };
+}
+
+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,11 @@
+'use strict';
+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,60 @@
+'use strict';
+module.exports = class BasePlugin {
+  constructor(targets, nodeTypes, result) {
+    this.nodes = [];
+    this.targets = new Set(targets);
+    this.nodeTypes = new Set(nodeTypes);
+    this.result = result;
+  }
+
+  push(node, metadata) {
+    node._stylehacks = Object.assign({}, metadata, {
+      message: `Bad ${metadata.identifier}: ${metadata.hack}`,
+      browsers: this.targets,
+    });
+
+    this.nodes.push(node);
+  }
+
+  any(node) {
+    if (this.nodeTypes.has(node.type)) {
+      this.detect(node);
+
+      return !!node._stylehacks;
+    }
+
+    return false;
+  }
+
+  detectAndResolve(node) {
+    this.nodes = [];
+
+    this.detect(node);
+
+    return this.resolve();
+  }
+
+  detectAndWarn(node) {
+    this.nodes = [];
+
+    this.detect(node);
+
+    return this.warn();
+  }
+  // eslint-disable-next-line no-unused-vars
+  detect(node) {
+    throw new Error('You need to implement this method in a subclass.');
+  }
+
+  resolve() {
+    return this.nodes.forEach((node) => node.remove());
+  }
+
+  warn() {
+    return this.nodes.forEach((node) => {
+      const { message, browsers, identifier, hack } = node._stylehacks;
+
+      return node.warn(this.result, message, { browsers, identifier, hack });
+    });
+  }
+};

package/src/plugins/bodyEmpty.js

@@ -0,0 +1,40 @@
+'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 {
+  constructor(result) {
+    super([FF_2], [RULE], result);
+  }
+
+  detect(rule) {
+    if (isMixin(rule)) {
+      return;
+    }
+    parser(this.analyse(rule)).processSync(rule.selector);
+  }
+
+  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,46 @@
+'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 {
+  constructor(result) {
+    super([IE_5_5, IE_6, IE_7], [RULE], result);
+  }
+
+  detect(rule) {
+    if (isMixin(rule)) {
+      return;
+    }
+    if (rule.raws.selector && rule.raws.selector.raw) {
+      parser(this.analyse(rule)).processSync(rule.raws.selector.raw);
+    }
+  }
+
+  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,41 @@
+'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 {
+  constructor(result) {
+    super([OP_9], [RULE], result);
+  }
+
+  detect(rule) {
+    if (isMixin(rule)) {
+      return;
+    }
+
+    parser(this.analyse(rule)).processSync(rule.selector);
+  }
+
+  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,21 @@
+'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 {
+  constructor(result) {
+    super([IE_5_5, IE_6, IE_7], [DECL], result);
+  }
+
+  detect(decl) {
+    const match = decl.value.match(/!\w/);
+    if (match) {
+      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,50 @@
+'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 {
+  constructor(result) {
+    super([IE_5_5, IE_6, IE_7], [ATRULE, DECL], result);
+  }
+
+  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,
+          });
+        }
+      });
+      let { 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
+      let { name } = node;
+      let 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,42 @@
+'use strict';
+const BasePlugin = require('../plugin');
+const { IE_6 } = require('../dictionary/browsers');
+const { PROPERTY } = require('../dictionary/identifiers');
+const { DECL } = require('../dictionary/postcss');
+
+function vendorPrefix(prop) {
+  let match = prop.match(/^(-\w+-)/);
+  if (match) {
+    return match[0];
+  }
+
+  return '';
+}
+
+module.exports = class LeadingUnderscore extends BasePlugin {
+  constructor(result) {
+    super([IE_6], [DECL], result);
+  }
+
+  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,22 @@
+'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 {
+  constructor(result) {
+    super([IE_8], [ATRULE], result);
+  }
+
+  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,22 @@
+'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 {
+  constructor(result) {
+    super([IE_5_5, IE_6, IE_7, IE_8], [ATRULE], result);
+  }
+
+  detect(rule) {
+    const params = rule.params.trim();
+
+    if (params.toLowerCase() === '\\0screen\\,screen\\9') {
+      this.push(rule, {
+        identifier: MEDIA_QUERY,
+        hack: params,
+      });
+    }
+  }
+};

package/src/plugins/mediaSlash9.js

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

package/src/plugins/slash9.js

@@ -0,0 +1,21 @@
+'use strict';
+const BasePlugin = require('../plugin.js');
+const { IE_6, IE_7, IE_8 } = require('../dictionary/browsers');
+const { VALUE } = require('../dictionary/identifiers');
+const { DECL } = require('../dictionary/postcss');
+
+module.exports = class Slash9 extends BasePlugin {
+  constructor(result) {
+    super([IE_6, IE_7, IE_8], [DECL], result);
+  }
+
+  detect(decl) {
+    let v = decl.value;
+    if (v && v.length > 2 && v.indexOf('\\9') === v.length - 2) {
+      this.push(decl, {
+        identifier: VALUE,
+        hack: v,
+      });
+    }
+  }
+};

package/src/plugins/starHtml.js

@@ -0,0 +1,41 @@
+'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 } = require('../dictionary/browsers');
+const { SELECTOR } = require('../dictionary/identifiers');
+const { RULE } = require('../dictionary/postcss');
+const { HTML } = require('../dictionary/tags');
+
+module.exports = class StarHtml extends BasePlugin {
+  constructor(result) {
+    super([IE_5_5, IE_6], [RULE], result);
+  }
+
+  detect(rule) {
+    if (isMixin(rule)) {
+      return;
+    }
+    parser(this.analyse(rule)).processSync(rule.selector);
+  }
+
+  analyse(rule) {
+    return (selectors) => {
+      selectors.each((selector) => {
+        if (
+          exists(selector, 0, '*') &&
+          exists(selector, 1, ' ') &&
+          exists(selector, 2, HTML) &&
+          exists(selector, 3, ' ') &&
+          selector.at(4)
+        ) {
+          this.push(rule, {
+            identifier: SELECTOR,
+            hack: selector.toString(),
+          });
+        }
+      });
+    };
+  }
+};

package/src/plugins/trailingSlashComma.js

@@ -0,0 +1,31 @@
+'use strict';
+const BasePlugin = require('../plugin');
+const isMixin = require('../isMixin');
+const { IE_5_5, IE_6, IE_7 } = require('../dictionary/browsers');
+const { SELECTOR } = require('../dictionary/identifiers');
+const { RULE } = require('../dictionary/postcss');
+
+module.exports = class TrailingSlashComma extends BasePlugin {
+  constructor(result) {
+    super([IE_5_5, IE_6, IE_7], [RULE], result);
+  }
+
+  detect(rule) {
+    if (isMixin(rule)) {
+      return;
+    }
+
+    const { selector } = rule;
+    const trim = selector.trim();
+
+    if (
+      trim.lastIndexOf(',') === selector.length - 1 ||
+      trim.lastIndexOf('\\') === selector.length - 1
+    ) {
+      this.push(rule, {
+        identifier: SELECTOR,
+        hack: selector,
+      });
+    }
+  }
+};

package/dist/dictionary/browsers.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.OP_9 = exports.IE_8 = exports.IE_7 = exports.IE_6 = exports.IE_5_5 = exports.FF_2 = void 0;
-const FF_2 = 'firefox 2';
-exports.FF_2 = FF_2;
-const IE_5_5 = 'ie 5.5';
-exports.IE_5_5 = IE_5_5;
-const IE_6 = 'ie 6';
-exports.IE_6 = IE_6;
-const IE_7 = 'ie 7';
-exports.IE_7 = IE_7;
-const IE_8 = 'ie 8';
-exports.IE_8 = IE_8;
-const OP_9 = 'opera 9';
-exports.OP_9 = OP_9;

package/dist/dictionary/identifiers.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VALUE = exports.SELECTOR = exports.PROPERTY = exports.MEDIA_QUERY = void 0;
-const MEDIA_QUERY = 'media query';
-exports.MEDIA_QUERY = MEDIA_QUERY;
-const PROPERTY = 'property';
-exports.PROPERTY = PROPERTY;
-const SELECTOR = 'selector';
-exports.SELECTOR = SELECTOR;
-const VALUE = 'value';
-exports.VALUE = VALUE;

package/dist/dictionary/postcss.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RULE = exports.DECL = exports.ATRULE = void 0;
-const ATRULE = 'atrule';
-exports.ATRULE = ATRULE;
-const DECL = 'decl';
-exports.DECL = DECL;
-const RULE = 'rule';
-exports.RULE = RULE;