feat(css/ast): Support @scope at-rule

crates/swc_atoms/words.txt

@@ -2117,6 +2117,7 @@ scaleZ
 scalex
 scaley
 scalez
+scope
 script
 scroll
 scroll-behavior

crates/swc_css_ast/src/at_rule.rs

@@ -4,8 +4,9 @@ use swc_atoms::{Atom, JsWord};
 use swc_common::{ast_node, util::take::Take, EqIgnoreSpan, Span};
 
 use crate::{
-    CustomIdent, CustomPropertyName, DashedIdent, Declaration, Dimension, FamilyName, Function,
-    Ident, ListOfComponentValues, Number, Percentage, Ratio, SelectorList, SimpleBlock, Str, Url,
+    CustomIdent, CustomPropertyName, DashedIdent, Declaration, Dimension, FamilyName,
+    ForgivingSelectorList, Function, Ident, ListOfComponentValues, Number, Percentage, Ratio,
+    SelectorList, SimpleBlock, Str, Url,
 };
 
 #[ast_node("AtRule")]
@@ -84,6 +85,18 @@ pub enum AtRulePrelude {
     ContainerPrelude(ContainerCondition),
     #[tag("CustomMedia")]
     CustomMediaPrelude(CustomMediaQuery),
+    #[tag("ScopeRange")]
+    ScopePrelude(ScopeRange),
+}
+
+#[ast_node("ScopeRange")]
+#[derive(Eq, Hash, EqIgnoreSpan)]
+pub struct ScopeRange {
+    pub span: Span,
+    /// https://drafts.csswg.org/css-cascade-6/#typedef-scope-start
+    pub scope_start: Option<ForgivingSelectorList>,
+    /// https://drafts.csswg.org/css-cascade-6/#typedef-scope-end
+    pub scope_end: Option<ForgivingSelectorList>,
 }
 
 #[ast_node]

crates/swc_css_codegen/src/lib.rs

@@ -324,6 +324,9 @@ where
                     n
                 )
             }
+            AtRulePrelude::ScopePrelude(n) => {
+                emit!(self, n);
+            }
         }
     }
 
@@ -2459,6 +2462,23 @@ where
         }
     }
 
+    #[emitter]
+    fn emit_scope_range(&mut self, n: &ScopeRange) -> Result {
+        if let Some(start) = &n.scope_start {
+            formatting_space!(self);
+            write_raw!(self, "(");
+            emit!(self, start);
+            write_raw!(self, ")");
+        }
+        if let Some(end) = &n.scope_end {
+            write_raw!(self, " to");
+            space!(self);
+            write_raw!(self, "(");
+            emit!(self, end);
+            write_raw!(self, ")");
+        }
+    }
+
     fn emit_list_pseudo_element_selector_children(
         &mut self,
         nodes: &[PseudoElementSelectorChildren],

crates/swc_css_codegen/tests/fixture/at-rules/scope/input.css

@@ -0,0 +1,35 @@
+@scope {
+
+    /* Only match links inside a light-scheme */
+    a {
+        color: darkmagenta;
+    }
+}
+
+@scope (.light-scheme) {
+
+    /* Only match links inside a light-scheme */
+    a {
+        color: darkmagenta;
+    }
+}
+
+@scope to (.content > *) {
+    img {
+        border-radius: 50%;
+    }
+
+    .content {
+        padding: 1em;
+    }
+}
+
+@scope (.media-object) to (.content > *) {
+    img {
+        border-radius: 50%;
+    }
+
+    .content {
+        padding: 1em;
+    }
+}

crates/swc_css_codegen/tests/fixture/at-rules/scope/output.css

@@ -0,0 +1,26 @@
+@scope {
+  a {
+    color: darkmagenta;
+  }
+}
+@scope (.light-scheme) {
+  a {
+    color: darkmagenta;
+  }
+}
+@scope to (.content > *) {
+  img {
+    border-radius: 50%;
+  }
+  .content {
+    padding: 1em;
+  }
+}
+@scope (.media-object) to (.content > *) {
+  img {
+    border-radius: 50%;
+  }
+  .content {
+    padding: 1em;
+  }
+}

crates/swc_css_codegen/tests/fixture/at-rules/scope/output.min.css

@@ -0,0 +1 @@
+@scope{a{color:darkmagenta}}@scope(.light-scheme){a{color:darkmagenta}}@scope to (.content>*){img{border-radius:50%}.content{padding:1em}}@scope(.media-object) to (.content>*){img{border-radius:50%}.content{padding:1em}}

crates/swc_css_parser/src/error.rs

@@ -71,6 +71,7 @@ impl Error {
             ErrorKind::InvalidKeyframesName(s) => {
                 format!("{} is not valid name for keyframes", s).into()
             }
+            ErrorKind::InvalidScopeAtRule => "Invalid @scope at-rule".into(),
         }
     }
 
@@ -115,6 +116,7 @@ pub enum ErrorKind {
     InvalidAnPlusBMicrosyntax,
     InvalidCustomIdent(JsWord),
     InvalidKeyframesName(&'static str),
+    InvalidScopeAtRule,
 
     UnknownAtRuleNotTerminated,
 }

crates/swc_css_parser/src/macros.rs

@@ -146,4 +146,8 @@ macro_rules! tok {
     (">") => {
         swc_css_ast::Token::Delim { value: '>' }
     };
+
+    ("to") => {
+        swc_css_ast::Token::Ident { value: js_word!("to"), .. }
+    };
 }

crates/swc_css_parser/src/parser/at_rules/mod.rs

@@ -424,6 +424,15 @@ where
 
                 None
             }
+            js_word!("scope") => {
+                self.input.skip_ws();
+
+                let prelude = AtRulePrelude::ScopePrelude(self.parse()?);
+
+                self.input.skip_ws();
+
+                Some(prelude)
+            }
             _ => {
                 return Err(Error::new(Default::default(), ErrorKind::Ignore));
             }
@@ -756,6 +765,13 @@ where
 
                 rule_list
             }
+            js_word!("scope") => {
+                let rule_list = self.parse_as::<Vec<Rule>>()?;
+                let rule_list: Vec<ComponentValue> =
+                    rule_list.into_iter().map(ComponentValue::from).collect();
+
+                rule_list
+            }
             _ => {
                 return Err(Error::new(Default::default(), ErrorKind::Ignore));
             }
@@ -2625,3 +2641,67 @@ where
         })
     }
 }
+
+impl<I> Parse<ScopeRange> for Parser<I>
+where
+    I: ParserInput,
+{
+    fn parse(&mut self) -> PResult<ScopeRange> {
+        let span = self.input.cur_span();
+
+        if is!(self, EOF) {
+            return Ok(ScopeRange {
+                span: span!(self, span.lo),
+                scope_start: None,
+                scope_end: None,
+            });
+        }
+
+        match cur!(self) {
+            tok!("(") => {
+                bump!(self);
+                let start = self.parse()?;
+                expect!(self, ")");
+                self.input.skip_ws();
+
+                let end = if is!(self, EOF) {
+                    None
+                } else if is_case_insensitive_ident!(self, "to") {
+                    bump!(self);
+                    self.input.skip_ws();
+                    expect!(self, "(");
+                    let result = self.parse()?;
+                    expect!(self, ")");
+                    Some(result)
+                } else {
+                    None
+                };
+
+                Ok(ScopeRange {
+                    span: span!(self, span.lo),
+                    scope_start: Some(start),
+                    scope_end: end,
+                })
+            }
+            _ => {
+                if is_case_insensitive_ident!(self, "to") {
+                    bump!(self);
+
+                    self.input.skip_ws();
+
+                    expect!(self, "(");
+                    let end = self.parse()?;
+                    expect!(self, ")");
+
+                    return Ok(ScopeRange {
+                        span: span!(self, span.lo),
+                        scope_start: None,
+                        scope_end: Some(end),
+                    });
+                }
+
+                return Err(Error::new(span, ErrorKind::InvalidScopeAtRule));
+            }
+        }
+    }
+}

crates/swc_css_parser/tests/fixture/at-rule/scope/basic/input.css

@@ -0,0 +1,45 @@
+@scope {
+
+    /* Only match links inside a light-scheme */
+    a {
+        color: darkmagenta;
+    }
+}
+
+@scope (.light-scheme) {
+
+    /* Only match links inside a light-scheme */
+    a {
+        color: darkmagenta;
+    }
+}
+
+@scope to (.content > *) {
+    img {
+        border-radius: 50%;
+    }
+
+    .content {
+        padding: 1em;
+    }
+}
+
+@scope (.media-object) to (.content > *) {
+    img {
+        border-radius: 50%;
+    }
+
+    .content {
+        padding: 1em;
+    }
+}
+
+@scope TO (.content > *) {
+    img {
+        border-radius: 50%;
+    }
+
+    .content {
+        padding: 1em;
+    }
+}