goober icon indicating copy to clipboard operation
goober copied to clipboard

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

Open domq opened this issue 1 year ago • 1 comments

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/[email protected]/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.

domq avatar May 11 '23 15:05 domq

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

jluxenberg avatar Sep 06 '23 05:09 jluxenberg