From b77f25a98c27fe4ecd91552c6dd9c356c93e5855 Mon Sep 17 00:00:00 2001 From: James Dooley Date: Tue, 20 Aug 2019 11:04:09 +0100 Subject: [PATCH] Task: Move to scss, update and optimise webpack --- .eslintrc | 3 +- .storybook/webpack.config.js | 32 +++++------------ demo/app.js | 2 +- demo/{index.module.css => index.module.scss} | 0 package-lock.json | 20 +++++++++-- package.json | 1 + packages/components/media-player/index.js | 4 +-- .../{index.module.css => index.module.scss} | 0 .../media-player/src/PlaybackRate.js | 2 +- .../src/PlayerControls/TimeBox.js | 2 +- .../media-player/src/PlayerControls/index.js | 14 +++----- .../{index.module.css => index.module.scss} | 0 .../media-player/src/ProgressBar.js | 2 +- ...Bar.module.css => ProgressBar.module.scss} | 0 .../components/media-player/src/Select.js | 2 +- .../{Select.module.css => Select.module.scss} | 0 .../src/{ => config}/defaultHotKeys.js | 0 webpack.config.js | 36 ++++++++++++++----- 18 files changed, 67 insertions(+), 53 deletions(-) rename demo/{index.module.css => index.module.scss} (100%) rename packages/components/media-player/{index.module.css => index.module.scss} (100%) rename packages/components/media-player/src/PlayerControls/{index.module.css => index.module.scss} (100%) rename packages/components/media-player/src/{ProgressBar.module.css => ProgressBar.module.scss} (100%) rename packages/components/media-player/src/{Select.module.css => Select.module.scss} (100%) rename packages/components/media-player/src/{ => config}/defaultHotKeys.js (100%) diff --git a/.eslintrc b/.eslintrc index 3b8e34c4..c62b046f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -10,7 +10,8 @@ ], "env": { "browser": true, - "jest": true + "jest": true, + "node": true, }, "rules": { "prefer-const": 1, diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index ca9ca8a1..f95b7d04 100644 --- a/.storybook/webpack.config.js +++ b/.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 } } ] } diff --git a/demo/app.js b/demo/app.js index 9ab2f389..2330f850 100644 --- a/demo/app.js +++ b/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) { diff --git a/demo/index.module.css b/demo/index.module.scss similarity index 100% rename from demo/index.module.css rename to demo/index.module.scss diff --git a/package-lock.json b/package-lock.json index 386f663c..2b104994 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1850,6 +1850,19 @@ "regenerator-runtime": "^0.12.1", "semver": "^5.6.0", "webpack": "^4.29.0" + }, + "dependencies": { + "mini-css-extract-plugin": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", + "integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "schema-utils": "^1.0.0", + "webpack-sources": "^1.1.0" + } + } } }, "@storybook/router": { @@ -10744,12 +10757,13 @@ } }, "mini-css-extract-plugin": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", - "integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==", + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz", + "integrity": "sha512-MNpRGbNA52q6U92i0qbVpQNsgk7LExy41MdAlG84FeytfDOtRIf/mCHdEgG8rpTKOaNKiqUnZdlptF469hxqOw==", "dev": true, "requires": { "loader-utils": "^1.1.0", + "normalize-url": "1.9.1", "schema-utils": "^1.0.0", "webpack-sources": "^1.1.0" } diff --git a/package.json b/package.json index 6d150c41..61453765 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/components/media-player/index.js b/packages/components/media-player/index.js index b8aceea8..0ea7e52e 100644 --- a/packages/components/media-player/index.js +++ b/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, diff --git a/packages/components/media-player/index.module.css b/packages/components/media-player/index.module.scss similarity index 100% rename from packages/components/media-player/index.module.css rename to packages/components/media-player/index.module.scss diff --git a/packages/components/media-player/src/PlaybackRate.js b/packages/components/media-player/src/PlaybackRate.js index a45d43cf..169927e8 100644 --- a/packages/components/media-player/src/PlaybackRate.js +++ b/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 { diff --git a/packages/components/media-player/src/PlayerControls/TimeBox.js b/packages/components/media-player/src/PlayerControls/TimeBox.js index 6f8278ed..96eb57f1 100644 --- a/packages/components/media-player/src/PlayerControls/TimeBox.js +++ b/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 { diff --git a/packages/components/media-player/src/PlayerControls/index.js b/packages/components/media-player/src/PlayerControls/index.js index fd12c5bc..f2e1d9ba 100644 --- a/packages/components/media-player/src/PlayerControls/index.js +++ b/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 { diff --git a/packages/components/media-player/src/PlayerControls/index.module.css b/packages/components/media-player/src/PlayerControls/index.module.scss similarity index 100% rename from packages/components/media-player/src/PlayerControls/index.module.css rename to packages/components/media-player/src/PlayerControls/index.module.scss diff --git a/packages/components/media-player/src/ProgressBar.js b/packages/components/media-player/src/ProgressBar.js index a074545e..33e51d5b 100644 --- a/packages/components/media-player/src/ProgressBar.js +++ b/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 { diff --git a/packages/components/media-player/src/ProgressBar.module.css b/packages/components/media-player/src/ProgressBar.module.scss similarity index 100% rename from packages/components/media-player/src/ProgressBar.module.css rename to packages/components/media-player/src/ProgressBar.module.scss diff --git a/packages/components/media-player/src/Select.js b/packages/components/media-player/src/Select.js index 1825a768..bdccaa0a 100644 --- a/packages/components/media-player/src/Select.js +++ b/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 { diff --git a/packages/components/media-player/src/Select.module.css b/packages/components/media-player/src/Select.module.scss similarity index 100% rename from packages/components/media-player/src/Select.module.css rename to packages/components/media-player/src/Select.module.scss diff --git a/packages/components/media-player/src/defaultHotKeys.js b/packages/components/media-player/src/config/defaultHotKeys.js similarity index 100% rename from packages/components/media-player/src/defaultHotKeys.js rename to packages/components/media-player/src/config/defaultHotKeys.js diff --git a/webpack.config.js b/webpack.config.js index be2f5452..782fb816 100644 --- a/webpack.config.js +++ b/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 } + } ] }, {