feat: plugin migrate to postcss 8.x (#1013)

* feat: plugin migrate to postcss 8.x * chore: add peer dependencies
raxjs · Jul 13, 2022 · 4dc4e63 · 4dc4e63
1 parent 5b876a7
commit 4dc4e63
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 16 deletions.
diff --git a/packages/postcss-plugin-rpx2vw/CHANGELOG.md b/packages/postcss-plugin-rpx2vw/CHANGELOG.md
@@ -1,5 +1,9 @@
 # ChangeLog
 
+## v1.0.0
+
+- Chore: support postcss v8
+
 ## v0.0.3
 
 - Fix: Regular Expression Denial of Service in postcss by update version to > 7.0.36
diff --git a/packages/postcss-plugin-rpx2vw/package.json b/packages/postcss-plugin-rpx2vw/package.json
@@ -1,9 +1,12 @@
 {
   "name": "postcss-plugin-rpx2vw",
-  "version": "0.0.3",
+  "version": "1.0.0",
   "description": "Postcss plugin transform rpx to vw or rem.",
   "main": "lib/index.js",
-  "dependencies": {
-    "postcss": "^7.0.36"
+  "devDependencies": {
+    "postcss": "^8.0.0"
+  },
+  "peerDependencies": {
+    "postcss": "^8.0.0"
   }
 }
diff --git a/packages/postcss-plugin-rpx2vw/src/index.js b/packages/postcss-plugin-rpx2vw/src/index.js
@@ -1,4 +1,3 @@
-const postcss = require('postcss');
 // !singlequotes|!doublequotes|!url()|pixelunit
 const rpxRegex = /"[^"]+"|'[^']+'|url\([^\)]+\)|(\d*\.?\d+)rpx/g;
 
@@ -9,25 +8,25 @@ const defaults = {
   unitPrecision: 5,
 };
 
-module.exports = postcss.plugin('postcss-rpx2vw', (options) => {
+module.exports = (options) => {
   const opts = Object.assign({}, defaults, options);
-
-  return function (root) {
-    root.walkDecls((decl) => {
+  return {
+    postcssPlugin: 'postcss-rpx2vw',
+    Declaration(decl) {
       // This should be the fastest test and will remove most declarations
       if (decl.value.indexOf('rpx') === -1) return;
 
       const unit = getUnit(decl.prop, opts);
       decl.value = decl.value.replace(rpxRegex, createRpxReplace(opts, unit, opts.viewportWidth));
-    });
-
-    root.walkAtRules('media', (rule) => {
-      if (rule.params.indexOf('rpx') === -1) return;
-
-      rule.params = rule.params.replace(rpxRegex, createRpxReplace(opts, opts.viewportUnit, opts.viewportWidth));
-    });
+    },
+    AtRule: {
+      media: (rule) => {
+        if (rule.params.indexOf('rpx') === -1) return;
+        rule.params = rule.params.replace(rpxRegex, createRpxReplace(opts, opts.viewportUnit, opts.viewportWidth));
+      },
+    },
   };
-});
+};
 
 function toFixed(number, precision) {
   const multiplier = Math.pow(10, precision + 1);
@@ -50,3 +49,5 @@ function createRpxReplace(opts, viewportUnit, viewportSize) {
 function getUnit(prop, opts) {
   return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit;
 }
+
+module.exports.postcss = true;