diff --git a/src/parse.ts b/src/parse.ts index e45a8440..31da678a 100644 --- a/src/parse.ts +++ b/src/parse.ts @@ -78,15 +78,15 @@ export interface PositionAreaDeclaration { wrapperEl?: HTMLElement | null; targetEl?: HTMLElement | null; anchorEl?: HTMLElement | PseudoElement | null; - anchorName?: string; - customPropName?: string; targetUUID: string; } -type PositionAreaDeclarations = Record; + +// `key` is the target element selector +// `value` is the position-area data for that property +type PositionAreaDeclarations = Record; export interface AnchorPosition { declarations?: AnchorFunctionDeclaration; - positionAreas?: PositionAreaDeclaration[]; fallbacks?: TryBlock[]; order?: PositionTryOrder; } @@ -278,10 +278,10 @@ function getPositionAreaData(node: CssNode, block: Block | null) { async function getAnchorEl( targetEl: HTMLElement | null, - anchorObj: AnchorFunction | PositionAreaDeclaration, + anchorObj?: AnchorFunction, ) { - let anchorName = anchorObj.anchorName; - const customPropName = anchorObj.customPropName; + let anchorName = anchorObj?.anchorName; + const customPropName = anchorObj?.customPropName; if (targetEl && !anchorName) { const positionAnchorProperty = getCSSPropertyValue( targetEl, @@ -364,10 +364,10 @@ export async function parseCSS(styleData: StyleData[]) { if (positionAreaData) { for (const { selector } of selectors) { - positionAreas[selector] = { - ...positionAreas[selector], - positionArea: positionAreaData, - }; + positionAreas[selector] = [ + ...(positionAreas[selector] ?? []), + positionAreaData, + ]; } } if (updated || positionAreaData?.changed) { @@ -760,48 +760,34 @@ export async function parseCSS(styleData: StyleData[]) { document.querySelectorAll(targetSel); for (const targetEl of targets) { // For every target element, find a valid anchor element - const targetUUID = `--pa-target-${nanoid(12)}`; - const anchorObj = { - targetUUID, - positionArea: { ...positions.positionArea }, - fallbackValue: '', - }; - - const wrapperEl = wrapperForPositionedElement(targetEl, targetUUID); - positionAreaMappingStyleElement.css += activeWrapperStyles( - targetUUID, - positions.positionArea.selectorUUID, - ); - positionAreaMappingStyleElement.changed = true; - const anchorEl = await getAnchorEl(targetEl, anchorObj); - const uuid = `--anchor-${nanoid(12)}`; - // Store new mapping, in case inline styles have changed and will - // be overwritten -- in which case new mappings will be re-added - inlineStyles.set(targetEl, { - ...(inlineStyles.get(targetEl) ?? {}), - [anchorObj.targetUUID]: targetUUID, - }); - // Point original uuid to new uuid - targetEl.setAttribute( - 'style', - `${anchorObj.targetUUID}: var(${uuid}); ${ - targetEl.getAttribute('style') ?? '' - }`, - ); - const targetProperty = 'position-area'; - // Populate new data for each anchor/target combo - validPositions[targetSel] = { - ...validPositions[targetSel], - positionAreas: [positions], - declarations: { - ...validPositions[targetSel]?.declarations, - [targetProperty]: [ - ...(validPositions[targetSel]?.declarations?.[targetProperty] ?? - []), - { ...anchorObj, anchorEl, targetEl, wrapperEl, uuid }, - ], - }, - }; + const anchorEl = await getAnchorEl(targetEl); + for (const positionData of positions) { + const targetUUID = `--pa-target-${nanoid(12)}`; + const wrapperEl = wrapperForPositionedElement(targetEl, targetUUID); + positionAreaMappingStyleElement.css += activeWrapperStyles( + targetUUID, + positionData.selectorUUID, + ); + positionAreaMappingStyleElement.changed = true; + // Populate new data for each anchor/target combo + validPositions[targetSel] = { + ...validPositions[targetSel], + declarations: { + ...validPositions[targetSel]?.declarations, + 'position-area': [ + ...(validPositions[targetSel]?.declarations?.['position-area'] ?? + []), + { + targetUUID, + positionArea: positionData, + anchorEl, + targetEl, + wrapperEl, + } as PositionAreaDeclaration, + ], + }, + }; + } } } diff --git a/src/polyfill.ts b/src/polyfill.ts index ad799b82..e8fa163f 100644 --- a/src/polyfill.ts +++ b/src/polyfill.ts @@ -594,7 +594,7 @@ export async function polyfill( let styleData = await fetchCSS(options.elements, options.excludeInlineStyles); // pre parse CSS styles that we need to cascade - const cascadeCausedChanges = await cascadeCSS(styleData); + const cascadeCausedChanges = cascadeCSS(styleData); if (cascadeCausedChanges) { styleData = await transformCSS(styleData); }