Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(runtime): properly assign style declarations #5838

Merged
merged 2 commits into from
Jun 18, 2024
Merged

fix(runtime): properly assign style declarations #5838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
837a0ee
fix(runtime): properly assign style declarations
christian-bromann Jun 18, 2024
9701d1e
prettier
christian-bromann Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 30 additions & 5 deletions src/runtime/initialize-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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$) {
Expand Down
18 changes: 12 additions & 6 deletions src/runtime/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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) {
Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -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$,
);
Expand Down