optimize css loading and split from js dist

36335f5a · Christopher Johnson · d551c993 · 36335f5a · 36335f5a · 36335f5a
Commit 36335f5a authored Jun 17, 2019 by Christopher Johnson
--- 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>

--- 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>

--- 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>

--- 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);
 });
--- 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);
 });
--- 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",

--- 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

--- 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';

--- a/src/styles/index.scss
+++ b/src/styles/index.scss
+@import url('~react-mosaic-component/react-mosaic-component.css');
+@import url('~react-placeholder/lib/reactPlaceholder.css');
+
 .mirador {
  &-viewer {
    bottom: 0;

--- a/webpack.config.js
+++ b/webpack.config.js
 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
      }),