Skip to content

Commit

Permalink
Task: Move to scss, update and optimise webpack
Browse files Browse the repository at this point in the history
  • Loading branch information
jamesdools committed Aug 20, 2019
1 parent 9866f23 commit b77f25a
Show file tree
Hide file tree
Showing 18 changed files with 67 additions and 53 deletions.
3 changes: 2 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
],
"env": {
"browser": true,
"jest": true
"jest": true,
"node": true,
},
"rules": {
"prefer-const": 1,
Expand Down
32 changes: 9 additions & 23 deletions .storybook/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
}
]
}
Expand Down
2 changes: 1 addition & 1 deletion demo/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
File renamed without changes.
20 changes: 17 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/components/media-player/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/components/media-player/src/PlaybackRate.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down
Original file line number Diff line number Diff line change
@@ -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 {

Expand Down
14 changes: 4 additions & 10 deletions packages/components/media-player/src/PlayerControls/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';

import style from './index.module.css';

import {
faSave,
faTv,
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/media-player/src/ProgressBar.js
Original file line number Diff line number Diff line change
@@ -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 {

Expand Down
2 changes: 1 addition & 1 deletion packages/components/media-player/src/Select.js
Original file line number Diff line number Diff line change
@@ -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 {

Expand Down
36 changes: 27 additions & 9 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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 }
}
]
},
{
Expand Down

0 comments on commit b77f25a

Please sign in to comment.