fix(styles): ensure styles are applied before paint (#3452)

this commit fixes a bug where styles from a stencil component would not
be applied prior to render. the issue involved stylesheet construction &
application not blocking render, causing the component to be created
without styles applied.

this commit moves from the `replace` function to the `replaceSync`
function to properly await the call

STENCIL-433: Stabilize Browserstack CI Tests

Author: rwaskiewicz

src/client/client-window.ts

@@ -52,11 +52,11 @@ export const supportsListenerOptions = /*@__PURE__*/ (() => {
 
 export const promiseResolve = (v?: any) => Promise.resolve(v);
 
-export const supportsConstructibleStylesheets = BUILD.constructableCSS
+export const supportsConstructableStylesheets = BUILD.constructableCSS
   ? /*@__PURE__*/ (() => {
       try {
         new CSSStyleSheet();
-        return typeof new CSSStyleSheet().replace === 'function';
+        return typeof new CSSStyleSheet().replaceSync === 'function';
       } catch (e) {}
       return false;
     })()

src/hydrate/platform/index.ts

@@ -121,7 +121,7 @@ export const supportsShadow = false;
 
 export const supportsListenerOptions = false;
 
-export const supportsConstructibleStylesheets = false;
+export const supportsConstructableStylesheets = false;
 
 const hostRefs: WeakMap<d.RuntimeRef, d.HostRef> = new WeakMap();
 

src/runtime/styles.ts

@@ -1,17 +1,21 @@
 import type * as d from '../declarations';
 import { BUILD } from '@app-data';
 import { CMP_FLAGS } from '@utils';
-import { doc, plt, styles, supportsConstructibleStylesheets, supportsShadow } from '@platform';
+import { doc, plt, styles, supportsConstructableStylesheets, supportsShadow } from '@platform';
 import { HYDRATED_STYLE_ID, NODE_TYPE } from './runtime-constants';
 import { createTime } from './profile';
 
 const rootAppliedStyles: d.RootAppliedStyleMap = /*@__PURE__*/ new WeakMap();
 
 export const registerStyle = (scopeId: string, cssText: string, allowCS: boolean) => {
   let style = styles.get(scopeId);
-  if (supportsConstructibleStylesheets && allowCS) {
+  if (supportsConstructableStylesheets && allowCS) {
     style = (style || new CSSStyleSheet()) as CSSStyleSheet;
-    style.replace(cssText);
+    if (typeof style === 'string') {
+      style = cssText;
+    } else {
+      style.replaceSync(cssText);
+    }
   } else {
     style = cssText;
   }

src/testing/platform/index.ts

@@ -13,7 +13,7 @@ export {
   resetPlatform,
   startAutoApplyChanges,
   stopAutoApplyChanges,
-  supportsConstructibleStylesheets,
+  supportsConstructableStylesheets,
   supportsListenerOptions,
   setSupportsShadowDom,
 } from './testing-platform';

src/testing/platform/testing-platform.ts

@@ -27,7 +27,7 @@ export const setPlatformHelpers = (helpers: {
 
 export const cssVarShim: d.CssVarShim = false as any;
 export const supportsListenerOptions = true;
-export const supportsConstructibleStylesheets = false;
+export const supportsConstructableStylesheets = false;
 export const Context: any = {};
 
 export const setSupportsShadowDom = (supports: boolean) => {