Skip to content

fix(popover): load polyfill in correct order #5027

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

Draft
mimarz wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

fix(popover): load polyfill in correct order #5027

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c129d71
fix(popover): polyfill compatible with ds layers
mimarz Jun 23, 2026
a7f104c
add layer order
mimarz Jun 23, 2026
ce7d3f1
dont polyfill if polyfilled
mimarz Jun 23, 2026
2793d5b
changeset
mimarz Jun 23, 2026
8b527e4
does this make a difference?
mimarz Jun 23, 2026
9b2cfe7
revert
mimarz Jun 23, 2026
6f56f74
gh: update existing snapshot release comment
mimarz Jun 23, 2026
e732802
check if invokers is polyfilled
mimarz Jun 24, 2026
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
6 changes: 6 additions & 0 deletions .changeset/tiny-kiwis-deny.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@digdir/designsystemet-css": patch
"@digdir/designsystemet-web": patch
---

fix loading order for popover-polyfill
14 changes: 13 additions & 1 deletion .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,10 @@ jobs:
echo "No open PR found for branch $BRANCH, skipping comment."
exit 0
fi
MARKER="<!-- snapshot-release-comment -->"
PUBLISHED_AT="$(TZ='Europe/Oslo' date '+%d.%m.%Y %H:%M:%S')"
{
echo "$MARKER"
echo "### 📦 Snapshot release published"
echo
echo "Published at \`$PUBLISHED_AT\` to npm with tag \`$TAG\`:"
Expand All @@ -97,7 +99,17 @@ jobs:
fi
done
} > comment.md
gh pr comment "$PR" --body-file comment.md
# Find an existing snapshot-release comment to update, otherwise create a new one
COMMENT_ID=$(gh api "repos/${GITHUB_REPOSITORY}/issues/${PR}/comments" --paginate \
--jq "[.[] | select(.body | contains(\"$MARKER\"))] | last | .id // empty")
if [ -n "$COMMENT_ID" ]; then
echo "Updating existing comment $COMMENT_ID"
gh api --method PATCH "repos/${GITHUB_REPOSITORY}/issues/comments/${COMMENT_ID}" \
-F body=@comment.md > /dev/null
else
echo "No existing comment found, creating a new one"
gh pr comment "$PR" --body-file comment.md
fi

release:
name: Release
Expand Down
2 changes: 1 addition & 1 deletion packages/css/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@charset "UTF-8";

@layer ds.theme, ds.base, ds.components;
@layer popover-polyfill, ds.theme, ds.base, ds.components;

@Barsnes Barsnes Jun 24, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs to be documented for those who sort their own layers as well


/** Import order defines ordinal specificity for layers */
@import url('./base.css') layer(ds.base);
Expand Down
4 changes: 3 additions & 1 deletion packages/web/src/popover/popover.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
size,
} from '@floating-ui/dom';
import {
isPolyfilled,
Comment thread
mimarz marked this conversation as resolved.
isSupported,
apply as polyfillPopover,
} from '@oddbird/popover-polyfill/fn';
Expand All @@ -21,7 +22,8 @@ import {
QUICK_EVENT,
} from '../utils/utils';

if (isBrowser() && !isSupported()) polyfillPopover(); // Ensure popover polyfill is loaded in browser environment only
if (isBrowser() && !isSupported() && !isPolyfilled())
on(window, 'load', polyfillPopover); // Ensure popover polyfill is loaded in browser environment after CSS is loaded to ensure correct order of CSS layers.

declare global {
interface GlobalEventHandlersEventMap {
Expand Down
Loading