fix: add `*.css` to `sideEffects` in all CSS-exporting graphiql packages by davidjb · Pull Request #4211 · graphql/graphiql

davidjb · 2026-04-22T03:18:37Z

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 · 2026-04-22T03:18:40Z

🦋 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 · 2026-04-22T03:18:43Z

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 · 2026-04-22T04:19:15Z

+"@graphiql/plugin-code-exporter": minor
+"@graphiql/plugin-doc-explorer": minor
+"@graphiql/plugin-explorer": minor
+"@graphiql/plugin-history": minor
+"@graphiql/react": minor
+"graphiql": minor


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

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

@trevor-scheer

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @graphiql/toolkit@0.12.0 ### Minor Changes - [#4199](#4199) [`463df14`](463df14) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Send spec-compliant `Accept` header (`application/graphql-response+json`) in `createSimpleFetcher` ## codemirror-graphql@2.2.5 ### Patch Changes - Updated dependencies \[[`914a547`](914a547), [`10f66d5`](10f66d5)]: - graphql-language-service@5.5.1 ## graphiql@5.2.3 ### Patch Changes - [#4181](#4181) [`f1a210e`](f1a210e) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix schema prop to skip introspection when IntrospectionQuery data is provided Previously, passing an `IntrospectionQuery` result as the `schema` prop would still trigger a network introspection request. The `shouldIntrospect` check only recognized `GraphQLSchema` instances (via `isSchema`), not raw introspection data. Now, when an `IntrospectionQuery` is passed, a schema is built from it directly using `buildClientSchema` and introspection is skipped. - [#4211](#4211) [`e7b30c1`](e7b30c1) Thanks [@davidjb](https://github.com/davidjb)! - Add \*.css to sideEffects to allow import of CSS in Webpack Javascript - Updated dependencies \[[`f1a210e`](f1a210e), [`6f5d5d2`](6f5d5d2), [`40359eb`](40359eb), [`e7b30c1`](e7b30c1)]: - @graphiql/react@0.37.4 - @graphiql/plugin-doc-explorer@0.4.2 - @graphiql/plugin-history@0.4.2 ## @graphiql/plugin-code-exporter@5.1.2 ### Patch Changes - [#4211](#4211) [`e7b30c1`](e7b30c1) Thanks [@davidjb](https://github.com/davidjb)! - Add \*.css to sideEffects to allow import of CSS in Webpack Javascript ## @graphiql/plugin-doc-explorer@0.4.2 ### Patch Changes - [#4231](#4231) [`6f5d5d2`](6f5d5d2) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix degraded type declarations in published packages Both packages import from `@graphiql/react` at build time but only declared it as a peer dependency. Yarn workspaces topologically orders builds via `dependencies`/`devDependencies`, not `peerDependencies`, so on a clean checkout these plugins built before `@graphiql/react` had emitted its `dist/*.d.ts`. `vite-plugin-dts` then ran `tsc` against unresolved `@graphiql/react` imports, fell back to `any` for any return type that flowed through `useGraphiQL`, and published `.d.ts` artifacts where hooks like `useDocExplorer` and `useDocExplorerActions` resolved to `() => any` instead of their real shapes. Adding `@graphiql/react` as a `devDependency` matches the pattern already in `@graphiql/plugin-explorer` and `@graphiql/plugin-code-exporter` and lets the build run in topological order. - [#4140](#4140) [`40359eb`](40359eb) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove `react-compiler-runtime` peer dependency - [#4211](#4211) [`e7b30c1`](e7b30c1) Thanks [@davidjb](https://github.com/davidjb)! - Add \*.css to sideEffects to allow import of CSS in Webpack Javascript ## @graphiql/plugin-explorer@5.1.2 ### Patch Changes - [#4211](#4211) [`e7b30c1`](e7b30c1) Thanks [@davidjb](https://github.com/davidjb)! - Add \*.css to sideEffects to allow import of CSS in Webpack Javascript ## @graphiql/plugin-history@0.4.2 ### Patch Changes - [#4231](#4231) [`6f5d5d2`](6f5d5d2) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix degraded type declarations in published packages Both packages import from `@graphiql/react` at build time but only declared it as a peer dependency. Yarn workspaces topologically orders builds via `dependencies`/`devDependencies`, not `peerDependencies`, so on a clean checkout these plugins built before `@graphiql/react` had emitted its `dist/*.d.ts`. `vite-plugin-dts` then ran `tsc` against unresolved `@graphiql/react` imports, fell back to `any` for any return type that flowed through `useGraphiQL`, and published `.d.ts` artifacts where hooks like `useDocExplorer` and `useDocExplorerActions` resolved to `() => any` instead of their real shapes. Adding `@graphiql/react` as a `devDependency` matches the pattern already in `@graphiql/plugin-explorer` and `@graphiql/plugin-code-exporter` and lets the build run in topological order. - [#4140](#4140) [`40359eb`](40359eb) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove `react-compiler-runtime` peer dependency - [#4211](#4211) [`e7b30c1`](e7b30c1) Thanks [@davidjb](https://github.com/davidjb)! - Add \*.css to sideEffects to allow import of CSS in Webpack Javascript - Updated dependencies \[[`463df14`](463df14)]: - @graphiql/toolkit@0.12.0 ## @graphiql/react@0.37.4 ### Patch Changes - [#4181](#4181) [`f1a210e`](f1a210e) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix schema prop to skip introspection when IntrospectionQuery data is provided Previously, passing an `IntrospectionQuery` result as the `schema` prop would still trigger a network introspection request. The `shouldIntrospect` check only recognized `GraphQLSchema` instances (via `isSchema`), not raw introspection data. Now, when an `IntrospectionQuery` is passed, a schema is built from it directly using `buildClientSchema` and introspection is skipped. - [#4140](#4140) [`40359eb`](40359eb) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove `react-compiler-runtime` peer dependency - [#4211](#4211) [`e7b30c1`](e7b30c1) Thanks [@davidjb](https://github.com/davidjb)! - Add \*.css to sideEffects to allow import of CSS in Webpack Javascript - Updated dependencies \[[`914a547`](914a547), [`463df14`](463df14), [`4bb7909`](4bb7909), [`10f66d5`](10f66d5)]: - graphql-language-service@5.5.1 - @graphiql/toolkit@0.12.0 - monaco-graphql@1.7.4 ## graphql-language-service@5.5.1 ### Patch Changes - [#3882](#3882) [`914a547`](914a547) Thanks [@bensengupta](https://github.com/bensengupta)! - Fix off-by-one when hovering over token - [#4222](#4222) [`10f66d5`](10f66d5) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Unpin and update graphql-config dependency ## graphql-language-service-server@2.14.9 ### Patch Changes - [#4187](#4187) [`ca83879`](ca83879) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Bump required TypeScript runtime dependency from `^5.3.3` to `^5.8.0`. This is preparatory work for adopting the TypeScript Native Preview (tsgo) compiler in a follow-up change, which tracks TypeScript 5.8 semantics. In practice `^5.3.3` already resolved to TS 5.8+ for most consumers; the new floor only affects consumers who pin TypeScript to 5.3–5.7 via resolutions or overrides. - [#4222](#4222) [`10f66d5`](10f66d5) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Unpin and update graphql-config dependency - Updated dependencies \[[`914a547`](914a547), [`10f66d5`](10f66d5)]: - graphql-language-service@5.5.1 ## monaco-graphql@1.7.4 ### Patch Changes - [#4225](#4225) [`4bb7909`](4bb7909) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix hover crashing on the first line of a query `GraphQLWorker.doHover` was passing 0-indexed positions to `getRange`, which expects a 1-indexed `SourceLocation` (per the GraphQL spec). On the first line this caused `Expected Parser stream to be available` to be logged and hover to return `null`. On other lines it returned the range of the previous line's last token rather than the token under the cursor. Use `getTokenAtPosition` to compute the actual token range instead. - Updated dependencies \[[`914a547`](914a547), [`10f66d5`](10f66d5)]: - graphql-language-service@5.5.1 ## vscode-graphql@0.13.3 ### Patch Changes - [#4183](#4183) [`2ef9389`](2ef9389) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix VS Code extension publishing scripts - Updated dependencies \[[`ca83879`](ca83879), [`10f66d5`](10f66d5)]: - graphql-language-service-server@2.14.9 ## vscode-graphql-execution@0.3.3 ### Patch Changes - [#4183](#4183) [`2ef9389`](2ef9389) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix VS Code extension publishing scripts - [#4222](#4222) [`10f66d5`](10f66d5) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Unpin and update graphql-config dependency ## vscode-graphql-syntax@1.3.9 ### Patch Changes - [#4183](#4183) [`2ef9389`](2ef9389) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix VS Code extension publishing scripts - [#4143](#4143) [`7979bf5`](7979bf5) Thanks [@Netail](https://github.com/Netail)! - Add syntax highlighting support for subscription operations. - [#4144](#4144) [`f7e2a56`](f7e2a56) Thanks [@jsmnbom](https://github.com/jsmnbom)! - Add `text.html.vue` as inline injection target. [This PR](vuejs/language-tools#5856) broke tooling by changing the vue grammar scope from `source.vue` to `text.html.vue`. This adds `text.html.vue` as an additional injection target for GraphQL syntax highlighting so that it works in both cases. Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

#4211 added `*.css` to `@graphiql/react`'s `sideEffects` to keep webpack from tree-shaking `import 'graphiql/style.css'`. The glob landed in 0.37.4 alongside esm.sh's `?standalone` builder starting to emit a 115-line preload stub that fragments `monaco-editor` into two instances and breaks syntax highlighting on CDN consumers (#4303). Remove the glob to narrow the package.json delta between the last-working `0.37.3` and the first-broken `0.37.4`. If the resulting prerelease shows a small esm.sh stub again, a narrower form like `dist/**/*.css` is the follow-up to keep webpack happy.

@trevor-scheer

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to release/cdn-fix-alpha, this PR will be updated. ⚠️

⚠️

⚠️ `release/cdn-fix-alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `release/cdn-fix-alpha`. ⚠️

⚠️

⚠️ # Releases ## @graphiql/react@0.37.6-alpha.1 ### Patch Changes - [#4308](#4308) [`8ac17d1`](8ac17d1) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Revert the `*.css` entry from `sideEffects` (added in #4211). The unbounded glob landed in the same release where esm.sh's `?standalone` builder started emitting a much larger preload stub that fragments `monaco-editor` into two instances and breaks syntax highlighting on CDN consumers (#4303). Removing it narrows the package.json delta between the last working version (0.37.3) and the first broken one (0.37.4). A more narrowly-scoped form may return in a follow-up if the webpack tree-shaking issue from #4211 recurs. Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

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

ea3bfbd

Add changeset

003a4c9

trevor-scheer approved these changes Apr 22, 2026

View reviewed changes

Change changset to patch, format

adcf505

dimaMachina approved these changes Apr 22, 2026

View reviewed changes

dimaMachina enabled auto-merge (squash) April 22, 2026 11:58

dimaMachina disabled auto-merge April 22, 2026 11:59

dimaMachina enabled auto-merge (squash) April 22, 2026 11:59

dimaMachina merged commit e7b30c1 into graphql:main Apr 22, 2026
14 checks passed

acao mentioned this pull request Apr 21, 2026

Version Packages #4192

Closed

davidjb deleted the sideEffects-css branch April 22, 2026 12:26

acao mentioned this pull request May 7, 2026

Version Packages (alpha) #4229

Closed

This was referenced May 8, 2026

Version Packages mikeyhodl/graphiql#119

Open

Version Packages SimenB/graphiql#179

Open

acao mentioned this pull request May 8, 2026

Version Packages (alpha) #4239

Closed

This was referenced May 9, 2026

Version Packages admariner/graphiql#2

Open

Version Packages #4247

Merged

github-actions Bot mentioned this pull request May 19, 2026

Version Packages (alpha) #4310

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

fix: add `*.css` to `sideEffects` in all CSS-exporting graphiql packages#4211
dimaMachina merged 3 commits into
graphql:mainfrom
davidjb:sideEffects-css

davidjb commented Apr 22, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Apr 22, 2026 •

edited

Loading

Uh oh!

linux-foundation-easycla Bot commented Apr 22, 2026 •

edited

Loading

Uh oh!

trevor-scheer left a comment

Uh oh!

trevor-scheer Apr 22, 2026

Uh oh!

davidjb Apr 22, 2026

Uh oh!

dimaMachina left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

davidjb commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

linux-foundation-easycla Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

trevor-scheer left a comment

Choose a reason for hiding this comment

Uh oh!

trevor-scheer Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

davidjb Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

dimaMachina left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

davidjb commented Apr 22, 2026 •

edited

Loading

changeset-bot Bot commented Apr 22, 2026 •

edited

Loading

linux-foundation-easycla Bot commented Apr 22, 2026 •

edited

Loading