fix(runtime): properly assign style declarations (#5838)

* fix(runtime): properly assign style declarations * prettier
ionic-team · Jun 18, 2024 · 5c10ebf · 5c10ebf
1 parent 7ffb25d
commit 5c10ebf
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 11 deletions.
diff --git a/src/runtime/initialize-component.ts b/src/runtime/initialize-component.ts
@@ -113,13 +113,38 @@ export const initializeComponent = async (
  }
 
  if (BUILD.style && Cstr && Cstr.style) {
- // this component has styles but we haven't registered them yet
- let style = Cstr.style;
-
- if (BUILD.mode && typeof style !== 'string') {
+ /**
+ * this component has styles but we haven't registered them yet
+ */
+ let style: string | undefined;
+
+ if (typeof Cstr.style === 'string') {
+ /**
+ * in case the component has a `styleUrl` defined, e.g.
+ * ```ts
+ * @Component({
+ * tag: 'my-component',
+ * styleUrl: 'my-component.css'
+ * })
+ * ```
+ */
+ style = Cstr.style;
+ } else if (BUILD.mode && typeof Cstr.style !== 'string') {
+ /**
+ * in case the component has a `styleUrl` object defined, e.g.
+ * ```ts
+ * @Component({
+ * tag: 'my-component',
+ * styleUrl: {
+ * ios: 'my-component.ios.css',
+ * md: 'my-component.md.css'
+ * }
+ * })
+ * ```
+ */
  hostRef.$modeName$ = computeMode(elm) as string | undefined;
  if (hostRef.$modeName$) {
- style = style[hostRef.$modeName$];
+ style = Cstr.style[hostRef.$modeName$];
  }
 
  if (BUILD.hydrateServerSide && hostRef.$modeName$) {

diff --git a/src/runtime/styles.ts b/src/runtime/styles.ts
@@ -47,7 +47,13 @@ export const registerStyle = (scopeId: string, cssText: string, allowCS: boolean
  * @param mode an optional current mode
  * @returns the scope ID for the component of interest
  */
-export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMeta, mode?: string) => {
+export const addStyle = (
+ styleContainerNode: Element | Document | ShadowRoot,
+ cmpMeta: d.ComponentRuntimeMeta,
+ mode?: string,
+) => {
+ const styleContainerDocument = styleContainerNode as Document;
+ const styleContainerShadowRoot = styleContainerNode as ShadowRoot;
  const scopeId = getScopeId(cmpMeta, mode);
  const style = styles.get(scopeId);
 
@@ -60,7 +66,7 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
 
  if (style) {
  if (typeof style === 'string') {
- styleContainerNode = styleContainerNode.head || styleContainerNode;
+ styleContainerNode = styleContainerDocument.head || (styleContainerNode as HTMLElement);
  let appliedStyles = rootAppliedStyles.get(styleContainerNode);
  let styleElm;
  if (!appliedStyles) {
@@ -69,7 +75,7 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
  if (!appliedStyles.has(scopeId)) {
  if (
  BUILD.hydrateClientSide &&
- styleContainerNode.host &&
+ styleContainerShadowRoot.host &&
  (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))
  ) {
  // This is only happening on native shadow-dom, do not needs CSS var shim
@@ -100,8 +106,8 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
  appliedStyles.add(scopeId);
  }
  }
- } else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
- styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+ } else if (BUILD.constructableCSS && !styleContainerDocument.adoptedStyleSheets.includes(style)) {
+ styleContainerDocument.adoptedStyleSheets = [...styleContainerDocument.adoptedStyleSheets, style];
  }
  }
  return scopeId;
@@ -119,7 +125,7 @@ export const attachStyles = (hostRef: d.HostRef) => {
  const flags = cmpMeta.$flags$;
  const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
  const scopeId = addStyle(
- BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+ BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : (elm.getRootNode() as ShadowRoot),
  cmpMeta,
  hostRef.$modeName$,
  );