diff --git a/__tests__/integration/mirador/embedding.html b/__tests__/integration/mirador/embedding.html
index cb00b2e74728daa49fb05ac034ffe48c2beb6108..6630548786fb190a41842824f0f04f47f641437e 100644
--- a/__tests__/integration/mirador/embedding.html
+++ b/__tests__/integration/mirador/embedding.html
@@ -26,6 +26,7 @@
</style>
<title>Mirador</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+ <link rel="stylesheet" href="../../../dist/main.css">
</head>
<body>
<h1>This is the first instance</h1>
diff --git a/__tests__/integration/mirador/index.html b/__tests__/integration/mirador/index.html
index c97fa455ce0169117392aa3492c621a009037151..3d6b02bae791f315ba54656a4d29d8de12dc7a26 100644
--- a/__tests__/integration/mirador/index.html
+++ b/__tests__/integration/mirador/index.html
@@ -6,6 +6,7 @@
<meta name="theme-color" content="#000000">
<title>Mirador</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+ <link rel="stylesheet" href="../../../dist/main.css">
</head>
<body>
<div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
diff --git a/__tests__/integration/mirador/plugins/state.html b/__tests__/integration/mirador/plugins/state.html
index 75617f14ccc4151714e59a15e59d067168e3578b..3a88fe46995ffea6ccceb1f6c13bed37ebe9f167 100644
--- a/__tests__/integration/mirador/plugins/state.html
+++ b/__tests__/integration/mirador/plugins/state.html
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
+ <link rel="stylesheet" href="../../../../dist/main.css">
<title>Mirador</title>
</head>
<body>
diff --git a/__tests__/integration/mirador/window_actions.test.js b/__tests__/integration/mirador/window_actions.test.js
index 0f62f257a26037413a97be643bb6395a71a88372..3ee3b298c3c97be7f625eddb66508921b28b5626 100644
--- a/__tests__/integration/mirador/window_actions.test.js
+++ b/__tests__/integration/mirador/window_actions.test.js
@@ -19,5 +19,5 @@ describe('Window actions', () => {
)); // only default configed windows found
await page.waitFor(1000);
await expect(numWindows).toBe(2);
- });
+ }, 30000);
});
diff --git a/__tests__/integration/mirador/window_sidebar.test.js b/__tests__/integration/mirador/window_sidebar.test.js
index b73cc92131245ffa516c3efe27280fb6a2411803..ce4ae5e690fed4f10128100ad484b0dd8f9237d7 100644
--- a/__tests__/integration/mirador/window_sidebar.test.js
+++ b/__tests__/integration/mirador/window_sidebar.test.js
@@ -46,5 +46,5 @@ describe('Window Sidebars', () => {
await expect(page).toClick(`#${windowId} button[aria-label="Toggle sidebar"]`);
await expect(page).toMatchElement(`#${windowId} button[aria-label="Index"]`);
- });
+ }, 30000);
});
diff --git a/package.json b/package.json
index 9c6710f2339f958b506872cd828be9a12a82edd6..cdcfc8b5ff6aae5090d8cf61a5d18c607cb521f7 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,8 @@
"jest-puppeteer": "^4.1.1",
"jsdom": "14.0.0",
"json-server": "^0.14.2",
+ "mini-css-extract-plugin": "^0.7.0",
+ "optimize-css-assets-webpack-plugin": "^5.0.1",
"puppeteer": "^1.17.0",
"react": "^16.8.6",
"react-dev-utils": "^8.0.0",
diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js
index 9ead3d6e17d6e481c932056d4df2954938b09a48..6078e8c11b69192ed5a4352ec0d413760c6f3968 100644
--- a/src/components/ManifestListItem.js
+++ b/src/components/ManifestListItem.js
@@ -9,7 +9,6 @@ import { TextBlock, TextRow, RectShape } from 'react-placeholder/lib/placeholder
import Img from 'react-image';
import ManifestListItemError from '../containers/ManifestListItemError';
import ns from '../config/css-ns';
-import 'react-placeholder/lib/reactPlaceholder.css';
/**
* Handling open button click
diff --git a/src/components/WorkspaceMosaic.js b/src/components/WorkspaceMosaic.js
index bcdcf82268f9d7663ec00911640ff15358fb744e..e7fc1fe159f8a998dcccc9541ed84e2dc8d801ed 100644
--- a/src/components/WorkspaceMosaic.js
+++ b/src/components/WorkspaceMosaic.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import {
Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
} from 'react-mosaic-component';
-import 'react-mosaic-component/react-mosaic-component.css';
import difference from 'lodash/difference';
import toPairs from 'lodash/toPairs';
import MosaicRenderPreview from '../containers/MosaicRenderPreview';
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a4b193ef332cb8b41a64f5740804ecc78d096e7b..351576bd503fa3944bf9506b6772962eb09c4cd3 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,6 @@
+@import url('~react-mosaic-component/react-mosaic-component.css');
+@import url('~react-placeholder/lib/reactPlaceholder.css');
+
.mirador {
&-viewer {
bottom: 0;
diff --git a/webpack.config.js b/webpack.config.js
index 8e008757cfbfa1df08ac6f09b3659ebee6f4f8a6..22b2063813e44ece01b22a13b221f6c9ad090a5f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,7 @@
const path = require('path');
const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const paths = require('./config/paths');
@@ -37,11 +39,7 @@ const baseConfig = [
babelLoaderConfig,
{
test: /\.s?css$/,
- use: [
- 'style-loader', // creates style nodes from JS strings
- 'css-loader', // translates CSS into CommonJS
- 'sass-loader', // compiles Sass to CSS, using Node Sass by default
- ],
+ use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
@@ -50,6 +48,11 @@ const baseConfig = [
new TerserPlugin({
extractComments: true,
}),
+ new OptimizeCSSAssetsPlugin({
+ cssProcessorPluginOptions: {
+ preset: ['default', { discardComments: { removeAll: true } }],
+ },
+ }),
],
},
output: {
@@ -60,6 +63,10 @@ const baseConfig = [
path: path.join(__dirname, 'dist'),
},
plugins: [
+ new MiniCssExtractPlugin({
+ chunkFilename: '[id].css',
+ filename: '[name].css',
+ }),
new webpack.IgnorePlugin({
resourceRegExp: /@blueprintjs\/(core|icons)/, // ignore optional UI framework dependencies
}),