Task: Move to scss, update and optimise webpack

.eslintrc

@@ -10,7 +10,8 @@
   ],
   "env": {
     "browser": true,
-    "jest": true
+    "jest": true,
+    "node": true,
   },
   "rules": {
     "prefer-const": 1,

.storybook/webpack.config.js

@@ -6,42 +6,28 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.module.css$/,
+        test: /\.module.(sa|sc|c)ss$/,
         use: [
-          {
-            loader: "style-loader"
-          },
+          "style-loader",
           {
             loader: "css-loader",
-            options: {
-              modules: true
-            }
+            options: { modules: true }
           },
           {
             loader: "sass-loader",
-            options: {
-              sourcemap: true
-            }
+            options: { sourcemap: true }
           }
         ]
       },
       {
-        test: /\.scss$/,
+        test: /\.s(a|c)ss$/,
+        exclude: /\.module.(s(a|c)ss)$/,
         use: [
-          {
-            loader: "style-loader"
-          },
-          {
-            loader: "css-loader",
-            options: {
-              sourceMap: true
-            }
-          },
+          "style-loader",
+          "css-loader",
           {
             loader: "sass-loader",
-            options: {
-              sourcemap: true
-            }
+            options: { sourcemap: true }
           }
         ]
       }

demo/app.js

@@ -10,7 +10,7 @@ import DEMO_TRANSCRIPT from './sample-data/KateDarling-bbcKaldiTranscriptWithSpe
 const DEMO_MEDIA_URL = 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4';
 const DEMO_TITLE = 'TED Talk | Kate Darling - Why we have an emotional connection to robots';
 
-import style from './index.module.css';
+import style from './index.module.scss';
 
 class App extends React.Component {
   constructor(props) {

package.json

@@ -38,7 +38,7 @@
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+      "\\.(css|scss|less)$": "<rootDir>/__mocks__/styleMock.js"
     }
   },
   "dependencies": {
@@ -92,6 +92,7 @@
     "gh-pages": "^2.0.1",
     "husky": "^1.1.3",
     "jest": "^24.7.1",
+    "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
     "prettier-stylelint": "^0.4.2",
     "react-testing-library": "^5.2.3",

packages/components/media-player/index.js

@@ -5,9 +5,9 @@ import { hotkeys } from 'react-keyboard-shortcuts';
 import PlayerControls from './src/PlayerControls';
 import ProgressBar from './src/ProgressBar';
 
-import returnHotKeys from './src/defaultHotKeys';
+import returnHotKeys from './src/config/defaultHotKeys';
 
-import styles from './index.module.css';
+import styles from './index.module.scss';
 
 import {
   secondsToTimecode,

packages/components/media-player/src/PlaybackRate.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Select from './Select';
 
-import style from './PlayerControls/index.module.css';
+import style from './PlayerControls/index.module.scss';
 
 class PlaybackRate extends React.Component {
 

packages/components/media-player/src/PlayerControls/TimeBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import style from './index.module.css';
+import style from './index.module.scss';
 
 class TimeBox extends React.Component {
 

packages/components/media-player/src/PlayerControls/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import style from './index.module.css';
-
 import {
   faSave,
   faTv,
@@ -19,18 +17,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PlaybackRate from '../PlaybackRate';
 import TimeBox from './TimeBox.js';
 
+import style from './index.module.scss';
+
 class PlayerControls extends React.Component {
 
   shouldComponentUpdate = (nextProps) => {
-    if (nextProps !== this.props) return true;
-
-    return false;
+    return nextProps !== this.props;
   }
 
-  // to handle backward and forward mouse pressed on btn
-  // set a 300 ms  interval to repeat the
-  // backward or forward function
-  // on mouseUp the interval is cleared
   setIntervalHelperBackward = () => {
     // this.props.skipBackward();
     this.interval = setInterval(() => {
@@ -115,7 +109,7 @@ class PlayerControls extends React.Component {
           <button
             value="Picture-in-picture"
             title="Picture-in-picture"
-            className={ style.playerButton + ' ' + style.pip }
+            className={ `${ style.playerButton } ${ style.pip }` }
             onClick={ this.props.pictureInPicture }>
             <FontAwesomeIcon icon={ faTv } />
           </button>

packages/components/media-player/src/ProgressBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import style from './ProgressBar.module.css';
+import style from './ProgressBar.module.scss';
 
 class ProgressBar extends React.Component {
 

packages/components/media-player/src/Select.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import style from './Select.module.css';
+import style from './Select.module.scss';
 
 class Select extends React.Component {
 

webpack.config.js

@@ -1,6 +1,9 @@
 // based on https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f
 // and http://jasonwatmore.com/post/2018/04/14/react-npm-how-to-publish-a-react-component-to-npm
 const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
 
 module.exports = {
   mode: 'production',
@@ -31,26 +34,41 @@ module.exports = {
   optimization: {
     minimize: true
   },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: isDevelopment ? '[name].css' : '[name].[hash].css',
+      chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
+    })
+  ],
   module: {
     rules: [
       {
-        test: /\.module.css$/,
+        test: /\.module.(sa|sc|c)ss$/,
         use: [
+          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
           {
-            loader: 'style-loader'
+            loader: 'css-loader',
+            options: { modules: true, sourcemap: isDevelopment }
           },
+          {
+            loader: 'sass-loader',
+            options: { sourcemap: isDevelopment }
+          }
+        ]
+      },
+      {
+        test: /\.s(a|c)ss$/,
+        exclude: /\.module.(s(a|c)ss)$/,
+        use: [
+          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
-            options: {
-              modules: true
-            }
+            options: { sourcemap: isDevelopment }
           },
           {
             loader: 'sass-loader',
-            options: {
-              modules: true
-            }
-          },
+            options: { sourcemap: isDevelopment }
+          }
         ]
       },
       {