@schalkneethling/css-media-pseudo-polyfill 1.0.10 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -0
- package/dist/fn.mjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/{polyfill-BA69lY_2.mjs → polyfill-D0PMITQS.mjs} +19 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,6 +25,28 @@ The polyfill runs in four stages:
|
|
|
25
25
|
|
|
26
26
|
The `"./fn"` entry point is useful when you need to run the polyfill earlier (e.g., from a synchronous `<script>` in `<head>`) to minimize the flash of unstyled content (FOUC).
|
|
27
27
|
|
|
28
|
+
**Default entry point** — auto-applies on `DOMContentLoaded`:
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
import "@schalkneethling/css-media-pseudo-polyfill";
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
**`"./fn"` entry point** — call `polyfill()` manually, e.g. from a synchronous `<script>` in `<head>` to minimize FOUC:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<script type="module">
|
|
38
|
+
import { polyfill } from "@schalkneethling/css-media-pseudo-polyfill/fn";
|
|
39
|
+
polyfill();
|
|
40
|
+
</script>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Or from a module bundler:
|
|
44
|
+
|
|
45
|
+
```js
|
|
46
|
+
import { polyfill } from "@schalkneethling/css-media-pseudo-polyfill/fn";
|
|
47
|
+
polyfill();
|
|
48
|
+
```
|
|
49
|
+
|
|
28
50
|
## Spec references
|
|
29
51
|
|
|
30
52
|
The pseudo-class definitions and their DOM conditions come from the [WHATWG HTML spec](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-muted):
|
package/dist/fn.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as polyfill } from "./polyfill-
|
|
1
|
+
import { t as polyfill } from "./polyfill-D0PMITQS.mjs";
|
|
2
2
|
export { polyfill };
|
package/dist/index.mjs
CHANGED
|
@@ -211,6 +211,21 @@ function rewriteStyleElements(unsupported) {
|
|
|
211
211
|
//#endregion
|
|
212
212
|
//#region src/rewrite-link.ts
|
|
213
213
|
/**
|
|
214
|
+
* Resolve relative url() references in CSS text to absolute URLs, using
|
|
215
|
+
* the stylesheet's own URL as the base. This is necessary because when CSS
|
|
216
|
+
* is fetched from a <link> and re-injected as an inline <style>, the browser
|
|
217
|
+
* resolves url() references relative to the document URL rather than the
|
|
218
|
+
* original stylesheet URL, breaking any relative paths (e.g. url('../images/bg.png')).
|
|
219
|
+
*
|
|
220
|
+
* Data URIs and absolute URLs (https?:, //, /) are left untouched.
|
|
221
|
+
*/
|
|
222
|
+
function resolveUrls(cssText, base) {
|
|
223
|
+
return cssText.replace(/url\(\s*(['"]?)(.*?)\1\s*\)/gi, (match, quote, path) => {
|
|
224
|
+
if (/^(?:data:|https?:|\/)/.test(path)) return match;
|
|
225
|
+
return `url(${quote}${new URL(path, base).href}${quote})`;
|
|
226
|
+
});
|
|
227
|
+
}
|
|
228
|
+
/**
|
|
214
229
|
* Check whether a stylesheet URL is same-origin. The browser resolves
|
|
215
230
|
* relative hrefs to absolute URLs on the HTMLLinkElement.href property,
|
|
216
231
|
* so comparing the origin portion covers both relative paths and
|
|
@@ -243,6 +258,7 @@ async function processLinkSheet(link, unsupported) {
|
|
|
243
258
|
} catch {
|
|
244
259
|
return;
|
|
245
260
|
}
|
|
261
|
+
cssText = resolveUrls(cssText, href);
|
|
246
262
|
const rewritten = rewriteCss(cssText, unsupported);
|
|
247
263
|
link.setAttribute("data-polyfill-rewritten", "");
|
|
248
264
|
if (rewritten === null) return;
|
|
@@ -279,13 +295,9 @@ function rewriteLinkStylesheets(unsupported) {
|
|
|
279
295
|
function computeStates(element, isStalledFlag) {
|
|
280
296
|
const states = /* @__PURE__ */ new Set();
|
|
281
297
|
if (element.paused) states.add("paused");
|
|
282
|
-
else
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
states.add("buffering");
|
|
286
|
-
if (isStalledFlag) states.add("stalled");
|
|
287
|
-
}
|
|
288
|
-
}
|
|
298
|
+
else if (element.readyState < element.HAVE_FUTURE_DATA) if (isStalledFlag) states.add("stalled");
|
|
299
|
+
else states.add("buffering");
|
|
300
|
+
else states.add("playing");
|
|
289
301
|
if (element.seeking) states.add("seeking");
|
|
290
302
|
if (element.muted) states.add("muted");
|
|
291
303
|
return states;
|
package/package.json
CHANGED