Skip to content

Commit 5ce1bba

Browse files
jgerigmeyerjgerigmeyer
authored
Merge pull request #32 from oddbird/run-automatically
Run polyfill by default; expose fn API as alternative.
2 parents a72fe09 + 7c78c1a commit 5ce1bba

File tree

9 files changed

+148
-70
lines changed

9 files changed

+148
-70
lines changed

‎LICENSE‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
BSD 2-Clause License
1+
Copyright (c) 2022 OddBird
22

3-
Copyright (c) 2022, OddBird
4-
All rights reserved.
5-
6-
Redistribution and use in source and binary forms, with or without
7-
modification, are permitted provided that the following conditions are met:
3+
Redistribution and use in source and binary forms, with or without modification,
4+
are permitted provided that the following conditions are met:
85

96
1. Redistributions of source code must retain the above copyright notice, this
107
list of conditions and the following disclaimer.
@@ -13,13 +10,17 @@ modification, are permitted provided that the following conditions are met:
1310
this list of conditions and the following disclaimer in the documentation
1411
and/or other materials provided with the distribution.
1512

16-
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
17-
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18-
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
19-
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
20-
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
21-
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
22-
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
23-
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
24-
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25-
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
13+
3. Neither the name of the copyright holder nor the names of its contributors
14+
may be used to endorse or promote products derived from this software without
15+
specific prior written permission.
16+
17+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
18+
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19+
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
20+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
21+
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
22+
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
23+
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
24+
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
26+
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,26 @@
11
# CSS Anchor Positioning Polyfill
2+
3+
[![Build Status](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml/badge.svg)](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml)
4+
5+
[![Netlify Status](https://api.netlify.com/api/v1/badges/61a20096-7925-4775-99a9-b40a010197c0/deploy-status)](https://app.netlify.com/sites/anchor-polyfill/deploys)
6+
7+
## Browser Support (needs testing)
8+
9+
- Firefox 54+
10+
- Chrome 51+
11+
- Edge 79+
12+
- Safari 10+
13+
14+
## Getting Started
15+
16+
To use the polyfill, add this script tag to your document `<head>`:
17+
18+
```js
19+
<script type="module">
20+
if (!("anchorName" in document.documentElement.style)) {
21+
import("https://unpkg.com/@oddbird/css-anchor-positioning@0.0.1-alpha.0");
22+
}
23+
</script>
24+
```
25+
26+
You can view a more complete demo [here](https://anchor-polyfill.netlify.app/).

‎index.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,14 @@
3232
background: green;
3333
}
3434
</style>
35+
<script type="module">
36+
import polyfill from '/src/index-fn.ts';
37+
38+
const btn = document.getElementById('apply-polyfill');
39+
btn.addEventListener('click', () =>
40+
polyfill().then((rules) => console.log(rules)),
41+
);
42+
</script>
3543
</head>
3644
<body>
3745
<h1>CSS Anchor Positioning Polyfill</h1>
@@ -86,12 +94,5 @@ <h2>Anchor() (used in math function)</h2>
8694
<h2>Anchor Size</h2>
8795
<div id="my-anchor-size">Anchor</div>
8896
<div id="my-floating-size">Floating</div>
89-
90-
<script type="module">
91-
import polyfill from '/src/index.ts';
92-
93-
const btn = document.getElementById('apply-polyfill');
94-
btn.addEventListener('click', () => polyfill());
95-
</script>
9697
</body>
9798
</html>

‎package-lock.json‎

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

‎package.json‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@oddbird/css-anchor-positioning",
3-
"version": "0.0.0-development",
3+
"version": "0.0.1-alpha.0",
44
"description": "Polyfill for the proposed CSS anchor positioning spec",
55
"license": "BSD-3-Clause",
66
"publishConfig": {
@@ -12,20 +12,33 @@
1212
"url": "https://github.com/oddbird/css-anchor-positioning.git"
1313
},
1414
"bugs": "https://github.com/oddbird/css-anchor-positioning/issues",
15-
"homepage": "https://polyfill.oddbird.net",
15+
"homepage": "https://anchor-polyfill.netlify.app",
1616
"keywords": [
1717
"css",
18-
"polyfill"
18+
"polyfill",
19+
"anchor-positioning"
1920
],
2021
"type": "module",
2122
"main": "./dist/css-anchor-positioning.umd.cjs",
2223
"module": "./dist/css-anchor-positioning.js",
2324
"types": "./dist/index.d.ts",
2425
"exports": {
2526
".": {
27+
"types": "./dist/index.d.ts",
2628
"import": "./dist/css-anchor-positioning.js",
27-
"require": "./dist/css-anchor-positioning.umd.cjs",
28-
"types": "./dist/index.d.ts"
29+
"require": "./dist/css-anchor-positioning.umd.cjs"
30+
},
31+
"./fn": {
32+
"types": "./dist/index-fn.d.ts",
33+
"import": "./dist/css-anchor-positioning-fn.js",
34+
"require": "./dist/css-anchor-positioning-fn.umd.cjs"
35+
}
36+
},
37+
"typesVersions": {
38+
"*": {
39+
"fn": [
40+
"./dist/index-fn.d.ts"
41+
]
2942
}
3043
},
3144
"files": [
@@ -35,7 +48,9 @@
3548
"package.json"
3649
],
3750
"scripts": {
38-
"build": "vite build",
51+
"build": "run-s build:dist build:fn",
52+
"build:dist": "vite build",
53+
"build:fn": "cross-env BUILD_FN=1 vite build",
3954
"preview": "vite preview",
4055
"serve": "vite dev",
4156
"dev": "npm run serve",
@@ -59,14 +74,18 @@
5974
"test": "run-p test:unit test:e2e",
6075
"test:ci": "run-p test:unit test:e2e:ci"
6176
},
62-
"devDependencies": {
77+
"dependencies": {
6378
"@floating-ui/dom": "^1.0.2",
79+
"@types/css-tree": "^1.0.7",
80+
"css-tree": "^2.2.1"
81+
},
82+
"devDependencies": {
6483
"@playwright/test": "^1.25.2",
6584
"@types/node": "*",
6685
"@typescript-eslint/eslint-plugin": "^5.37.0",
6786
"@typescript-eslint/parser": "^5.37.0",
6887
"@vitest/coverage-istanbul": "^0.23.4",
69-
"css-tree": "^2.2.1",
88+
"cross-env": "^7.0.3",
7089
"eslint": "^8.23.1",
7190
"eslint-config-prettier": "^8.5.0",
7291
"eslint-import-resolver-typescript": "^3.5.1",
@@ -89,7 +108,9 @@
89108
"resolutions": {
90109
"tslib": ">=2"
91110
},
92-
"dependencies": {
93-
"@types/css-tree": "^1.0.7"
94-
}
111+
"sideEffects": [
112+
"./src/index.ts",
113+
"./dist/css-anchor-positioning.js",
114+
"./dist/css-anchor-positioning.umd.cjs"
115+
]
95116
}

‎src/index-fn.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { polyfill } from './polyfill.js';
2+
3+
export default polyfill;

‎src/index.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
import { polyfill } from './polyfill.js';
22

3-
// Expose API
4-
export default polyfill;
3+
// apply polyfill
4+
if (document.readyState !== 'complete') {
5+
window.addEventListener('load', () => {
6+
polyfill();
7+
});
8+
} else {
9+
polyfill();
10+
}

‎src/polyfill.ts‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -154,8 +154,6 @@ export const getPixelValue = ({
154154
};
155155

156156
export function position(rules: AnchorPositions) {
157-
console.log(rules);
158-
159157
Object.entries(rules).forEach(([floatingSel, position]) => {
160158
const floating: HTMLElement | null = document.querySelector(floatingSel);
161159

@@ -196,16 +194,11 @@ export async function polyfill() {
196194
const rules = parseCSS(styleData.map(({ css }) => css).join('\n'));
197195

198196
if (Object.values(rules).length) {
199-
// apply polyfill
200-
if (document.readyState !== 'complete') {
201-
window.addEventListener('load', () => {
202-
position(rules);
203-
});
204-
} else {
205-
position(rules);
206-
}
197+
position(rules);
207198

208199
// @@@ update source code
209200
// transformCSS(styleData);
210201
}
202+
203+
return rules;
211204
}

0 commit comments

Comments
 (0)