fix(compiler): correctly generate CSS rules using ::slotted outside shadow DOM (#4969)

* correctly replace `::slotted` selectors when scoping CSS

* globally transform all instances of selector

* fix boo boo & add unit tests

Author: tanner-reits

src/utils/index.ts

@@ -11,6 +11,7 @@ export * from './message-utils';
 export * from './output-target';
 export * from './path';
 export * from './query-nonce-meta-tag-content';
+export * from './regular-expression';
 export * as result from './result';
 export * from './sourcemaps';
 export * from './url-paths';

src/utils/regular-expression.ts

@@ -0,0 +1,9 @@
+/**
+ * Utility function that will escape all regular expression special characters in a string.
+ *
+ * @param text The string potentially containing special characters.
+ * @returns The string with all special characters escaped.
+ */
+export const escapeRegExpSpecialCharacters = (text: string): string => {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};

src/utils/shadow-css.ts

@@ -10,6 +10,8 @@
  * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
  */
 
+import { escapeRegExpSpecialCharacters } from './regular-expression';
+
 const safeSelector = (selector: string) => {
   const placeholders: string[] = [];
   let index = 0;
@@ -279,9 +281,9 @@ const convertColonSlotted = (cssText: string, slotScopeId: string) => {
         prefixSelector = char + prefixSelector;
       }
 
-      const orgSelector = prefixSelector + slottedSelector;
-      const addedSelector = `${prefixSelector.trimRight()}${slottedSelector.trim()}`;
-      if (orgSelector.trim() !== addedSelector.trim()) {
+      const orgSelector = (prefixSelector + slottedSelector).trim();
+      const addedSelector = `${prefixSelector.trimEnd()}${slottedSelector.trim()}`.trim();
+      if (orgSelector !== addedSelector) {
         const updatedSelector = `${addedSelector}, ${orgSelector}`;
         selectors.push({
           orgSelector,
@@ -471,15 +473,32 @@ const scopeCssText = (
     cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
   }
 
-  cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
+  cssText = replaceShadowCssHost(cssText, hostScopeId);
   cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 ');
 
   return {
     cssText: cssText.trim(),
-    slottedSelectors: slotted.selectors,
+    // We need to replace the shadow CSS host string in each of these selectors since we created
+    // them prior to the replacement happening in the components CSS text.
+    slottedSelectors: slotted.selectors.map((ref) => ({
+      orgSelector: replaceShadowCssHost(ref.orgSelector, hostScopeId),
+      updatedSelector: replaceShadowCssHost(ref.updatedSelector, hostScopeId),
+    })),
   };
 };
 
+/**
+ * Helper function that replaces the interim string representing a `:host` selector with
+ * the host scope selector class for the element.
+ *
+ * @param cssText The CSS string to make the replacement in
+ * @param hostScopeId The scope ID that will be used as the class representing the host element
+ * @returns CSS with the selector replaced
+ */
+const replaceShadowCssHost = (cssText: string, hostScopeId: string) => {
+  return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
+};
+
 export const scopeCss = (cssText: string, scopeId: string, commentOriginalSelector: boolean) => {
   const hostScopeId = scopeId + '-h';
   const slotScopeId = scopeId + '-s';
@@ -528,7 +547,8 @@ export const scopeCss = (cssText: string, scopeId: string, commentOriginalSelect
   }
 
   scoped.slottedSelectors.forEach((slottedSelector) => {
-    cssText = cssText.replace(slottedSelector.orgSelector, slottedSelector.updatedSelector);
+    const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector), 'g');
+    cssText = cssText.replace(regex, slottedSelector.updatedSelector);
   });
 
   return cssText;

src/utils/test/regular-expression.spec.ts

@@ -0,0 +1,26 @@
+import { escapeRegExpSpecialCharacters } from '../regular-expression';
+
+describe('regular expression utils', () => {
+  describe('escapeRegExpSpecialCharacters', () => {
+    it('should escape all special characters', () => {
+      const text = 'This is a string with special characters: $ ^ * + ? . ( ) | { } [ ]';
+      const expected = 'This is a string with special characters: \\$ \\^ \\* \\+ \\? \\. \\( \\) \\| \\{ \\} \\[ \\]';
+      const result = escapeRegExpSpecialCharacters(text);
+      expect(result).toEqual(expected);
+    });
+
+    it('should escape only special characters', () => {
+      const text = 'This is a string without special characters';
+      const expected = 'This is a string without special characters';
+      const result = escapeRegExpSpecialCharacters(text);
+      expect(result).toEqual(expected);
+    });
+
+    it('should ignore an empty string', () => {
+      const text = '';
+      const expected = '';
+      const result = escapeRegExpSpecialCharacters(text);
+      expect(result).toEqual(expected);
+    });
+  });
+});

src/utils/test/scope-css.spec.ts

@@ -264,13 +264,15 @@ describe('ShadowCss', function () {
 
     it('should handle :host complex selector', () => {
       const r = s(':host > ::slotted(*:nth-of-type(2n - 1)) {}', 'sc-ion-tag');
-      expect(r).toEqual('.sc-ion-tag-h > .sc-ion-tag-s > *:nth-of-type(2n - 1) {}');
+      expect(r).toEqual(
+        '.sc-ion-tag-h >.sc-ion-tag-s > *:nth-of-type(2n - 1), .sc-ion-tag-h > .sc-ion-tag-s > *:nth-of-type(2n - 1) {}',
+      );
     });
 
     it('should handle host-context complex selector', () => {
       const r = s(':host-context(.red) > ::slotted(*:nth-of-type(2n - 1)) {}', 'sc-ion-tag');
       expect(r).toEqual(
-        '.sc-ion-tag-h.red > .sc-ion-tag-s > *:nth-of-type(2n - 1), .red .sc-ion-tag-h > .sc-ion-tag-s > *:nth-of-type(2n - 1) {}',
+        '.sc-ion-tag-h.red >.sc-ion-tag-s > *:nth-of-type(2n - 1), .sc-ion-tag-h.red > .sc-ion-tag-s > *:nth-of-type(2n - 1), .red .sc-ion-tag-h >.sc-ion-tag-s > *:nth-of-type(2n - 1), .red .sc-ion-tag-h > .sc-ion-tag-s > *:nth-of-type(2n - 1) {}',
       );
     });