fix: add *.css to sideEffects in all CSS-exporting graphiql packages

[davidjb]

When attempting to set up graphiql in my Webpack 5 environment, and follow the example code https://github.com/graphql/graphiql/tree/main/packages/graphiql#using-as-package, I noticed that the line:

import 'graphiql/style.css';

was having no effect. The line was being processed, but Webpack was not emitting CSS. The resulting page looked like this, a working UI, but no CSS styles:

The cause is that the graphiql package has a sideEffects property in its package.json, which is set up to allow side effects but only for dist/setup-workers/*. Because graphiql/style.css (aka dist/style.css) falls outside of this path, Webpack ignores the imported CSS.

This is explained at https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free, down the bottom of this section:

Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode:

{
 "name": "your-project",
 "sideEffects": ["./src/some-side-effectful-file.js", "*.css"]
}

This PR follows that directive and adds the required sideEffects entry to all packages - especially graphiql - that have CSS exports in their package.json files. Testing locally by patching this in to my build pipeline sees the JS import line now working.

---

Ahead of this PR being accepted, a Webpack configuration can manually override sideEffects like so:

const config = {
  module: {
    rules: [
      ...,
      {
        test: /graphiql/,
        sideEffects: true,
      }
    ]
  }
}

That forces sideEffects to be on for all files, but in Webpack, it's only able to be a Boolean.

Another workaround is to use Sass/SCSS or another CSS preprocessor and @use 'graphiql/style.css'; instead -- using another tool bypasses Webpack's checking of sideEffects. This is actually how I found the issue in the first place -- importing within Sass worked fine, but when using import in JS, nothing loaded.

[changeset-bot]

🦋 Changeset detected

Latest commit: adcf505

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@graphiql/plugin-code-exporter	Patch
@graphiql/plugin-doc-explorer	Patch
@graphiql/plugin-explorer	Patch
@graphiql/plugin-history	Patch
@graphiql/react	Patch
graphiql	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: davidjb / name: David Beitey (003a4c9, adcf505, ea3bfbd)

[trevor-scheer]

This looks great and thanks for the fantastic PR description. Going to validate the change on my side when I get a chance but LGTM!

[trevor-scheer]

Seems like a patch/bugfix to me, @dimaMachina ?

[davidjb]

I've just updated these patch (and also formatted it to pass CI); I'd intended this originally but the yarn changeset CLI puzzled me on first use.

Anyway, having CSS output where it's intended to exist but isn't currently working feels like a fix, but please let me know if this needs further adjusting.

[dimaMachina]

Lgtm, strange that nobody reported it before, looks like it's very strict in webpack