Rename global to avoid conflicts

[rafgraph]

When using Stitches with Create React App and running tests, there's a conflict with Stitches' global. It appears that global is already declared by the CRA testing setup.

While it is not necessarily Stitches responsibility to avoid this conflict, the name global may be too much of a harzard and may cause conflicts elsewhere as well.

My suggestion would be to rename global to something else.

react-scripts v4.0.3
@stitches/react v0.1.4

// stitches.config.ts
export const { styled, theme, global } = createCss({
...
}

// to fix, rename global:
export const { styled, theme, global: stitchesGlobal } = createCss({
...
}

 FAIL  src/App.test.tsx
  ● Test suite failed to run

    /Users/rafael/dev/maintained/react-interactive/demo/src/stitches.config.ts:13
      global
      ^

    SyntaxError: Identifier 'global' has already been declared

[peduarte]

Thanks, this was brought up in Discord as well. (maybe it was by you? don't remember now)

I think that makes sense. I agree global is a little too generic.

The first thing that comes to mind are globalCss or globalStyles

Thoughts?

[garand]

There is already createCss, so globalCss would fit that precedent.

[rafgraph]

@peduarte I didn't see the Discord post (it wasn't me who mentioned it).

I think it's a two part naming problem... global is a create function that returns a function that is called in the app. While only one of the names is controlled by Stitches, the best practice recommendation in the docs includes both, so I think they should be named together.

// currently it's:
const globalStyles = global({...})

// some options
const globalStyles = globalCss({...})

const globalCss = createGlobalCss({...})

const addGlobalCss = globalCss({...})

I think I'd be partial to const globalCss = createGlobalCss({...}).

[peduarte]

Addressed here: #683

Follow issue for when it's released. Thanks everyone.