Render react resources as separate css to allow overriding (#1416)

* Render react resources as separate css to allow overriding

* Improve build.gradle.kts

4 files changed, 83 insertions, 12 deletions

diff --git a/plugins/base/frontend/package-lock.json b/plugins/base/frontend/package-lock.json
index c671c752..ed81a875 100644
--- a/plugins/base/frontend/package-lock.json
+++ b/plugins/base/frontend/package-lock.json
@@ -8265,6 +8265,68 @@
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
+    "mini-css-extract-plugin": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.0.tgz",
+      "integrity": "sha512-dVWGuWJlQw2lZxsxBI3hOsoxg1k3DruLR0foHQLSkQMfk+qLJbv9dUk8fjmjWQKN9ef2n54ehA2FjClAsQhrWQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "normalize-url": "1.9.1",
+        "schema-utils": "^1.0.0",
+        "webpack-sources": "^1.1.0"
+      },
+      "dependencies": {
+        "normalize-url": {
+          "version": "1.9.1",
+          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
+          "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.0.1",
+            "prepend-http": "^1.0.0",
+            "query-string": "^4.1.0",
+            "sort-keys": "^1.0.0"
+          }
+        },
+        "prepend-http": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+          "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
+          "dev": true
+        },
+        "query-string": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+          "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        },
+        "sort-keys": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
+          "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+          "dev": true,
+          "requires": {
+            "is-plain-obj": "^1.0.0"
+          }
+        }
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
diff --git a/plugins/base/frontend/package.json b/plugins/base/frontend/package.json
index 14a44e8e..c86d324d 100644
--- a/plugins/base/frontend/package.json
+++ b/plugins/base/frontend/package.json
@@ -48,6 +48,7 @@
     "@types/lodash": "^4.14.158",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.8.0",
+    "mini-css-extract-plugin": "^0.11.0",
     "react-svg-loader": "^3.0.3",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx
index ce1ac8b4..ba7f6093 100644
--- a/plugins/base/frontend/src/main/components/search/search.tsx
+++ b/plugins/base/frontend/src/main/components/search/search.tsx
@@ -1,12 +1,12 @@
-import React, {useCallback, useState} from 'react';
-import {Select, List} from '@jetbrains/ring-ui';
+import React, { useCallback, useState } from 'react';
+import { Select, List } from '@jetbrains/ring-ui';
 import '@jetbrains/ring-ui/components/input-size/input-size.scss';
 import './search.scss';
-import {IWindow, Option, Props} from "./types";
-import {DokkaSearchAnchor} from "./dokkaSearchAnchor";
-import {DokkaFuzzyFilterComponent} from "./dokkaFuzzyFilter";
+import { IWindow, Option, Props } from "./types";
+import { DokkaSearchAnchor } from "./dokkaSearchAnchor";
+import { DokkaFuzzyFilterComponent } from "./dokkaFuzzyFilter";
 
-const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
+const WithFuzzySearchFilterComponent: React.FC<Props> = ({ data }: Props) => {
     const [selected, onSelected] = useState<Option>(data[0]);
     const onChangeSelected = useCallback(
         (option: Option) => {
@@ -32,12 +32,12 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
                     data={data}
                     popupClassName={"popup-wrapper"}
                     onSelect={onChangeSelected}
-                    customAnchor={({wrapperProps, buttonProps, popup}) =>
-                        <DokkaSearchAnchor wrapperProps={wrapperProps} buttonProps={buttonProps} popup={popup}/>
+                    customAnchor={({ wrapperProps, buttonProps, popup }) =>
+                        <DokkaSearchAnchor wrapperProps={wrapperProps} buttonProps={buttonProps} popup={popup} />
                     }
                 />
+            </div>
         </div>
-      </div>
     )
 }
 
@@ -54,5 +54,5 @@ export const WithFuzzySearchFilter = () => {
         }));
     }
 
-    return <WithFuzzySearchFilterComponent data={data}/>;
+    return <WithFuzzySearchFilterComponent data={data} />;
 };
diff --git a/plugins/base/frontend/webpack.config.js b/plugins/base/frontend/webpack.config.js
index 3372b37f..fe93ed4f 100644
--- a/plugins/base/frontend/webpack.config.js
+++ b/plugins/base/frontend/webpack.config.js
@@ -1,6 +1,7 @@
 const {join, resolve} = require('path');
 
 const ringUiWebpackConfig = require('@jetbrains/ring-ui/webpack.config');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const pkgConfig = require('./package.json').config;
 
@@ -35,7 +36,7 @@ const webpackConfig = () => ({
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
+          MiniCssExtractPlugin.loader,
           'css-loader',
           'sass-loader',
         ],
@@ -55,7 +56,14 @@ const webpackConfig = () => ({
       }
     ]
   },
-  plugins: [],
+  plugins: [
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
+  ],
   output: {
     path: __dirname + '/dist/'
   }