align css hmr

Author: Brooooooklyn

crates/oxc_angular_compiler/src/ast/r3.rs

@@ -211,6 +211,8 @@ pub enum R3Node<'a> {
     Component(Box<'a, R3Component<'a>>),
     /// A directive reference.
     Directive(Box<'a, R3Directive<'a>>),
+    /// A host element (for type checking only, cannot be visited).
+    HostElement(Box<'a, R3HostElement<'a>>),
 }
 
 impl<'a> R3Node<'a> {
@@ -240,6 +242,7 @@ impl<'a> R3Node<'a> {
             Self::LetDeclaration(n) => n.source_span,
             Self::Component(n) => n.source_span,
             Self::Directive(n) => n.source_span,
+            Self::HostElement(n) => n.source_span,
         }
     }
 
@@ -269,6 +272,8 @@ impl<'a> R3Node<'a> {
             Self::LetDeclaration(n) => visitor.visit_let_declaration(n),
             Self::Component(n) => visitor.visit_component(n),
             Self::Directive(n) => visitor.visit_directive(n),
+            // HostElement cannot be visited (used only for type checking)
+            Self::HostElement(_) => {}
         }
     }
 }
@@ -1029,6 +1034,21 @@ pub struct R3Directive<'a> {
     pub i18n: Option<I18nMeta<'a>>,
 }
 
+/// Represents the host element of a directive.
+/// This node is used only for type checking purposes and cannot be produced
+/// from a user's template. HostElement nodes should NOT be visited.
+#[derive(Debug)]
+pub struct R3HostElement<'a> {
+    /// Possible tag names for the host element. Must have at least one.
+    pub tag_names: Vec<'a, Atom<'a>>,
+    /// Attribute and property bindings.
+    pub bindings: Vec<'a, R3BoundAttribute<'a>>,
+    /// Event listeners.
+    pub listeners: Vec<'a, R3BoundEvent<'a>>,
+    /// Source span.
+    pub source_span: Span,
+}
+
 /// An ICU message for internationalization.
 #[derive(Debug)]
 pub struct R3Icu<'a> {

crates/oxc_angular_compiler/src/pipeline/ingest.rs

@@ -438,8 +438,8 @@ fn ingest_node<'a>(job: &mut ComponentCompilationJob<'a>, view_xref: XrefId, nod
         R3Node::IfBlockBranch(_) => {
             // If branches are handled by the parent if block
         }
-        R3Node::Component(_) | R3Node::Directive(_) => {
-            // Components and directives are resolved during binding
+        R3Node::Component(_) | R3Node::Directive(_) | R3Node::HostElement(_) => {
+            // Components, directives, and host elements are resolved during binding/type checking
         }
     }
 }

crates/oxc_angular_compiler/src/styles/encapsulation.rs

@@ -65,26 +65,41 @@ pub fn shim_css_text(css: &str, content_attr: &str, host_attr: &str) -> String {
 
     let mut result = result;
 
-    // Step 1: Handle :host-context() - must be done before :host
+    // Step 1: Process polyfill directives (polyfill-next-selector, polyfill-rule)
+    // These convert ShadowDOM rules to work with the CSS shim
+    result = insert_polyfill_directives(&result);
+    result = insert_polyfill_rules(&result);
+
+    // Step 2: Extract unscoped rules (polyfill-unscoped-rule)
+    // These rules are added at the end WITHOUT scoping
+    let unscoped_rules = extract_unscoped_rules(&result);
+    result = remove_unscoped_rules(&result);
+
+    // Step 3: Handle :host-context() - must be done before :host
     result = convert_colon_host_context(&result, content_attr, host_attr);
 
-    // Step 2: Handle :host selectors
+    // Step 4: Handle :host selectors
     result = convert_colon_host(&result, host_attr);
 
-    // Step 3: Handle ::ng-deep and other shadow DOM selectors
+    // Step 5: Handle ::ng-deep and other shadow DOM selectors
     result = convert_shadow_dom_selectors(&result);
 
-    // Step 4: Scope keyframes and animation properties
+    // Step 6: Scope keyframes and animation properties
     if !content_attr.is_empty() {
         result = scope_keyframes_related_css(&result, content_attr);
     }
 
-    // Step 5: Scope all selectors with the content attribute
+    // Step 7: Scope all selectors with the content attribute
     if !content_attr.is_empty() {
         result = scope_selectors(&result, content_attr, host_attr);
     }
 
-    // Step 6: Restore comments
+    // Step 8: Append unscoped rules (without scoping)
+    if !unscoped_rules.is_empty() {
+        result = result + "\n" + unscoped_rules.trim();
+    }
+
+    // Step 9: Restore comments
     restore_comments(&result, &comments)
 }
 
@@ -430,11 +445,16 @@ fn convert_colon_host_context(css: &str, content_attr: &str, host_attr: &str) ->
 /// `:host` becomes `[host_attr]`
 /// `:host(.active)` becomes `.active[host_attr]`
 /// `:host[attr]` becomes `[attr][host_attr]`
+/// `:host.class` becomes `.class[host_attr]`
+/// `:host#id` becomes `#id[host_attr]`
 fn convert_colon_host(css: &str, host_attr: &str) -> String {
-    // Pattern: :host followed by optional (selector)
+    // Pattern: :host followed by (selector) in parentheses
     let host_with_selector_re: &Regex = regex!(r":host\(([^)]+)\)");
     // Pattern: :host followed by attribute selector directly (no space)
     let host_with_attr_re: &Regex = regex!(r":host(\[[^\]]+\])");
+    // Pattern: :host followed by class, id, or pseudo selector directly attached
+    // Matches: :host.class, :host#id, :host:hover, :host.class:before, etc.
+    let host_with_class_re: &Regex = regex!(r":host([.#:][^{\s,]+)");
     let host_plain_re: &Regex = regex!(r":host\b");
 
     let attr = if host_attr.is_empty() { String::new() } else { format!("[{}]", host_attr) };
@@ -455,7 +475,15 @@ fn convert_colon_host(css: &str, host_attr: &str) -> String {
         })
         .to_string();
 
-    // Then handle plain :host
+    // Then handle :host.class, :host#id, :host:pseudo directly attached
+    let result = host_with_class_re
+        .replace_all(&result, |caps: &regex::Captures| {
+            let attached_selector = caps.get(1).map_or("", |m| m.as_str());
+            format!("{}{}", attached_selector, attr)
+        })
+        .to_string();
+
+    // Finally handle plain :host
     host_plain_re.replace_all(&result, attr.as_str()).to_string()
 }
 
@@ -985,6 +1013,130 @@ fn is_keyframe_selector(selector: &str) -> bool {
     false
 }
 
+// ============================================================================
+// Polyfill Directive Processing
+// ============================================================================
+
+/// Process styles to convert native ShadowDOM rules that will trip up the CSS parser.
+///
+/// Converts polyfill-next-selector rules like:
+/// ```css
+/// polyfill-next-selector { content: ':host menu-item'; }
+/// ::content menu-item { ... }
+/// ```
+///
+/// to:
+/// ```css
+/// :host menu-item { ... }
+/// ```
+fn insert_polyfill_directives(css: &str) -> String {
+    // Handle both single and double quotes separately since Rust regex doesn't support backreferences
+    let re_single: &Regex =
+        regex!(r#"(?im)polyfill-next-selector[^}]*content:[\s]*?'([^']*)'[;\s]*\}([^{]*?)\{"#);
+    let re_double: &Regex =
+        regex!(r#"(?im)polyfill-next-selector[^}]*content:[\s]*?"([^"]*)"[;\s]*\}([^{]*?)\{"#);
+
+    let result = re_single
+        .replace_all(css, |caps: &regex::Captures| {
+            // Replace with: selector {
+            format!("{} {{", &caps[1])
+        })
+        .into_owned();
+
+    re_double
+        .replace_all(&result, |caps: &regex::Captures| format!("{} {{", &caps[1]))
+        .into_owned()
+}
+
+/// Process styles to add rules which will only apply under the polyfill.
+///
+/// Converts polyfill-rule rules like:
+/// ```css
+/// polyfill-rule {
+///   content: ':host menu-item';
+///   background: blue;
+/// }
+/// ```
+///
+/// to:
+/// ```css
+/// :host menu-item { background: blue; }
+/// ```
+fn insert_polyfill_rules(css: &str) -> String {
+    // Handle both single and double quotes separately
+    let re_single: &Regex =
+        regex!(r#"(?im)polyfill-rule[^}]*content:[\s]*'([^']*)'[;\s]*([^}]*)\}"#);
+    let re_double: &Regex =
+        regex!(r#"(?im)polyfill-rule[^}]*content:[\s]*"([^"]*)"[;\s]*([^}]*)\}"#);
+
+    let replace_fn = |caps: &regex::Captures| {
+        let selector = &caps[1];
+        let rule_body = &caps[2];
+        let cleaned_body = rule_body.trim().trim_start_matches(';').trim();
+        format!("{} {{ {} }}", selector, cleaned_body)
+    };
+
+    let result = re_single.replace_all(css, replace_fn).into_owned();
+    re_double.replace_all(&result, replace_fn).into_owned()
+}
+
+/// Extract unscoped rules from CSS text.
+///
+/// These are rules that should apply under the polyfill but NOT be scoped.
+///
+/// Converts polyfill-unscoped-rule rules like:
+/// ```css
+/// @polyfill-unscoped-rule {
+///   content: 'menu-item';
+///   background: blue;
+/// }
+/// ```
+///
+/// to:
+/// ```css
+/// menu-item { background: blue; }
+/// ```
+///
+/// Returns the extracted unscoped rules as a string.
+fn extract_unscoped_rules(css: &str) -> String {
+    // Handle both single and double quotes separately
+    let re_single: &Regex =
+        regex!(r#"(?im)polyfill-unscoped-rule[^}]*content:[\s]*'([^']*)'[;\s]*([^}]*)\}"#);
+    let re_double: &Regex =
+        regex!(r#"(?im)polyfill-unscoped-rule[^}]*content:[\s]*"([^"]*)"[;\s]*([^}]*)\}"#);
+
+    let mut result = String::new();
+
+    for caps in re_single.captures_iter(css) {
+        let selector = &caps[1];
+        let rule_body = &caps[2];
+        let cleaned_body = rule_body.trim().trim_start_matches(';').trim();
+        result.push_str(&format!("{} {{ {} }}\n\n", selector, cleaned_body));
+    }
+
+    for caps in re_double.captures_iter(css) {
+        let selector = &caps[1];
+        let rule_body = &caps[2];
+        let cleaned_body = rule_body.trim().trim_start_matches(';').trim();
+        result.push_str(&format!("{} {{ {} }}\n\n", selector, cleaned_body));
+    }
+
+    result
+}
+
+/// Remove polyfill-unscoped-rule blocks from CSS text.
+///
+/// This is called after extracting the unscoped rules.
+fn remove_unscoped_rules(css: &str) -> String {
+    let re_single: &Regex =
+        regex!(r#"(?im)polyfill-unscoped-rule[^}]*content:[\s]*'[^']*'[;\s]*[^}]*\}"#);
+    let re_double: &Regex =
+        regex!(r#"(?im)polyfill-unscoped-rule[^}]*content:[\s]*"[^"]*"[;\s]*[^}]*\}"#);
+
+    let result = re_single.replace_all(css, "").into_owned();
+    re_double.replace_all(&result, "").into_owned()
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -1050,4 +1202,110 @@ mod tests {
         assert!(result.contains("@media"), "Got: {}", result);
         assert!(result.contains(".button[contenta]"), "Got: {}", result);
     }
+
+    // ============================================================================
+    // Polyfill Directive Tests
+    // ============================================================================
+
+    #[test]
+    fn test_polyfill_next_selector_single_quotes() {
+        let result = shim_css_text("polyfill-next-selector {content: 'x > y'} z {}", "contenta", "");
+        assert!(result.contains("x[contenta]"), "Got: {}", result);
+        assert!(result.contains("y[contenta]"), "Got: {}", result);
+        assert!(!result.contains("polyfill-next-selector"), "Got: {}", result);
+        assert!(!result.contains("z"), "Got: {}", result);
+    }
+
+    #[test]
+    fn test_polyfill_next_selector_double_quotes() {
+        let result =
+            shim_css_text("polyfill-next-selector {content: \"x > y\"} z {}", "contenta", "");
+        assert!(result.contains("x[contenta]"), "Got: {}", result);
+        assert!(result.contains("y[contenta]"), "Got: {}", result);
+    }
+
+    #[test]
+    fn test_polyfill_next_selector_with_attribute() {
+        let result = shim_css_text(
+            "polyfill-next-selector {content: 'button[priority=\"1\"]'} z {}",
+            "contenta",
+            "",
+        );
+        assert!(
+            result.contains("button[priority=\"1\"][contenta]"),
+            "Got: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_polyfill_unscoped_rule_single_quotes() {
+        let result = shim_css_text(
+            "polyfill-unscoped-rule {content: '#menu > .bar';color: blue;}",
+            "contenta",
+            "",
+        );
+        // Unscoped rules should NOT have the content attribute
+        assert!(result.contains("#menu > .bar"), "Got: {}", result);
+        assert!(result.contains("color: blue"), "Got: {}", result);
+        assert!(!result.contains("[contenta]") || result.contains("#menu > .bar {"), "Unscoped rule should not have content attribute. Got: {}", result);
+    }
+
+    #[test]
+    fn test_polyfill_unscoped_rule_double_quotes() {
+        let result = shim_css_text(
+            "polyfill-unscoped-rule {content: \"#menu > .bar\";color: blue;}",
+            "contenta",
+            "",
+        );
+        assert!(result.contains("#menu > .bar"), "Got: {}", result);
+        assert!(result.contains("color: blue"), "Got: {}", result);
+    }
+
+    #[test]
+    fn test_polyfill_unscoped_rule_multiple() {
+        let result = shim_css_text(
+            "polyfill-unscoped-rule {content: 'foo';color: blue;}polyfill-unscoped-rule {content: 'bar';color: red;}",
+            "contenta",
+            "",
+        );
+        assert!(result.contains("foo {"), "Got: {}", result);
+        assert!(result.contains("bar {"), "Got: {}", result);
+        assert!(result.contains("color: blue"), "Got: {}", result);
+        assert!(result.contains("color: red"), "Got: {}", result);
+    }
+
+    #[test]
+    fn test_polyfill_rule_single_quotes() {
+        let result = shim_css_text(
+            "polyfill-rule {content: ':host.foo .bar';color: blue;}",
+            "contenta",
+            "a-host",
+        );
+        // polyfill-rule content gets scoped like a regular rule
+        assert!(result.contains(".foo[a-host]"), "Got: {}", result);
+        assert!(result.contains(".bar[contenta]"), "Got: {}", result);
+        assert!(result.contains("color: blue"), "Got: {}", result);
+    }
+
+    #[test]
+    fn test_polyfill_rule_double_quotes() {
+        let result = shim_css_text(
+            "polyfill-rule {content: \":host.foo .bar\";color: blue;}",
+            "contenta",
+            "a-host",
+        );
+        assert!(result.contains(".foo[a-host]"), "Got: {}", result);
+        assert!(result.contains(".bar[contenta]"), "Got: {}", result);
+    }
+
+    #[test]
+    fn test_polyfill_rule_with_attribute() {
+        let result = shim_css_text(
+            "polyfill-rule {content: 'button[priority=\"1\"]'}",
+            "contenta",
+            "a-host",
+        );
+        assert!(result.contains("button[priority=\"1\"][contenta]"), "Got: {}", result);
+    }
 }