Fix #376

[Looky1173]

Resolves #376.

@cristianbote This PR would increase the bundle size of goober but only by a few bytes.

1242 B: goober.cjs.gz
1133 B: goober.cjs.br
1252 B: goober.modern.js.gz
1149 B: goober.modern.js.br
1252 B: goober.esm.js.gz
1149 B: goober.esm.js.br
1315 B: goober.umd.js.gz
1195 B: goober.umd.js.br

Here is a CodeSandbox demo where createGlobalStyles works correctly with themes.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
goober-rocks	✅ Ready (Inspect)	Visit Preview	Aug 24, 2022 at 7:29AM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3881de1:

Sandbox	Source
Vanilla	Configuration
Theming (Preact + Goober)	PR
preact-goober	Issue #376

[cristianbote]

Hey @Looky1173 thanks for opening this. Size-wise is fine. Can you add a test case for this?

[Looky1173]

@cristianbote Oops, I forgot about the tests! 😅 I've just fixed the ones failing and added two additional tests.

[Looky1173]

Hi @cristianbote, could you please approve the PR workflows so we could see if all tests pass? (They do pass on my local machine, they should do here too.)

[cristianbote]

It's all looking great @Looky1173! Thanks for your contribution

[gr0uch]

Hi, this causes a bug where if multiple instances of global styles are needed, the last one overwrites all, preventing multiple global styles from being applied.

I think this could be fixed by giving cache.g a unique key instead of g.

[Looky1173]

Hi @gr0uch, how would we identify different instances of createGlobalStyles? The only way I can think of is adding an optional second parameter to createGlobalStyles which could be used as a unique key.

[Looky1173]

@gr0uch Or we could make use of _previousClassName, passing it to the hash function.

Edit: I've just realised that _previousClassName would not be suitable for resolving this regression.

[gr0uch]

adding an optional second parameter would work. one other way would be to use new Error().stack to check if it is a repeated invocation of a previous function call, since the stack would be identical.

the drawback is that stack is non-standard but in practice implemented by almost every browser.

[Looky1173]

Since createGlobalStyles returns a component, we could also use the id prop of <GlobalStyles />. What do you think @gr0uch and @cristianbote?

[gr0uch]

yeah allowing a prop to be passed would probably work, though less automatic than checking calling location via stack trace.

[cristianbote]

I need to look into it to understand it better before having an opinion on it 🤔 give me a few