From 4dc4e6307152fd1c01710f9ed37deee78fc73db1 Mon Sep 17 00:00:00 2001
From: ClarkXia <xiawenwu41@gmail.com>
Date: Wed, 13 Jul 2022 14:07:22 +0800
Subject: [PATCH] feat: plugin migrate to postcss 8.x (#1013)

* feat: plugin migrate to postcss 8.x

* chore: add peer dependencies
---
 packages/postcss-plugin-rpx2vw/CHANGELOG.md |  4 +++
 packages/postcss-plugin-rpx2vw/package.json |  9 ++++---
 packages/postcss-plugin-rpx2vw/src/index.js | 27 +++++++++++----------
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/postcss-plugin-rpx2vw/CHANGELOG.md b/packages/postcss-plugin-rpx2vw/CHANGELOG.md
index f5d891602..7fbc1306a 100644
--- 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
index 515496b65..7cd2dee53 100644
--- 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"
   }
 }
\ No newline at end of file
diff --git a/packages/postcss-plugin-rpx2vw/src/index.js b/packages/postcss-plugin-rpx2vw/src/index.js
index c31f85e65..426b232a1 100644
--- 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;