goober
goober copied to clipboard
`css()` taken by surprise when `this` is `window` (in “old-school” JS environment)
Fiddle at https://jsfiddle.net/2f6uzmb5/6/
Steps to reproduce:
- Import Goober “the old-school way” e.g. with
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/goober.umd.js" />
- Set
window.target
to something that internal functiongetSheet()
won't like - Call
css()
Expected result: css()
should return a fresh CSS class name.
Actual result:
TypeError: e.querySelector is not a function
(where e
is presumably the minified variable that holds window.target
inside getSheet()
)
From reading the relevant source code, it looks like setting any of window.p
, window.g
, window.o
or window.k
could also result in funny behavior.
This doesn't happen in a modern (ESM) environment, as they dropped the idea of squeezing the global object into this
-less function calls.
This will also happen when using esbuild
to bundle, since it doesn't emit the "use strict" directive at the top of each bundled module.
See this esbuild-based repro: 2023-09-05_esbuild-x-goober_bug.tgz
and my fix: https://github.com/cristianbote/goober/pull/562