change style.css imports (#3709)

graphql · Aug 9, 2024 · 9baf1f0 · 9baf1f0
1 parent db181b2
commit 9baf1f0
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 10 deletions.
diff --git a/.changeset/breezy-chicken-crash.md b/.changeset/breezy-chicken-crash.md
@@ -0,0 +1,12 @@
+---
+'@graphiql/plugin-code-exporter': major
+---
+
+`style.css` import was changed
+
+## Migration
+
+```diff
+-import '@graphiql/plugin-code-exporter/dist/style.css';
++import '@graphiql/plugin-code-exporter/style.css';
+```
diff --git a/.changeset/good-vans-refuse.md b/.changeset/good-vans-refuse.md
@@ -0,0 +1,12 @@
+---
+'@graphiql/react': major
+---
+
+`style.css` import was changed
+
+## Migration
+
+```diff
+-import '@graphiql/react/dist/style.css';
++import '@graphiql/react/style.css';
+```
diff --git a/.changeset/poor-ghosts-jump.md b/.changeset/poor-ghosts-jump.md
@@ -0,0 +1,13 @@
+---
+'@graphiql/plugin-code-exporter': major
+---
+
+`style.css` import was changed
+
+## Migration
+
+```diff
+-import '@graphiql/plugin-code-exporter/dist/style.css';
++import '@graphiql/plugin-code-exporter/style.css';
+```
+
diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
@@ -6,8 +6,8 @@ import { explorerPlugin } from '@graphiql/plugin-explorer';
 import { getSnippets } from './snippets';
 import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
 import 'graphiql/style.css';
-import '@graphiql/plugin-explorer/dist/style.css';
-import '@graphiql/plugin-code-exporter/dist/style.css';
+import '@graphiql/plugin-explorer/style.css';
+import '@graphiql/plugin-code-exporter/style.css';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { useStorageContext } from '@graphiql/react';
 

diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
@@ -32,7 +32,7 @@ import { GraphiQL } from 'graphiql';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
 import 'graphiql/style.css';
-import '@graphiql/plugin-code-exporter/dist/style.css';
+import '@graphiql/plugin-code-exporter/style.css';
 
 const fetcher = createGraphiQLFetcher({
   url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',

diff --git a/packages/graphiql-plugin-code-exporter/package.json b/packages/graphiql-plugin-code-exporter/package.json
@@ -21,6 +21,15 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css",
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build && UMD=true vite build",

diff --git a/packages/graphiql-plugin-explorer/README.md b/packages/graphiql-plugin-explorer/README.md
@@ -26,7 +26,7 @@ import { GraphiQL } from 'graphiql';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { explorerPlugin } from '@graphiql/plugin-explorer';
 import 'graphiql/style.css';
-import '@graphiql/plugin-explorer/dist/style.css';
+import '@graphiql/plugin-explorer/style.css';
 
 const fetcher = createGraphiQLFetcher({
   url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',

diff --git a/packages/graphiql-plugin-explorer/package.json b/packages/graphiql-plugin-explorer/package.json
@@ -20,6 +20,15 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css",
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build && UMD=true vite build",

diff --git a/packages/graphiql-react/README.md b/packages/graphiql-react/README.md
@@ -61,7 +61,7 @@ function MyGraphQLIDE() {
 ```
 
 The package also ships the necessary CSS that all its UI components need. You
-can import them from `@graphiql/react/dist/style.css`.
+can import them from `@graphiql/react/style.css`.
 
 > **Note**: In order for these styles to apply, the UI components need to be
 > rendered inside an element that has a class name `graphiql-container`.

diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
@@ -15,14 +15,13 @@
   "module": "dist/index.mjs",
   "exports": {
     "./package.json": "./package.json",
+    "./style.css": "./dist/style.css",
+    "./font/*": "./font/*",
     ".": {
       "import": "./dist/index.mjs",
       "require": "./dist/index.js",
       "types": "./dist/types/index.d.ts"
-    },
-    "./font/roboto.css": "./font/roboto.css",
-    "./font/fira-code.css": "./font/fira-code.css",
-    "./dist/style.css": "./dist/style.css"
+    }
   },
   "types": "dist/types/index.d.ts",
   "keywords": [

diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -1,6 +1,6 @@
 @import '@graphiql/react/font/roboto.css';
 @import '@graphiql/react/font/fira-code.css';
-@import '@graphiql/react/dist/style.css';
+@import '@graphiql/react/style.css';
 
 /* Everything */
 .graphiql-container {