update to postcss-8 (#68)

cuth · Mar 6, 2021 · 993bf53 · 993bf53
1 parent 6d339e3
commit 993bf53
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ A plugin for [PostCSS](https://github.com/ai/postcss) that generates rem units f
 ## Install
 
 ```shell
-$ npm install postcss-pxtorem --save-dev
+$ npm install postcss postcss-pxtorem --save-dev
 ```
 
 ## Usage
@@ -79,7 +79,7 @@ Default:
     - Use wildcard `*` to enable all properties. Example: `['*']`
     - Use `*` at the start or end of a word. (`['*position*']` will match `background-position-y`)
     - Use `!` to not match a property. Example: `['*', '!letter-spacing']`
-    - Combine the "not" prefix with the other prefixes. Example: `['*', '!font*']` 
+    - Combine the "not" prefix with the other prefixes. Example: `['*', '!font*']`
 - `selectorBlackList` (Array) The selectors to ignore and leave as px.
     - If value is string, it checks to see if selector contains the string.
         - `['body']` will match `.body-class`

diff --git a/index.js b/index.js
@@ -1,4 +1,3 @@
-const postcss = require("postcss");
 const pxRegex = require("./lib/pixel-unit-regex");
 const filterPropList = require("./lib/filter-prop-list");
 const type = require("./lib/type");
@@ -23,62 +22,6 @@ const legacyOptions = {
   propWhiteList: "propList"
 };
 
-module.exports = postcss.plugin("postcss-pxtorem", options => {
-  convertLegacyOptions(options);
-  const opts = Object.assign({}, defaults, options);
-  const satisfyPropList = createPropListMatcher(opts.propList);
-
-  return css => {
-    const exclude = opts.exclude;
-    const filePath = css.source.input.file;
-    if (
-      exclude &&
-      ((type.isFunction(exclude) && exclude(filePath)) ||
-        (type.isString(exclude) && filePath.indexOf(exclude) !== -1) ||
-        filePath.match(exclude) !== null)
-    ) {
-      return;
-    }
-
-    const rootValue =
-      typeof opts.rootValue === "function"
-        ? opts.rootValue(css.source.input)
-        : opts.rootValue;
-    const pxReplace = createPxReplace(
-      rootValue,
-      opts.unitPrecision,
-      opts.minPixelValue
-    );
-
-    css.walkDecls((decl, i) => {
-      if (
-        decl.value.indexOf("px") === -1 ||
-        !satisfyPropList(decl.prop) ||
-        blacklistedSelector(opts.selectorBlackList, decl.parent.selector)
-      )
-        return;
-
-      const value = decl.value.replace(pxRegex, pxReplace);
-
-      // if rem unit already exists, do not add or replace
-      if (declarationExists(decl.parent, decl.prop, value)) return;
-
-      if (opts.replace) {
-        decl.value = value;
-      } else {
-        decl.parent.insertAfter(i, decl.clone({ value: value }));
-      }
-    });
-
-    if (opts.mediaQuery) {
-      css.walkAtRules("media", rule => {
-        if (rule.params.indexOf("px") === -1) return;
-        rule.params = rule.params.replace(pxRegex, pxReplace);
-      });
-    }
-  };
-});
-
 function convertLegacyOptions(options) {
   if (typeof options !== "object") return;
   if (
@@ -172,3 +115,68 @@ function createPropListMatcher(propList) {
     );
   };
 }
+
+module.exports = (options = {}) => {
+  convertLegacyOptions(options);
+  const opts = Object.assign({}, defaults, options);
+  const satisfyPropList = createPropListMatcher(opts.propList);
+  const exclude = opts.exclude;
+  let isExcludeFile = false;
+  let pxReplace;
+  return {
+    postcssPlugin: "postcss-pxtorem",
+    Once(css) {
+      const filePath = css.source.input.file;
+      if (
+        exclude &&
+        ((type.isFunction(exclude) && exclude(filePath)) ||
+          (type.isString(exclude) && filePath.indexOf(exclude) !== -1) ||
+          filePath.match(exclude) !== null)
+      ) {
+        isExcludeFile = true;
+      } else {
+        isExcludeFile = false;
+      }
+
+      const rootValue =
+        typeof opts.rootValue === "function"
+          ? opts.rootValue(css.source.input)
+          : opts.rootValue;
+      pxReplace = createPxReplace(
+        rootValue,
+        opts.unitPrecision,
+        opts.minPixelValue
+      );
+    },
+    Declaration(decl) {
+      if (isExcludeFile) return;
+
+      if (
+        decl.value.indexOf("px") === -1 ||
+        !satisfyPropList(decl.prop) ||
+        blacklistedSelector(opts.selectorBlackList, decl.parent.selector)
+      )
+        return;
+
+      const value = decl.value.replace(pxRegex, pxReplace);
+
+      // if rem unit already exists, do not add or replace
+      if (declarationExists(decl.parent, decl.prop, value)) return;
+
+      if (opts.replace) {
+        decl.value = value;
+      } else {
+        decl.cloneAfter({ value: value });
+      }
+    },
+    AtRule(atRule) {
+      if (isExcludeFile) return;
+
+      if (opts.mediaQuery && atRule.name === "media") {
+        if (atRule.params.indexOf("px") === -1) return;
+        atRule.params = atRule.params.replace(pxRegex, pxReplace);
+      }
+    }
+  };
+};
+module.exports.postcss = true;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "husky": "^4.2.3",
     "jasmine-node": "^3.0.0",
     "lint-staged": "^10.0.8",
+    "postcss": "^8.0.0",
     "prettier": "^1.19.1"
   },
   "keywords": [
@@ -40,7 +41,7 @@
     "postcss",
     "postcss-plugin"
   ],
-  "dependencies": {
-    "postcss": "^7.0.27"
+  "peerDependencies": {
+    "postcss": "^8.0.0"
   }
 }