cristianbote / goober

🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
https://goober.rocks
MIT License
3.11k stars 118 forks source link

`css()` taken by surprise when `this` is `window` (in “old-school” JS environment) #545

Open domq opened 1 year ago

domq commented 1 year ago

Fiddle at https://jsfiddle.net/2f6uzmb5/6/

Steps to reproduce:

  1. Import Goober “the old-school way” e.g. with
    <script src="https://cdn.jsdelivr.net/npm/goober@2.1.13/dist/goober.umd.js" />
  2. Set window.target to something that internal function getSheet() won't like
  3. 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.

jluxenberg commented 1 year ago

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