diff --git a/crates/binding/src/lib.rs b/crates/binding/src/lib.rs index 90a76dfd7..9ebd024fc 100644 --- a/crates/binding/src/lib.rs +++ b/crates/binding/src/lib.rs @@ -118,6 +118,7 @@ pub struct BuildParams { selectorBlackList?: string[]; selectorWhiteList?: string[]; selectorDoubleList?: string[]; + mediaQuery?: boolean; }; stats?: boolean; hash?: boolean; diff --git a/crates/mako/src/config/config.rs b/crates/mako/src/config/config.rs index 2ac6601ce..20d636797 100644 --- a/crates/mako/src/config/config.rs +++ b/crates/mako/src/config/config.rs @@ -250,6 +250,8 @@ pub struct Px2RemConfig { pub selector_doublelist: Vec, #[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, } } } diff --git a/crates/mako/src/visitors/css_px2rem.rs b/crates/mako/src/visitors/css_px2rem.rs index 3da04bec5..5a07b18f5 100644 --- a/crates/mako/src/visitors/css_px2rem.rs +++ b/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}}"# ); } diff --git a/docs/config.md b/docs/config.md index 92cd1987f..64f62fbb6 100644 --- a/docs/config.md +++ b/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 diff --git a/docs/config.zh-CN.md b/docs/config.zh-CN.md index 61bd340c8..48c1acd39 100644 --- a/docs/config.zh-CN.md +++ b/docs/config.zh-CN.md @@ -554,6 +554,7 @@ publicPath 配置。注意:有一个特殊值 `"runtime"`,这意味着它将 - `selectorWhiteList`,选择器白名单 - `selectorDoubleList`,选择器白名单,会被转换为两倍的值 - `minPixelValue`,最小像素值,默认为 `0` +- `mediaQuery`,是否转换媒体查询中的 px, 默认 `false` ### react diff --git a/e2e/fixtures/config.px2rem/mako.config.json b/e2e/fixtures/config.px2rem/mako.config.json index 0fa646e62..de1b63de3 100644 --- a/e2e/fixtures/config.px2rem/mako.config.json +++ b/e2e/fixtures/config.px2rem/mako.config.json @@ -1 +1,5 @@ -{ "px2rem": {} } +{ + "px2rem": { + "mediaQuery": true + } +} diff --git a/e2e/fixtures/css.px_2_rem/config.ts b/e2e/fixtures/css.px_2_rem/config.ts new file mode 100644 index 000000000..4a636e84b --- /dev/null +++ b/e2e/fixtures/css.px_2_rem/config.ts @@ -0,0 +1,3 @@ +export default { + autoCSSModules: {}, +}; diff --git a/e2e/fixtures/css.px_2_rem/expect.js b/e2e/fixtures/css.px_2_rem/expect.js new file mode 100644 index 000000000..de935dd57 --- /dev/null +++ b/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(), +); diff --git a/e2e/fixtures/css.px_2_rem/mako.config.json b/e2e/fixtures/css.px_2_rem/mako.config.json new file mode 100644 index 000000000..ae8d1dc76 --- /dev/null +++ b/e2e/fixtures/css.px_2_rem/mako.config.json @@ -0,0 +1,7 @@ +{ + "minify": false, + "px2rem": { + "mediaQuery": false + }, + "devtool": false +} diff --git a/e2e/fixtures/css.px_2_rem/src/index.css b/e2e/fixtures/css.px_2_rem/src/index.css new file mode 100644 index 000000000..4b6b829e0 --- /dev/null +++ b/e2e/fixtures/css.px_2_rem/src/index.css @@ -0,0 +1,5 @@ +@media (min-width: 500px) { + .container { + padding-top: 80px; + } +} diff --git a/e2e/fixtures/css.px_2_rem/src/index.tsx b/e2e/fixtures/css.px_2_rem/src/index.tsx new file mode 100644 index 000000000..7c0653a0a --- /dev/null +++ b/e2e/fixtures/css.px_2_rem/src/index.tsx @@ -0,0 +1 @@ +require("./index.css"); diff --git a/packages/mako/binding.d.ts b/packages/mako/binding.d.ts index 969219c72..32bf34fb2 100644 --- a/packages/mako/binding.d.ts +++ b/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;