From 2732f2a5142798baf070166cd8b4b754e7843117 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 6 Apr 2026 18:37:39 +0000 Subject: [PATCH] chore: remove @oddbird/css-anchor-positioning polyfill 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: qw-in <19194187+qw-in@users.noreply.github.com> --- CONTRIBUTING.md | 3 +- examples/astro/package-lock.json | 62 -------------- examples/astro/package.json | 1 - examples/astro/src/layouts/Main.astro | 7 -- examples/astro/src/styles/styles.css | 1 - .../nextjs-bot-protection/styles/styles.css | 1 - .../nextjs-fly/components/PopoverTarget.tsx | 36 -------- examples/nextjs-fly/package-lock.json | 81 ------------------ examples/nextjs-fly/package.json | 1 - examples/nextjs-fly/styles/styles.css | 1 - examples/nextjs-form/styles/styles.css | 1 - .../nextjs-server-action/styles/styles.css | 1 - examples/nextjs/components/PopoverTarget.tsx | 36 -------- examples/nextjs/package-lock.json | 81 ------------------ examples/nextjs/package.json | 1 - examples/nextjs/styles/styles.css | 1 - examples/nuxt/app/app.vue | 5 -- examples/nuxt/app/assets/styles/styles.css | 1 - examples/nuxt/package-lock.json | 62 -------------- examples/nuxt/package.json | 1 - .../app/components/PopoverTarget.tsx | 36 -------- examples/react-router/app/styles/styles.css | 1 - examples/react-router/package-lock.json | 81 ------------------ examples/react-router/package.json | 1 - examples/sveltekit/package-lock.json | 82 +------------------ examples/sveltekit/package.json | 1 - examples/sveltekit/src/routes/+layout.svelte | 11 --- examples/sveltekit/src/styles/styles.css | 1 - examples/tanstack-start/package-lock.json | 81 ------------------ examples/tanstack-start/package.json | 1 - .../src/components/PopoverTarget.tsx | 36 -------- examples/tanstack-start/src/styles/styles.css | 1 - 32 files changed, 2 insertions(+), 715 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 56afa6f..2537cb7 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -90,11 +90,10 @@ trunk check - Install required dependencies: ```sh - npm install @fontsource-variable/figtree @fontsource/ibm-plex-mono @oddbird/css-anchor-positioning + npm install @fontsource-variable/figtree @fontsource/ibm-plex-mono ``` - Import `styles.css` using your framework’s standard method. - - Conditionally load the [`@oddbird/css-anchor-positioning` polyfill](https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file#getting-started). 3. **Match the HTML structure** - Follow the general HTML structure used by existing examples to stay consistent. diff --git a/examples/astro/package-lock.json b/examples/astro/package-lock.json index 063d513..5e2b74c 100644 --- a/examples/astro/package-lock.json +++ b/examples/astro/package-lock.json @@ -12,7 +12,6 @@ "@astrojs/node": "9.5.4", "@fontsource-variable/figtree": "5.2.10", "@fontsource/ibm-plex-mono": "5.2.7", - "@oddbird/css-anchor-positioning": "0.9.0", "astro": "5.18.1" }, "devDependencies": { @@ -928,31 +927,6 @@ "node": ">=18" } }, - "node_modules/@floating-ui/core": { - "version": "1.7.5", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz", - "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==", - "license": "MIT", - "dependencies": { - "@floating-ui/utils": "^0.2.11" - } - }, - "node_modules/@floating-ui/dom": { - "version": "1.7.6", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz", - "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==", - "license": "MIT", - "dependencies": { - "@floating-ui/core": "^1.7.5", - "@floating-ui/utils": "^0.2.11" - } - }, - "node_modules/@floating-ui/utils": { - "version": "0.2.11", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz", - "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==", - "license": "MIT" - }, "node_modules/@fontsource-variable/figtree": { "version": "5.2.10", "resolved": "https://registry.npmjs.org/@fontsource-variable/figtree/-/figtree-5.2.10.tgz", @@ -1405,18 +1379,6 @@ "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", "license": "MIT" }, - "node_modules/@oddbird/css-anchor-positioning": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@oddbird/css-anchor-positioning/-/css-anchor-positioning-0.9.0.tgz", - "integrity": "sha512-G5nfb4sU0auxJH7VHafPwVJjr1GhH5uPSkmytGqhNftCpT3QEh8pFtMd4YHt1dRwb4o9qVZxlGSKUIc4TIrysQ==", - "license": "BSD-3-Clause", - "dependencies": { - "@floating-ui/dom": "^1.7.5", - "@types/css-tree": "^2.3.11", - "css-tree": "^3.1.0", - "nanoid": "^5.1.6" - } - }, "node_modules/@oslojs/encoding": { "version": "1.1.0", "license": "MIT" @@ -1841,12 +1803,6 @@ "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==", "license": "MIT" }, - "node_modules/@types/css-tree": { - "version": "2.3.11", - "resolved": "https://registry.npmjs.org/@types/css-tree/-/css-tree-2.3.11.tgz", - "integrity": "sha512-aEokibJOI77uIlqoBOkVbaQGC9zII0A+JH1kcTNKW2CwyYWD8KM6qdo+4c77wD3wZOQfJuNWAr9M4hdk+YhDIg==", - "license": "MIT" - }, "node_modules/@types/debug": { "version": "4.1.12", "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", @@ -4731,24 +4687,6 @@ "dev": true, "license": "MIT" }, - "node_modules/nanoid": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz", - "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "bin": { - "nanoid": "bin/nanoid.js" - }, - "engines": { - "node": "^18 || >=20" - } - }, "node_modules/neotraverse": { "version": "0.6.18", "license": "MIT", diff --git a/examples/astro/package.json b/examples/astro/package.json index 191eb68..4b9508e 100644 --- a/examples/astro/package.json +++ b/examples/astro/package.json @@ -4,7 +4,6 @@ "@astrojs/node": "9.5.4", "@fontsource-variable/figtree": "5.2.10", "@fontsource/ibm-plex-mono": "5.2.7", - "@oddbird/css-anchor-positioning": "0.9.0", "astro": "5.18.1" }, "devDependencies": { diff --git a/examples/astro/src/layouts/Main.astro b/examples/astro/src/layouts/Main.astro index 18a199e..eb6d0b4 100644 --- a/examples/astro/src/layouts/Main.astro +++ b/examples/astro/src/layouts/Main.astro @@ -24,13 +24,6 @@ import "../styles/styles.css"; Arcjet Astro example app -
diff --git a/examples/astro/src/styles/styles.css b/examples/astro/src/styles/styles.css index 1834bc1..1a3810a 100644 --- a/examples/astro/src/styles/styles.css +++ b/examples/astro/src/styles/styles.css @@ -205,7 +205,6 @@ line-height: 1.75rem; padding: 0; - /* Explicit anchor-name required for polyfill */ anchor-name: --navigation-popover-anchor; &:hover { diff --git a/examples/nextjs-bot-protection/styles/styles.css b/examples/nextjs-bot-protection/styles/styles.css index 1834bc1..1a3810a 100644 --- a/examples/nextjs-bot-protection/styles/styles.css +++ b/examples/nextjs-bot-protection/styles/styles.css @@ -205,7 +205,6 @@ line-height: 1.75rem; padding: 0; - /* Explicit anchor-name required for polyfill */ anchor-name: --navigation-popover-anchor; &:hover { diff --git a/examples/nextjs-fly/components/PopoverTarget.tsx b/examples/nextjs-fly/components/PopoverTarget.tsx index f87f363..dfa6541 100644 --- a/examples/nextjs-fly/components/PopoverTarget.tsx +++ b/examples/nextjs-fly/components/PopoverTarget.tsx @@ -2,23 +2,6 @@ import { type ComponentProps, useEffect, useRef } from "react"; -const POLYFILL_APPLIED: unique symbol = Symbol.for( - "@oddbird/css-anchor-positioning", -); - -declare global { - interface Window { - [POLYFILL_APPLIED]?: boolean; - } -} - -async function polyfillAnchorPositioning() { - const { default: polyfill } = await import( - "@oddbird/css-anchor-positioning/fn" - ); - await polyfill(true); -} - type Props = { id: string; closeAtWidthPx: number; @@ -47,24 +30,5 @@ export function PopoverTarget({ closeAtWidthPx, ...props }: Props) { }; }, [closeAtWidthPx]); - useEffect(() => { - if (typeof window === "undefined") { - return; - } - - // https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file#getting-started - if ( - !window[POLYFILL_APPLIED] && - !("anchorName" in document.documentElement.style) - ) { - polyfillAnchorPositioning().catch((error: unknown) => { - console.error( - "Failed to load @oddbird/css-anchor-positioning polyfill:", - error, - ); - }); - } - }, []); - return