From 840123f65d38b1a81bc6329a55e1d10a1dfea98c Mon Sep 17 00:00:00 2001
From: McLemore <erdongshengfu@gmail.com>
Date: Tue, 11 Sep 2018 12:05:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=BD=AC=E6=8D=A2@supports?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84px=E5=8D=95=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/px2rem.js            |  4 ++--
 test/assets/supports.css |  5 +++++
 test/output/supports.css |  5 +++++
 test/px2rem.test.js      | 11 +++++++++++
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 test/assets/supports.css
 create mode 100644 test/output/supports.css

diff --git a/lib/px2rem.js b/lib/px2rem.js
index edd798e..6ad2ef6 100644
--- a/lib/px2rem.js
+++ b/lib/px2rem.js
@@ -72,8 +72,8 @@ Px2rem.prototype.generateRem = function (cssText) {
   function processRules(rules, noDealPx) { // FIXME: keyframes do not support `force px` comment
     for (var i = 0; i < rules.length; i++) {
       var rule = rules[i];
-      if (rule.type === 'media') {
-        processRules(rule.rules); // recursive invocation while dealing with media queries
+      if (rule.type === 'media' || rule.type === 'supports') {
+        processRules(rule.rules); // recursive invocation while dealing with media queries or supports
         continue;
       } else if (rule.type === 'keyframes') {
         processRules(rule.keyframes, true); // recursive invocation while dealing with keyframes
diff --git a/test/assets/supports.css b/test/assets/supports.css
new file mode 100644
index 0000000..a130efc
--- /dev/null
+++ b/test/assets/supports.css
@@ -0,0 +1,5 @@
+@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
+  .main {
+    bottom: calc(75px - constant(safe-area-inset-bottom));
+  }
+}
\ No newline at end of file
diff --git a/test/output/supports.css b/test/output/supports.css
new file mode 100644
index 0000000..1d27b66
--- /dev/null
+++ b/test/output/supports.css
@@ -0,0 +1,5 @@
+@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
+  .main {
+    bottom: calc(1rem - constant(safe-area-inset-bottom));
+  }
+}
\ No newline at end of file
diff --git a/test/px2rem.test.js b/test/px2rem.test.js
index dc71d3f..2584499 100644
--- a/test/px2rem.test.js
+++ b/test/px2rem.test.js
@@ -64,3 +64,14 @@ describe('should work with @3x origin css file', function () {
     assert.equal(outputText, fs.readFileSync(expectedPath, {encoding: 'utf8'}));
   });
 });
+
+describe('supports', function () {
+  it('should replace px in supports', function () {
+    var px2remIns = new Px2rem();
+    var srcPath = path.join(__dirname, 'assets/supports.css');
+    var srcText = fs.readFileSync(srcPath, {encoding: 'utf8'});
+    var outputText = px2remIns.generateRem(srcText);
+    var expectedText = fs.readFileSync(path.join(__dirname, 'output/supports.css'), {encoding: 'utf8'});
+    assert.equal(outputText, expectedText);
+  });
+});