move editor styles to @graphiql/react (#2532)

Author: thomasheyenbrock

packages/graphiql-react/src/editor/components/header-editor.tsx

@@ -2,6 +2,7 @@ import { useHeaderEditor, UseHeaderEditorArgs } from '../header-editor';
 
 import '../style/codemirror.css';
 import '../style/fold.css';
+import '../style/editor.css';
 
 type HeaderEditorProps = UseHeaderEditorArgs & { isHidden?: boolean };
 

packages/graphiql-react/src/editor/components/query-editor.tsx

@@ -7,6 +7,7 @@ import '../style/hint.css';
 import '../style/info.css';
 import '../style/jump.css';
 import '../style/auto-insertion.css';
+import '../style/editor.css';
 
 export function QueryEditor(props: UseQueryEditorArgs) {
   const ref = useQueryEditor(props);

packages/graphiql-react/src/editor/components/response-editor.tsx

@@ -3,6 +3,7 @@ import { useResponseEditor, UseResponseEditorArgs } from '../response-editor';
 import '../style/codemirror.css';
 import '../style/fold.css';
 import '../style/info.css';
+import '../style/editor.css';
 
 export function ResponseEditor(props: UseResponseEditorArgs) {
   const ref = useResponseEditor(props);

packages/graphiql-react/src/editor/components/variable-editor.tsx

@@ -4,6 +4,7 @@ import '../style/codemirror.css';
 import '../style/fold.css';
 import '../style/lint.css';
 import '../style/hint.css';
+import '../style/editor.css';
 
 type VariableEditorProps = UseVariableEditorArgs & {
   isHidden?: boolean;

packages/graphiql-react/src/editor/style/editor.css

@@ -0,0 +1,10 @@
+.graphiql-editor {
+  height: 100%;
+  position: relative;
+
+  &.hidden {
+    /* Just setting `display: none;` would break the editor gutters */
+    position: absolute;
+    visibility: hidden;
+  }
+}

packages/graphiql/src/style.css

@@ -31,17 +31,6 @@
   padding: var(--px-16);
 }
 
-/* Any codemirror editor */
-.graphiql-container .graphiql-editor {
-  height: 100%;
-  position: relative;
-}
-.graphiql-container .graphiql-editor.hidden {
-  /* Just setting `display: none;` would break the editor gutters */
-  position: absolute;
-  visibility: hidden;
-}
-
 /* The tab bar for editor tools */
 .graphiql-container .graphiql-editor-tools {
   align-items: center;