Graphql-playground: CSS Loader for codemirror.css

[albinekb]

This issue pertains to:

• [x] GraphQL Playground React Component

What OS and OS version are you experiencing the issue(s) on?

macOS

What version of graphql-playground(-electron/-middleware) are you experience the issue(s) on?

^1.2.0

What is the expected behavior?

I can decide how to load CSS myself/given instructions on how to set up my react app to work with this lib

What is the actual behavior?

Codemirror css is imported inside the module, so I can't load it in a way that works with next.js

Maybe document what loader is recommended to make this file load? I have a workaround to load it in next.js, so I can load the playground css via import playgroundCSS from 'graphql-playground/playground.css' and inline it, but since the codemirror css is imported somewhere inside this lib, it's out of my control.

What steps may we take to reproduce the behavior?

1. create a directory
2. add next yarn add next react react-dom
3. create file in pages folder ./pages/index.js with contents:

import React from 'react'
import Playground from 'graphql-playground'
export default = () => <Playground endpoint={'/graphql'} />

1. error:

Error in codemirror/lib/codemirror.css
Module parse failed: /Users/.../frontend-admin/node_modules/codemirror/lib/codemirror.css Unexpected token (3:0) You may need an appropriate loader to handle this file type. | /* BASICS */ | | .CodeMirror { | /* Set height, width, borders, and global font properties here */ | font-family: monospace;

tl:dr You may need an appropriate loader to handle this file type.

this will do all the steps for you (bash)

mkdir graphql-playground-issue-279 &&\
cd graphql-playground-issue-279 &&\
yarn init -y &&\
yarn add next react react-dom &&\
mkdir pages &&\
touch pages/index.js &&\\n
echo "import React from 'react'\\n
import Playground from 'graphql-playground'\\n
export default = () => <Playground endpoint={'/graphql'} />\
" >> pages/index.js &&\
./node_modules/.bin/next dev

[albinekb]

The easiest solution I can see to this is to just let the user import the codemirror css manually, however they like 👍

[timsuchanek]

This is actually a good point @albinekb ! Thanks for raising this!

[huv1k]

This will be fixed with #641

[huv1k]

Everything it's now inside styled-components

[albinekb]

Well done!