fix(graphql-docs/build): rollup error thrown during build

- during the dts transformation, the css import was not recognized, hence marking it as external in the dts transform didn't throw the error

- "extract: true" in postcss plugin makes sure it gets extracted to the final bundle as well

Signed-off-by: Anik Das <anikdas0811@gmail.com>

docs/development.md

@@ -3,7 +3,8 @@
 Bruno is being developed as a desktop app. You need to load the app by running the nextjs app in one terminal and then run the electron app in another terminal.
 
 ### Dependencies
-* NodeJS v18
+
+- NodeJS v18
 
 ### Local Development
 
@@ -15,7 +16,6 @@ nvm use
 npm i --legacy-peer-deps
 
 # build graphql docs
-# note: you can for now ignore the error thrown while building the graphql docs
 npm run build:graphql-docs
 
 # build bruno query

packages/bruno-graphql-docs/rollup.config.js

@@ -1,46 +1,48 @@
-const { nodeResolve } = require("@rollup/plugin-node-resolve");
-const commonjs = require("@rollup/plugin-commonjs");
-const typescript = require("@rollup/plugin-typescript");
-const dts = require("rollup-plugin-dts");
-const postcss = require("rollup-plugin-postcss");
-const { terser } = require("rollup-plugin-terser");
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const typescript = require('@rollup/plugin-typescript');
+const dts = require('rollup-plugin-dts');
+const postcss = require('rollup-plugin-postcss');
+const { terser } = require('rollup-plugin-terser');
 const peerDepsExternal = require('rollup-plugin-peer-deps-external');
 
-const packageJson = require("./package.json");
+const packageJson = require('./package.json');
 
 module.exports = [
   {
-    input: "src/index.ts",
+    input: 'src/index.ts',
     output: [
       {
         file: packageJson.main,
-        format: "cjs",
-        sourcemap: true,
+        format: 'cjs',
+        sourcemap: true
       },
       {
         file: packageJson.module,
-        format: "esm",
-        sourcemap: true,
-      },
+        format: 'esm',
+        sourcemap: true
+      }
     ],
     plugins: [
       postcss({
         minimize: true,
-				extensions: ['.css']
+        extensions: ['.css'],
+        extract: true
       }),
       peerDepsExternal(),
       nodeResolve({
         extensions: ['.css']
       }),
       commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
+      typescript({ tsconfig: './tsconfig.json' }),
       terser()
     ],
-    external: ["react", "react-dom", "index.css"]
+    external: ['react', 'react-dom', 'index.css']
   },
   {
-    input: "dist/esm/index.d.ts",
-    output: [{ file: "dist/index.d.ts", format: "esm" }],
-    plugins: [dts.default()],
+    input: 'dist/esm/index.d.ts',
+    external: [/\.css$/],
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    plugins: [dts.default()]
   }
-];
+];

packages/bruno-graphql-docs/src/index.ts

@@ -1,6 +1,5 @@
 import { DocExplorer } from './components/DocExplorer';
 
-// Todo: Rollup throws error
 import './index.css';
 
 export { DocExplorer };