feat(px2rem): add mediaQuery config

crates/binding/src/lib.rs

@@ -118,6 +118,7 @@ pub struct BuildParams {
         selectorBlackList?: string[];
         selectorWhiteList?: string[];
         selectorDoubleList?: string[];
+        mediaQuery?: boolean;
     };
     stats?: boolean;
     hash?: boolean;

crates/mako/src/config/config.rs

@@ -250,6 +250,8 @@ pub struct Px2RemConfig {
     pub selector_doublelist: Vec<String>,
     #[serde(rename = "minPixelValue", default)]
     pub min_pixel_value: f64,
+    #[serde(rename = "mediaQuery", default)]
+    pub media_query: bool,
 }
 
 impl Default for Px2RemConfig {
@@ -262,6 +264,7 @@ impl Default for Px2RemConfig {
             selector_whitelist: vec![],
             selector_doublelist: vec![],
             min_pixel_value: 0.0,
+            media_query: false,
         }
     }
 }

crates/mako/src/visitors/css_px2rem.rs

@@ -2,7 +2,8 @@ use cached::proc_macro::cached;
 use regex::Regex;
 use swc_core::css::ast::{
     self as swc_css_ast, AttributeSelector, Combinator, CombinatorValue, ComplexSelector,
-    ComplexSelectorChildren, CompoundSelector, Length, SubclassSelector, Token, TypeSelector,
+    ComplexSelectorChildren, CompoundSelector, Length, MediaQueryList, SubclassSelector, Token,
+    TypeSelector,
 };
 use swc_core::css::visit::{VisitMut, VisitMutWith};
 
@@ -80,6 +81,12 @@ impl Px2Rem {
 }
 
 impl VisitMut for Px2Rem {
+    fn visit_mut_complex_selector(&mut self, n: &mut ComplexSelector) {
+        let selector = parse_complex_selector(n);
+        self.current_selectors.push(selector);
+        n.visit_mut_children_with(self);
+    }
+
     fn visit_mut_declaration(&mut self, n: &mut swc_css_ast::Declaration) {
         self.current_decl = match n.name {
             swc_css_ast::DeclarationName::Ident(ref ident) => Some(ident.value.to_string()),
@@ -91,17 +98,6 @@ impl VisitMut for Px2Rem {
         self.current_decl = None;
     }
 
-    fn visit_mut_qualified_rule(&mut self, n: &mut swc_css_ast::QualifiedRule) {
-        self.current_selectors = vec![];
-        n.visit_mut_children_with(self);
-    }
-
-    fn visit_mut_complex_selector(&mut self, n: &mut ComplexSelector) {
-        let selector = parse_complex_selector(n);
-        self.current_selectors.push(selector);
-        n.visit_mut_children_with(self);
-    }
-
     fn visit_mut_length(&mut self, n: &mut Length) {
         if n.unit.value.to_string() == "px" && self.should_transform(n.value.value) {
             n.value.value /= self.config.root;
@@ -114,6 +110,17 @@ impl VisitMut for Px2Rem {
         n.visit_mut_children_with(self);
     }
 
+    fn visit_mut_media_query_list(&mut self, n: &mut MediaQueryList) {
+        if self.config.media_query {
+            n.visit_mut_children_with(self);
+        }
+    }
+
+    fn visit_mut_qualified_rule(&mut self, n: &mut swc_css_ast::QualifiedRule) {
+        self.current_selectors = vec![];
+        n.visit_mut_children_with(self);
+    }
+
     // css variables use as token
     // e.g.
     // .a { --a-b: var(--c-d, 88px); }
@@ -282,10 +289,30 @@ mod tests {
     }
 
     #[test]
-    fn test_media_query() {
+    fn test_media_query_off() {
+        assert_eq!(
+            run_with_default(
+                r#"@media (min-width: 500px) {
+                h1{ width: 100px; }
+            }"#
+            ),
+            r#"@media(min-width:500px){h1{width:1rem}}"#
+        );
+    }
+    #[test]
+
+    fn test_media_query_on() {
         assert_eq!(
-            run_with_default(r#"@media (min-width: 500px) {}"#),
-            r#"@media(min-width:5rem){}"#
+            run(
+                r#"@media (min-width: 500px) {
+                h1{ width: 100px; }
+            }"#,
+                Px2RemConfig {
+                    media_query: true,
+                    ..Default::default()
+                }
+            ),
+            r#"@media(min-width:5rem){h1{width:1rem}}"#
         );
     }
 

docs/config.md

@@ -541,7 +541,8 @@ publicPath configuration. Note: There is a special value `"runtime"`, which mean
 
 ### px2rem
 
-- Type: `false | { root?: number, propBlackList?: string[], propWhiteList?: string[], selectorBlackList?: string[], selectorWhiteList?: string[], selectorDoubleList?: string[], minPixelValue?: number }`
+- Type: `false | { root?: number, propBlackList?: string[], propWhiteList?: string[], selectorBlackList?: string[], 
+  selectorWhiteList?: string[], selectorDoubleList?: string[], minPixelValue?: number, mediaQuery?: boolean }`
 - Default: `false`
 
 Whether to enable px2rem conversion.
@@ -553,6 +554,7 @@ Whether to enable px2rem conversion.
 - `selectorWhiteList`, selector white list
 - `selectorDoubleList`, selector double rem list
 - `minPixelValue`，minimum pixel value, default is `0`
+- `mediaQuery`，allow px to be converted in media queries, default is `false`
 
 ### react
 

docs/config.zh-CN.md

@@ -554,6 +554,7 @@ publicPath 配置。注意：有一个特殊值 `"runtime"`，这意味着它将
 - `selectorWhiteList`，选择器白名单
 - `selectorDoubleList`，选择器白名单，会被转换为两倍的值
 - `minPixelValue`，最小像素值，默认为 `0`
+- `mediaQuery`，是否转换媒体查询中的 px, 默认 `false`
 
 ### react
 

e2e/fixtures/config.px2rem/mako.config.json

@@ -1 +1,5 @@
-{ "px2rem": {} }
+{
+  "px2rem": {
+    "mediaQuery": true
+  }
+}

e2e/fixtures/css.px_2_rem/config.ts

@@ -0,0 +1,3 @@
+export default {
+  autoCSSModules: {},
+};

e2e/fixtures/css.px_2_rem/expect.js

@@ -0,0 +1,15 @@
+const assert = require("assert");
+
+const { parseBuildResult, trim } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+assert.equal(
+  files["index.css"].trim(),
+  `
+@media (min-width: 500px) {
+  .container {
+    padding-top: 0.8rem;
+  }
+}
+`.trim(),
+);

e2e/fixtures/css.px_2_rem/mako.config.json

@@ -0,0 +1,7 @@
+{
+  "minify": false,
+  "px2rem": {
+    "mediaQuery": false
+  },
+  "devtool": false
+}

e2e/fixtures/css.px_2_rem/src/index.css

@@ -0,0 +1,5 @@
+@media (min-width: 500px) {
+    .container {
+        padding-top: 80px;
+    }
+}

e2e/fixtures/css.px_2_rem/src/index.tsx

@@ -0,0 +1 @@
+require("./index.css");

packages/mako/binding.d.ts

@@ -3,10 +3,6 @@
 
 /* auto-generated by NAPI-RS */
 
-export interface TransformOutput {
-  code: string;
-  map?: string;
-}
 export interface JsHooks {
   name?: string;
   load?: (
@@ -109,6 +105,7 @@ export interface BuildParams {
           selectorBlackList?: string[];
           selectorWhiteList?: string[];
           selectorDoubleList?: string[];
+          mediaQuery?: boolean;
         };
     stats?: boolean;
     hash?: boolean;