fix: preserve multi-byte UTF-8 characters in CSS encapsulation (#192)

Brooooooklyn · claude · web-flow · commit 8d1196841c1c · 2026-03-30T18:26:33.000+08:00
The CSS encapsulation code used `bytes[i] as char` to copy characters,
which treats each byte of a multi-byte UTF-8 sequence as a separate
Latin-1 codepoint. This corrupted non-ASCII characters (e.g. bullet •)
that appear after Sass compiles CSS escape sequences like `\2022`.

Replace all 13 instances with `push_utf8_char()` which reads the UTF-8
character width from the leading byte and copies the full character.

Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/crates/oxc_angular_compiler/src/styles/encapsulation.rs b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
@@ -33,6 +33,28 @@ const COMMENT_PLACEHOLDER: &str = "%COMMENT%";
 const POLYFILL_HOST: &str = "-shadowcsshost";
 const POLYFILL_HOST_NO_COMBINATOR: &str = "-shadowcsshost-no-combinator";
 
+/// Push a single UTF-8 character starting at byte position `i` from `source` into `result`.
+/// Returns the number of bytes consumed (1 for ASCII, 2-4 for multi-byte).
+///
+/// This replaces the incorrect `result.push(bytes[i] as char)` pattern which
+/// corrupts multi-byte UTF-8 characters by treating each byte as a Latin-1 codepoint.
+#[inline]
+fn push_utf8_char(result: &mut String, source: &str, i: usize) -> usize {
+    // Determine UTF-8 character width from the leading byte per RFC 3629.
+    let b = source.as_bytes()[i];
+    let width = if b < 0x80 {
+        1
+    } else if b < 0xE0 {
+        2
+    } else if b < 0xF0 {
+        3
+    } else {
+        4
+    };
+    result.push_str(&source[i..i + width]);
+    width
+}
+
 // =============================================================================
 // SafeSelector - Escapes problematic CSS patterns before processing
 // =============================================================================
@@ -101,8 +123,7 @@ impl SafeSelector {
                         i += 1;
                     }
                 } else {
-                    new_result.push(bytes[i] as char);
-                    i += 1;
+                    i += push_utf8_char(&mut new_result, &result, i);
                 }
             }
             result = new_result;
@@ -125,8 +146,7 @@ impl SafeSelector {
                     new_result.push_str(&placeholder);
                     i += 2;
                 } else {
-                    new_result.push(bytes[i] as char);
-                    i += 1;
+                    i += push_utf8_char(&mut new_result, &result, i);
                 }
             }
             result = new_result;
@@ -349,8 +369,7 @@ fn extract_comments(css: &str) -> (String, Vec<String>) {
 
             result.push_str(COMMENT_PLACEHOLDER);
         } else {
-            result.push(bytes[i] as char);
-            i += 1;
+            i += push_utf8_char(&mut result, css, i);
         }
     }
 
@@ -505,8 +524,7 @@ fn scope_keyframes_names(
                         (name, name_end, None)
                     } else {
                         // No valid name found
-                        result.push(bytes[i] as char);
-                        i += 1;
+                        i += push_utf8_char(&mut result, css, i);
                         continue;
                     };
 
@@ -571,8 +589,7 @@ fn scope_keyframes_names(
             }
         }
 
-        result.push(bytes[i] as char);
-        i += 1;
+        i += push_utf8_char(&mut result, css, i);
     }
 
     result
@@ -627,8 +644,7 @@ fn scope_animation_rules(
                     || !css.is_char_boundary(i + value_start)
                     || !css.is_char_boundary(i + value_end)
                 {
-                    result.push(bytes[i] as char);
-                    i += 1;
+                    i += push_utf8_char(&mut result, css, i);
                     continue;
                 }
                 let prefix = &css[i..i + prefix_end];
@@ -655,8 +671,7 @@ fn scope_animation_rules(
             }
         }
 
-        result.push(bytes[i] as char);
-        i += 1;
+        i += push_utf8_char(&mut result, css, i);
     }
 
     result
@@ -2581,8 +2596,7 @@ fn replace_host_context_patterns(s: &str, replacement: &str) -> String {
             i = after;
             continue;
         }
-        result.push(bytes[i] as char);
-        i += 1;
+        i += push_utf8_char(&mut result, s, i);
     }
 
     result
@@ -2640,8 +2654,7 @@ fn insert_polyfill_directives(css: &str) -> String {
                 continue;
             }
         }
-        result.push(bytes[i] as char);
-        i += 1;
+        i += push_utf8_char(&mut result, css, i);
     }
 
     result
@@ -2762,8 +2775,7 @@ fn insert_polyfill_rules(css: &str) -> String {
                 }
             }
         }
-        result.push(bytes[i] as char);
-        i += 1;
+        i += push_utf8_char(&mut result, css, i);
     }
 
     result
@@ -3048,8 +3060,7 @@ fn strip_deep_combinators(s: &str) -> String {
             continue;
         }
 
-        result.push(bytes[i] as char);
-        i += 1;
+        i += push_utf8_char(&mut result, s, i);
     }
 
     result
@@ -3097,8 +3108,7 @@ fn strip_host_patterns(s: &str) -> String {
             continue;
         }
 
-        result.push(bytes[i] as char);
-        i += 1;
+        i += push_utf8_char(&mut result, s, i);
     }
 
     result
@@ -3147,8 +3157,7 @@ fn remove_unscoped_rules(css: &str) -> String {
                 continue;
             }
         }
-        result.push(bytes[i] as char);
-        i += 1;
+        i += push_utf8_char(&mut result, css, i);
     }
 
     result
diff --git a/crates/oxc_angular_compiler/tests/shadow_css_test.rs b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
@@ -290,6 +290,56 @@ fn test_handle_curly_braces_in_quoted_content() {
     assert_css_eq!(shim(css, "contenta"), expected);
 }
 
+#[test]
+fn test_unicode_in_content_property() {
+    // Issue #191: unicode characters in :after CSS content property
+    // Raw CSS escape sequence (as from inline styles)
+    let css = r".test-div:after { content: '\2022'; }";
+    assert_css_eq!(shim(css, "contenta"), r".test-div[contenta]:after { content: '\2022'; }");
+
+    // After Sass compilation - Sass converts \2022 to actual bullet char
+    let css = ".test-div:after { content: \"\u{2022}\"; }";
+    assert_css_eq!(shim(css, "contenta"), ".test-div[contenta]:after { content:\"\u{2022}\"; }");
+}
+
+#[test]
+fn test_multibyte_utf8_preserved_in_css_values() {
+    // Various multi-byte UTF-8 characters in CSS content property
+    // 2-byte: ¢ (U+00A2), © (U+00A9)
+    let css = ".a:after { content: \"\u{00A2}\u{00A9}\"; }";
+    let result = shim(css, "contenta");
+    assert!(result.contains("\u{00A2}\u{00A9}"), "2-byte UTF-8 chars corrupted: {result}");
+
+    // 3-byte: • (U+2022), — (U+2014), → (U+2192)
+    let css = ".a:after { content: \"\u{2022}\u{2014}\u{2192}\"; }";
+    let result = shim(css, "contenta");
+    assert!(result.contains("\u{2022}\u{2014}\u{2192}"), "3-byte UTF-8 chars corrupted: {result}");
+
+    // 4-byte: 😀 (U+1F600)
+    let css = ".a:after { content: \"\u{1F600}\"; }";
+    let result = shim(css, "contenta");
+    assert!(result.contains('\u{1F600}'), "4-byte UTF-8 char corrupted: {result}");
+
+    // Non-ASCII in selector (e.g. class name with accented chars)
+    let css = ".caf\u{00E9} { color: red; }";
+    let result = shim(css, "contenta");
+    assert!(result.contains("caf\u{00E9}"), "Non-ASCII in selector corrupted: {result}");
+}
+
+#[test]
+fn test_finalize_preserves_unicode() {
+    use oxc_angular_compiler::styles::finalize_component_style;
+    // Full pipeline with Sass-compiled CSS containing actual bullet character
+    let css = ".test:after { content: \"\u{2022}\"; }";
+    let result = finalize_component_style(css, true, "_ngcontent-%COMP%", "_nghost-%COMP%", true);
+    assert!(result.contains('\u{2022}'), "Bullet lost in full pipeline: {result}");
+
+    // With @charset prefix from Sass
+    let css = "@charset \"UTF-8\";\n.test:after { content: \"\u{2022}\"; }";
+    let result = finalize_component_style(css, true, "_ngcontent-%COMP%", "_nghost-%COMP%", true);
+    assert!(result.contains('\u{2022}'), "Bullet lost with @charset: {result}");
+}
+
 // ============================================================================
 // Playground CSS Test (real-world case)
 // ============================================================================

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,28 @@ const COMMENT_PLACEHOLDER: &str = "%COMMENT%";`
`33`	`33`	`const POLYFILL_HOST: &str = "-shadowcsshost";`
`34`	`34`	`const POLYFILL_HOST_NO_COMBINATOR: &str = "-shadowcsshost-no-combinator";`
`35`	`35`
	`36`	+/// Push a single UTF-8 character starting at byte position `i` from `source` into `result`.
	`37`	`+/// Returns the number of bytes consumed (1 for ASCII, 2-4 for multi-byte).`
	`38`	`+///`
	`39`	+/// This replaces the incorrect `result.push(bytes[i] as char)` pattern which
	`40`	`+/// corrupts multi-byte UTF-8 characters by treating each byte as a Latin-1 codepoint.`
	`41`	`+#[inline]`
	`42`	`+fn push_utf8_char(result: &mut String, source: &str, i: usize) -> usize {`
	`43`	`+ // Determine UTF-8 character width from the leading byte per RFC 3629.`
	`44`	`+ let b = source.as_bytes()[i];`
	`45`	`+ let width = if b < 0x80 {`
	`46`	`+ 1`
	`47`	`+ } else if b < 0xE0 {`
	`48`	`+ 2`
	`49`	`+ } else if b < 0xF0 {`
	`50`	`+ 3`
	`51`	`+ } else {`
	`52`	`+ 4`
	`53`	`+ };`
	`54`	`+ result.push_str(&source[i..i + width]);`
	`55`	`+ width`
	`56`	`+}`
	`57`	`+`
`36`	`58`	`// =============================================================================`
`37`	`59`	`// SafeSelector - Escapes problematic CSS patterns before processing`
`38`	`60`	`// =============================================================================`
`@@ -101,8 +123,7 @@ impl SafeSelector {`
`101`	`123`	`i += 1;`
`102`	`124`	`}`
`103`	`125`	`} else {`
`104`		`- new_result.push(bytes[i] as char);`
`105`		`- i += 1;`
	`126`	`+ i += push_utf8_char(&mut new_result, &result, i);`
`106`	`127`	`}`
`107`	`128`	`}`
`108`	`129`	`result = new_result;`
`@@ -125,8 +146,7 @@ impl SafeSelector {`
`125`	`146`	`new_result.push_str(&placeholder);`
`126`	`147`	`i += 2;`
`127`	`148`	`} else {`
`128`		`- new_result.push(bytes[i] as char);`
`129`		`- i += 1;`
	`149`	`+ i += push_utf8_char(&mut new_result, &result, i);`
`130`	`150`	`}`
`131`	`151`	`}`
`132`	`152`	`result = new_result;`
`@@ -349,8 +369,7 @@ fn extract_comments(css: &str) -> (String, Vec<String>) {`
`349`	`369`
`350`	`370`	`result.push_str(COMMENT_PLACEHOLDER);`
`351`	`371`	`} else {`
`352`		`- result.push(bytes[i] as char);`
`353`		`- i += 1;`
	`372`	`+ i += push_utf8_char(&mut result, css, i);`
`354`	`373`	`}`
`355`	`374`	`}`
`356`	`375`
`@@ -505,8 +524,7 @@ fn scope_keyframes_names(`
`505`	`524`	`(name, name_end, None)`
`506`	`525`	`} else {`
`507`	`526`	`// No valid name found`
`508`		`- result.push(bytes[i] as char);`
`509`		`- i += 1;`
	`527`	`+ i += push_utf8_char(&mut result, css, i);`
`510`	`528`	`continue;`
`511`	`529`	`};`
`512`	`530`
`@@ -571,8 +589,7 @@ fn scope_keyframes_names(`
`571`	`589`	`}`
`572`	`590`	`}`
`573`	`591`
`574`		`- result.push(bytes[i] as char);`
`575`		`- i += 1;`
	`592`	`+ i += push_utf8_char(&mut result, css, i);`
`576`	`593`	`}`
`577`	`594`
`578`	`595`	`result`
`@@ -627,8 +644,7 @@ fn scope_animation_rules(`
`627`	`644`	`\|\| !css.is_char_boundary(i + value_start)`
`628`	`645`	`\|\| !css.is_char_boundary(i + value_end)`
`629`	`646`	`{`
`630`		`- result.push(bytes[i] as char);`
`631`		`- i += 1;`
	`647`	`+ i += push_utf8_char(&mut result, css, i);`
`632`	`648`	`continue;`
`633`	`649`	`}`
`634`	`650`	`let prefix = &css[i..i + prefix_end];`
`@@ -655,8 +671,7 @@ fn scope_animation_rules(`
`655`	`671`	`}`
`656`	`672`	`}`
`657`	`673`
`658`		`- result.push(bytes[i] as char);`
`659`		`- i += 1;`
	`674`	`+ i += push_utf8_char(&mut result, css, i);`
`660`	`675`	`}`
`661`	`676`
`662`	`677`	`result`
`@@ -2581,8 +2596,7 @@ fn replace_host_context_patterns(s: &str, replacement: &str) -> String {`
`2581`	`2596`	`i = after;`
`2582`	`2597`	`continue;`
`2583`	`2598`	`}`
`2584`		`- result.push(bytes[i] as char);`
`2585`		`- i += 1;`
	`2599`	`+ i += push_utf8_char(&mut result, s, i);`
`2586`	`2600`	`}`
`2587`	`2601`
`2588`	`2602`	`result`
`@@ -2640,8 +2654,7 @@ fn insert_polyfill_directives(css: &str) -> String {`
`2640`	`2654`	`continue;`
`2641`	`2655`	`}`
`2642`	`2656`	`}`
`2643`		`- result.push(bytes[i] as char);`
`2644`		`- i += 1;`
	`2657`	`+ i += push_utf8_char(&mut result, css, i);`
`2645`	`2658`	`}`
`2646`	`2659`
`2647`	`2660`	`result`
`@@ -2762,8 +2775,7 @@ fn insert_polyfill_rules(css: &str) -> String {`
`2762`	`2775`	`}`
`2763`	`2776`	`}`
`2764`	`2777`	`}`
`2765`		`- result.push(bytes[i] as char);`
`2766`		`- i += 1;`
	`2778`	`+ i += push_utf8_char(&mut result, css, i);`
`2767`	`2779`	`}`
`2768`	`2780`
`2769`	`2781`	`result`
`@@ -3048,8 +3060,7 @@ fn strip_deep_combinators(s: &str) -> String {`
`3048`	`3060`	`continue;`
`3049`	`3061`	`}`
`3050`	`3062`
`3051`		`- result.push(bytes[i] as char);`
`3052`		`- i += 1;`
	`3063`	`+ i += push_utf8_char(&mut result, s, i);`
`3053`	`3064`	`}`
`3054`	`3065`
`3055`	`3066`	`result`
`@@ -3097,8 +3108,7 @@ fn strip_host_patterns(s: &str) -> String {`
`3097`	`3108`	`continue;`
`3098`	`3109`	`}`
`3099`	`3110`
`3100`		`- result.push(bytes[i] as char);`
`3101`		`- i += 1;`
	`3111`	`+ i += push_utf8_char(&mut result, s, i);`
`3102`	`3112`	`}`
`3103`	`3113`
`3104`	`3114`	`result`
`@@ -3147,8 +3157,7 @@ fn remove_unscoped_rules(css: &str) -> String {`
`3147`	`3157`	`continue;`
`3148`	`3158`	`}`
`3149`	`3159`	`}`
`3150`		`- result.push(bytes[i] as char);`
`3151`		`- i += 1;`
	`3160`	`+ i += push_utf8_char(&mut result, css, i);`
`3152`	`3161`	`}`
`3153`	`3162`
`3154`	`3163`	`result`