fix: 修复样式继承

NervJS · Oct 12, 2023 · 771ffd5 · 771ffd5
1 parent a739778
commit 771ffd5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 27 deletions.
diff --git a/__test__/index.spec.mjs.md b/__test__/index.spec.mjs.md
@@ -31,7 +31,7 @@ Generated by [AVA](https://avajs.dev).
         getDom() {␊
             return <div className='cc'>␊
     ␊
-            <span className='line1 txt' style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#999;font-size:12px;line-height:1;flex-shrink:0px;display:inline-flex;background-color:#fff6f0;border-radius:8px;width:343px;height:166px;font-family:Source Han Sans CN;font-weight:500;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;position:relative;border-width:1px;border-style:solid;border-color:#999;top:3px;left:201px;z-index:12;">成员123: 4000+</span>␊
+            <span className='line1 txt' style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#999;font-size:12px;line-height:1;flex-shrink:0px;display:inline-flex;font-family:Source Han Sans CN;font-weight:500;">成员123: 4000+</span>␊
     ␊
             <div className='cnt_row4'>␊
     ␊
@@ -65,57 +65,57 @@ Generated by [AVA](https://avajs.dev).
                 padding-bottom: "29px"␊
             }}>␊
     ␊
-            <div className='cnt_row' style="border-radius:100px;background-color:#000000b3;display:flex;align-items:center;justify-content:center;flex-shrink:0px;gap:4px;height:18px;padding-left:4px;padding-right:8px;padding-top:8px;padding-bottom:8px;width:176px;font-family:Source Han Sans CN;font-weight:500;flex-direction:column;">␊
+            <div className='cnt_row' style="border-radius:100px;background-color:#000000b3;display:flex;align-items:center;justify-content:center;flex-shrink:0px;gap:4px;height:18px;padding-left:4px;padding-right:8px;padding-top:8px;padding-bottom:8px;width:176px;font-family:Source Han Sans CN;font-weight:500;">␊
     ␊
               <>␊
     ␊
-                <img className='icon' src='//img20.360buyimg.com/img/jfs/t1/166410/12/38783/3147/64f58062Fd7737e2b/5aaf0205cd1ce175.png' style="width:18px;height:18px;background-color:#fff6f0;border-radius:8px;font-family:Source Han Sans CN;font-weight:500;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex-shrink:0px;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;"></img>␊
+                <img className='icon' src='//img20.360buyimg.com/img/jfs/t1/166410/12/38783/3147/64f58062Fd7737e2b/5aaf0205cd1ce175.png' style="width:18px;height:18px;font-family:Source Han Sans CN;font-weight:500;"></img>␊
     ␊
                 <>␊
     ␊
-                  <span className='line1 instruction' style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;font-size:12px;line-height:1;flex-shrink:0px;display:inline-flex;background-color:#fff6f0;border-radius:8px;width:343px;height:166px;font-family:Source Han Sans CN;font-weight:500;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;">超能芭比 5分钟前查看团购</span>␊
+                  <span className='line1 instruction' style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;font-size:12px;line-height:1;flex-shrink:0px;display:inline-flex;font-family:Source Han Sans CN;font-weight:500;">超能芭比 5分钟前查看团购</span>␊
     ␊
                 </>␊
     ␊
               </>␊
     ␊
             </div>␊
     ␊
-            <div className='cnt_row1' style="display:flex;align-items:center;justify-content:flex-start;gap:10px;position:relative;width:311px;height:50px;background-color:#fff6f0;border-radius:8px;font-family:Source Han Sans CN;font-weight:500;flex-direction:column;flex-shrink:0px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;font-size:12px;line-height:1;">␊
+            <div className='cnt_row1' style="display:flex;align-items:center;justify-content:flex-start;gap:10px;position:relative;width:311px;height:50px;font-family:Source Han Sans CN;font-weight:500;white-space:nowrap;color:#fff;font-size:12px;line-height:1;">␊
     ␊
-              <img className='img' src='//img12.360buyimg.com/img/jfs/t1/100881/15/44805/18567/64f58062F1b45e0cb/caf065a7410087ce.png' style="width:50px;height:50px;background-color:#fff6f0;border-radius:8px;font-family:Source Han Sans CN;font-weight:500;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex-shrink:0px;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;font-size:12px;line-height:1;position:relative;"></img>␊
+              <img className='img' src='//img12.360buyimg.com/img/jfs/t1/100881/15/44805/18567/64f58062F1b45e0cb/caf065a7410087ce.png' style="width:50px;height:50px;font-family:Source Han Sans CN;font-weight:500;white-space:nowrap;color:#fff;font-size:12px;line-height:1;"></img>␊
     ␊
-              <div className='cnt_col' style="display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;width:145px;height:50px;background-color:#fff6f0;border-radius:8px;font-family:Source Han Sans CN;font-weight:500;flex-shrink:0px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;font-size:12px;line-height:1;position:relative;">␊
+              <div className='cnt_col' style="display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;width:145px;height:50px;font-family:Source Han Sans CN;font-weight:500;white-space:nowrap;color:#fff;font-size:12px;line-height:1;">␊
     ␊
-                <span className='line1 instruction1' style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#000;font-size:16px;line-height:1;flex-shrink:0px;width:116px;display:inline-flex;background-color:#fff6f0;border-radius:8px;height:166px;font-family:Source Han Sans CN;font-weight:500;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;position:relative;">巴拉巴拉小魔仙</span>␊
+                <span className='line1 instruction1' style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#000;font-size:16px;line-height:1;flex-shrink:0px;width:116px;display:inline-flex;font-family:Source Han Sans CN;font-weight:500;">巴拉巴拉小魔仙</span>␊
     ␊
-                <span className='line1 txt' style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#999;font-size:12px;line-height:1;flex-shrink:0px;display:inline-flex;background-color:#fff6f0;border-radius:8px;width:343px;height:166px;font-family:Source Han Sans CN;font-weight:500;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;position:relative;">成员: 4000+</span>␊
+                <span className='line1 txt' style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#999;font-size:12px;line-height:1;flex-shrink:0px;display:inline-flex;font-family:Source Han Sans CN;font-weight:500;">成员: 4000+</span>␊
     ␊
               </div>␊
     ␊
-              <div className='cnt_row2' style="border-width:1px;border-style:solid;border-color:#999;border-radius:12px;display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0px;gap:-94px;position:absolute;top:3px;left:201px;width:110px;height:23px;padding-left:8px;padding-right:8px;padding-top:4px;padding-bottom:4px;z-index:12;background-color:#fff6f0;font-family:Source Han Sans CN;font-weight:500;flex-direction:column;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;font-size:12px;line-height:1;">␊
+              <div className='cnt_row2' style="border-width:1px;border-style:solid;border-color:#999;border-radius:12px;display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0px;gap:-94px;position:absolute;top:3px;left:201px;width:110px;height:23px;padding-left:8px;padding-right:8px;padding-top:4px;padding-bottom:4px;z-index:12;font-family:Source Han Sans CN;font-weight:500;white-space:nowrap;color:#fff;font-size:12px;line-height:1;">␊
     ␊
                 {this.getDom()}␊
     ␊
-                <img className='icon1' src='//img11.360buyimg.com/img/jfs/t1/175578/35/40256/1981/64f58062Fddaf1a21/f1111d9988a65ccc.png' style="width:15px;height:15px;background-color:#fff6f0;border-radius:8px;font-family:Source Han Sans CN;font-weight:500;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex-shrink:0px;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;font-size:12px;line-height:1;position:relative;border-width:1px;border-style:solid;border-color:#999;top:3px;left:201px;z-index:12;"></img>␊
+                <img className='icon1' src='//img11.360buyimg.com/img/jfs/t1/175578/35/40256/1981/64f58062Fddaf1a21/f1111d9988a65ccc.png' style="width:15px;height:15px;font-family:Source Han Sans CN;font-weight:500;white-space:nowrap;color:#fff;font-size:12px;line-height:1;"></img>␊
     ␊
-                <span className='instruction2' style="color:#999;font-size:11px;line-height:1.36;text-align:center;flex-shrink:0px;overflow:hidden;background-color:#fff6f0;border-radius:8px;width:343px;height:166px;font-family:Source Han Sans CN;font-weight:500;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;text-overflow:ellipsis;white-space:nowrap;position:relative;border-width:1px;border-style:solid;border-color:#999;top:3px;left:201px;z-index:12;">slslsl-jsj</span>␊
+                <span className='instruction2' style="color:#999;font-size:11px;line-height:1.36;text-align:center;flex-shrink:0px;overflow:hidden;font-family:Source Han Sans CN;font-weight:500;white-space:nowrap;">slslsl-jsj</span>␊
     ␊
-                <span className='txt1' style="color:#222;font-size:11px;line-height:1.36;text-align:center;flex-shrink:0px;background-color:#fff6f0;border-radius:8px;width:343px;height:166px;font-family:Source Han Sans CN;font-weight:500;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;border-width:1px;border-style:solid;border-color:#999;top:3px;left:201px;z-index:12;">复制</span>␊
+                <span className='txt1' style="color:#222;font-size:11px;line-height:1.36;text-align:center;flex-shrink:0px;font-family:Source Han Sans CN;font-weight:500;white-space:nowrap;">复制</span>␊
     ␊
               </div>␊
     ␊
             </div>␊
     ␊
-            <div className='cnt_row3' style="display:flex;align-items:center;justify-content:space-between;gap:-311px;width:311px;height:44px;background-color:#fff6f0;border-radius:8px;font-family:Source Han Sans CN;font-weight:500;flex-direction:column;flex-shrink:0px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;font-size:12px;line-height:1;position:relative;border-width:1px;border-style:solid;border-color:#999;top:3px;left:201px;z-index:12;text-align:center;">␊
+            <div className='cnt_row3' style="display:flex;align-items:center;justify-content:space-between;gap:-311px;width:311px;height:44px;font-family:Source Han Sans CN;font-weight:500;white-space:nowrap;color:#fff;font-size:12px;line-height:1;text-align:center;">␊
     ␊
-              <span className='line2 txt2' style="color:#999;font-size:12px;line-height:1.83;flex-shrink:0px;width:290px;display:inline-flex;background-color:#fff6f0;border-radius:8px;height:166px;font-family:Source Han Sans CN;font-weight:500;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;border-width:1px;border-style:solid;border-color:#999;top:3px;left:201px;z-index:12;text-align:center;">␊
+              <span className='line2 txt2' style="color:#999;font-size:12px;line-height:1.83;flex-shrink:0px;width:290px;display:inline-flex;font-family:Source Han Sans CN;font-weight:500;white-space:nowrap;text-align:center;">␊
     ␊
                 团长介绍：售前售后进群售前售后进群售前售后进群售前售后进群VXklsidohh...␊
     ␊
               </span>␊
     ␊
-              <img className='img1' src='//img14.360buyimg.com/img/jfs/t1/206378/24/25778/195/64eca527F378f17a2/c1623681708609fd.png' style="width:6px;height:10px;background-color:#fff6f0;border-radius:8px;font-family:Source Han Sans CN;font-weight:500;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex-shrink:0px;gap:8px;padding-left:16px;padding-right:16px;padding-top:29px;padding-bottom:29px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;font-size:12px;line-height:1;position:relative;border-width:1px;border-style:solid;border-color:#999;top:3px;left:201px;z-index:12;text-align:center;"></img>␊
+              <img className='img1' src='//img14.360buyimg.com/img/jfs/t1/206378/24/25778/195/64eca527F378f17a2/c1623681708609fd.png' style="width:6px;height:10px;font-family:Source Han Sans CN;font-weight:500;white-space:nowrap;color:#fff;font-size:12px;line-height:1;text-align:center;"></img>␊
     ␊
             </div>␊
     ␊

diff --git a/__test__/index.spec.mjs.snap b/__test__/index.spec.mjs.snap
diff --git a/src/style_parser.rs b/src/style_parser.rs
@@ -163,19 +163,16 @@ impl<'i> StyleParser<'i> {
           let has_property_index = final_properties
             .iter()
             .position(|property| property.property_id() == parent_declaration.property_id());
+          let is_style_inheritable = is_style_inheritable(parent_declaration.property_id());
           if let Some(index) = has_property_index {
-            let is_style_inheritable = is_style_inheritable(final_properties[index].property_id());
-            if is_style_inheritable {
-              final_properties[index] = parent_declaration.clone();
-            } else {
-              let value = final_properties[index].value_to_css_string(PrinterOptions::default());
+            let value = final_properties[index].value_to_css_string(PrinterOptions::default());
               if let Ok(value) = value {
+                // Todo "initial" "unset"
                 if value.as_str() == "inherit" {
                   final_properties[index] = parent_declaration.clone();
                 }
               }
-            }
-          } else {
+          } else if is_style_inheritable {
             final_properties.push(parent_declaration.clone());
           }
         }

diff --git a/src/utils.rs b/src/utils.rs
@@ -5,7 +5,7 @@ use lightningcss::properties::PropertyId;
 use once_cell::sync::Lazy;
 use swc_ecma_ast::{JSXMemberExpr, JSXObject};
 
-static _INHERITABLE_STYLES: Lazy<HashSet<PropertyId<'static>>> = Lazy::new(|| {
+static INHERITABLE_STYLES: Lazy<HashSet<PropertyId<'static>>> = Lazy::new(|| {
   let mut styles = HashSet::new();
   styles.insert(PropertyId::from("color"));
   styles.insert(PropertyId::from("font-size"));
@@ -90,9 +90,8 @@ pub fn create_qualname(str: &str) -> QualName {
   QualName::new(None, ns!(), LocalName::from(str))
 }
 
-pub fn is_style_inheritable(_style: PropertyId<'_>) -> bool {
-  // INHERITABLE_STYLES.contains(&style)
-  false
+pub fn is_style_inheritable(style: PropertyId<'_>) -> bool {
+  INHERITABLE_STYLES.contains(&style)
 }
 
 pub fn is_starts_with_uppercase(str: &str) -> bool {