Skip to content

Commit ce25fb5

Browse files
Copilotqw-in
Copilot
and
qw-in
authored
chore: remove @oddbird/css-anchor-positioning polyfill (#155)
CSS anchor positioning is now baseline across all major browsers. Remove the polyfill from all examples and the contributing guide. Agent-Logs-Url: https://github.com/arcjet/examples/sessions/f6678c2d-94d4-44bc-9bd9-7cc86c58f804 Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: qw-in <19194187+qw-in@users.noreply.github.com>
1 parent e9468ec commit ce25fb5

File tree

32 files changed

+2
-715
lines changed

32 files changed

+2
-715
lines changed

‎CONTRIBUTING.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,10 @@ trunk check
9090
- Install required dependencies:
9191
9292
```sh
93-
npm install @fontsource-variable/figtree @fontsource/ibm-plex-mono @oddbird/css-anchor-positioning
93+
npm install @fontsource-variable/figtree @fontsource/ibm-plex-mono
9494
```
9595
9696
- Import `styles.css` using your framework’s standard method.
97-
- Conditionally load the [`@oddbird/css-anchor-positioning` polyfill](https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file#getting-started).
9897
9998
3. **Match the HTML structure**
10099
- Follow the general HTML structure used by existing examples to stay consistent.

‎examples/astro/package-lock.json‎

Lines changed: 0 additions & 62 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/astro/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
"@astrojs/node": "9.5.4",
55
"@fontsource-variable/figtree": "5.2.10",
66
"@fontsource/ibm-plex-mono": "5.2.7",
7-
"@oddbird/css-anchor-positioning": "0.9.0",
87
"astro": "5.18.1"
98
},
109
"devDependencies": {

‎examples/astro/src/layouts/Main.astro‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,6 @@ import "../styles/styles.css";
2424
<meta name="viewport" content="width=device-width" />
2525
<meta name="generator" content={Astro.generator} />
2626
<title>Arcjet Astro example app</title>
27-
<script>
28-
// Polyfill Anchor Positioning
29-
// https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file#getting-started
30-
if (!("anchorName" in document.documentElement.style)) {
31-
await import("@oddbird/css-anchor-positioning");
32-
}
33-
</script>
3427
</head>
3528
<body class="layout">
3629
<header class="header">

‎examples/astro/src/styles/styles.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,6 @@
205205
line-height: 1.75rem;
206206
padding: 0;
207207

208-
/* Explicit anchor-name required for polyfill */
209208
anchor-name: --navigation-popover-anchor;
210209

211210
&:hover {

‎examples/nextjs-bot-protection/styles/styles.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,6 @@
205205
line-height: 1.75rem;
206206
padding: 0;
207207

208-
/* Explicit anchor-name required for polyfill */
209208
anchor-name: --navigation-popover-anchor;
210209

211210
&:hover {

‎examples/nextjs-fly/components/PopoverTarget.tsx‎

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,6 @@
22

33
import { type ComponentProps, useEffect, useRef } from "react";
44

5-
const POLYFILL_APPLIED: unique symbol = Symbol.for(
6-
"@oddbird/css-anchor-positioning",
7-
);
8-
9-
declare global {
10-
interface Window {
11-
[POLYFILL_APPLIED]?: boolean;
12-
}
13-
}
14-
15-
async function polyfillAnchorPositioning() {
16-
const { default: polyfill } = await import(
17-
"@oddbird/css-anchor-positioning/fn"
18-
);
19-
await polyfill(true);
20-
}
21-
225
type Props = {
236
id: string;
247
closeAtWidthPx: number;
@@ -47,24 +30,5 @@ export function PopoverTarget({ closeAtWidthPx, ...props }: Props) {
4730
};
4831
}, [closeAtWidthPx]);
4932

50-
useEffect(() => {
51-
if (typeof window === "undefined") {
52-
return;
53-
}
54-
55-
// https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file#getting-started
56-
if (
57-
!window[POLYFILL_APPLIED] &&
58-
!("anchorName" in document.documentElement.style)
59-
) {
60-
polyfillAnchorPositioning().catch((error: unknown) => {
61-
console.error(
62-
"Failed to load @oddbird/css-anchor-positioning polyfill:",
63-
error,
64-
);
65-
});
66-
}
67-
}, []);
68-
6933
return <nav ref={popover} popover="auto" {...props} />;
7034
}

‎examples/nextjs-fly/package-lock.json‎

Lines changed: 0 additions & 81 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/nextjs-fly/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
"@fontsource/ibm-plex-mono": "5.2.7",
3434
"@hookform/resolvers": "5.2.2",
3535
"@nosecone/next": "1.3.0",
36-
"@oddbird/css-anchor-positioning": "0.9.0",
3736
"next": "16.2.1",
3837
"next-themes": "0.4.6",
3938
"react": "19.2.4",

‎examples/nextjs-fly/styles/styles.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,6 @@
205205
line-height: 1.75rem;
206206
padding: 0;
207207

208-
/* Explicit anchor-name required for polyfill */
209208
anchor-name: --navigation-popover-anchor;
210209

211210
&:hover {

0 commit comments

Comments
 (0)