refactor: upgrade webpack deps (#1939)

Author: visualfanatic

package-lock.json

@@ -94,26 +94,26 @@
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "core-js": "3.6.5",
     "cross-env": "7.0.2",
-    "css-loader": "3.5.2",
+    "css-loader": "6.5.1",
     "eslint": "6.8.0",
     "eslint-plugin-jest": "23.8.2",
     "eslint-plugin-react": "7.19.0",
     "http-server": "14.0.0",
     "jest": "24.8.0",
     "madge": "5.0.1",
     "marked": "0.8.2",
-    "node-sass": "6.0.0",
+    "node-sass": "6.0.1",
     "null-loader": "4.0.1",
     "path-to-regexp": "3.2.0",
     "puppeteer": "3.0.0",
     "react-test-renderer": "16.13.1",
     "request": "2.88.2",
     "request-promise": "4.2.5",
-    "sass-loader": "11.1.1",
+    "sass-loader": "12.3.0",
     "semantic-release": "17.4.6",
-    "style-loader": "1.1.2",
+    "style-loader": "3.3.1",
     "svg-prep": "1.0.4",
-    "webpack": "5.61.0",
+    "webpack": "5.64.4",
     "webpack-cli": "4.9.1",
     "yaml": "1.10.0"
   },

package.json

@@ -13,7 +13,7 @@ import Parse                     from 'parse';
 import Pill                      from 'components/Pill/Pill.react';
 import React, { Component }      from 'react';
 import styles                    from 'components/BrowserCell/BrowserCell.scss';
-import { unselectable }          from 'stylesheets/base.scss';
+import baseStyles                from 'stylesheets/base.scss';
 import Tooltip                   from '../Tooltip/PopperTooltip.react';
 import * as ColumnPreferences    from 'lib/ColumnPreferences';
 
@@ -34,7 +34,7 @@ export default class BrowserCell extends Component {
     let content = this.props.value;
     let isNewRow = this.props.row < 0;
     this.copyableValue = content;
-    let classes = [styles.cell, unselectable];
+    let classes = [styles.cell, baseStyles.unselectable];
     if (this.props.hidden) {
       content = this.props.value !== undefined || !isNewRow ? '(hidden)' : this.props.isRequired ? '(required)' : '(undefined)';
       classes.push(styles.empty);

src/components/BrowserCell/BrowserCell.react.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { unselectable } from 'stylesheets/base.scss';
+import baseStyles       from 'stylesheets/base.scss';
 import PropTypes        from 'lib/PropTypes';
 import React            from 'react';
 import styles           from 'components/Button/Button.scss';
@@ -14,7 +14,7 @@ const noop = () => {};
 
 let Button = (props) => {
   const hasOnClick = props.onClick && !props.disabled;
-  let classes = [styles.button, unselectable];
+  let classes = [styles.button, baseStyles.unselectable];
   // if a button is disabled, that overrides any color selection
   if (props.disabled) {
     classes.push(styles.disabled);

src/components/Button/Button.react.js

@@ -5,10 +5,10 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { center } from 'stylesheets/base.scss'
-import PropTypes from 'lib/PropTypes';
-import React     from 'react';
-import styles    from 'components/CascadingView/CascadingView.scss';
+import baseStyles from 'stylesheets/base.scss'
+import PropTypes  from 'lib/PropTypes';
+import React      from 'react';
+import styles     from 'components/CascadingView/CascadingView.scss';
 
 export default class CascadingView extends React.Component {
   constructor() {
@@ -24,7 +24,7 @@ export default class CascadingView extends React.Component {
       href='javascript:;'
       role='button'
       className={styles.right}>
-      <div className={[center, this.state.expanded ? styles.expanded : styles.collapsed].join(' ') } />
+      <div className={[baseStyles.center, this.state.expanded ? styles.expanded : styles.collapsed].join(' ') } />
     </a>;
     let childrenContainer = this.state.expanded ? (<div className={styles.childrenContainer}>
       <div className={styles.children}>{children}</div>

src/components/CascadingView/CascadingView.react.js

@@ -8,7 +8,7 @@
 import PropTypes                  from 'lib/PropTypes';
 import React                      from 'react';
 import styles                     from 'components/DataBrowserHeader/DataBrowserHeader.scss';
-import { unselectable }           from 'stylesheets/base.scss';
+import baseStyles                 from 'stylesheets/base.scss';
 import { DragSource, DropTarget } from 'react-dnd';
 
 const Types = {
@@ -55,7 +55,7 @@ const dataBrowserHeaderSource = {
 class DataBrowserHeader extends React.Component {
   render() {
     let { connectDragSource, connectDropTarget, name, type, targetClass, order, style, isDragging, isOver } = this.props;
-    let classes = [styles.header, unselectable];
+    let classes = [styles.header, baseStyles.unselectable];
     if (order) {
       classes.push(styles[order]);
     }

src/components/DataBrowserHeader/DataBrowserHeader.react.js

@@ -11,7 +11,7 @@ import PropTypes    from 'lib/PropTypes';
 import React        from 'react';
 import styles       from 'components/EmptyState/EmptyState.scss';
 import stylesButton from 'components/Button/Button.scss';
-import { center }   from 'stylesheets/base.scss';
+import baseStyles   from 'stylesheets/base.scss';
 
 let ctaButton = (cta, action) => {
   if (cta) {
@@ -44,7 +44,7 @@ let EmptyState = ({
   secondaryCta='',
   secondaryAction=() => {},
 }) => (
-  <div className={center}>
+  <div className={baseStyles.center}>
     <div className={styles.icon}>
       <Icon
         width={80}

src/components/EmptyState/EmptyState.react.js

@@ -14,7 +14,7 @@ import PropTypes             from 'lib/PropTypes';
 import React                 from 'react';
 import ReactDOM              from 'react-dom';
 import styles                from 'components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss';
-import { verticalCenter }    from 'stylesheets/base.scss';
+import baseStyles            from 'stylesheets/base.scss';
 
 export default class ExplorerActiveChartButton extends React.Component {
   constructor() {
@@ -62,7 +62,7 @@ export default class ExplorerActiveChartButton extends React.Component {
     if (!this.props.disableDropdown) {
       dropdown = (
         <div
-          className={[styles.rightArrow, verticalCenter].join(' ')}
+          className={[styles.rightArrow, baseStyles.verticalCenter].join(' ')}
           onClick={() => {
             let position = Position.inDocument(this.node);
             let align = Directions.LEFT;
@@ -82,7 +82,7 @@ export default class ExplorerActiveChartButton extends React.Component {
     return (
       <div className={styles.button}>
         <div
-          className={[styles.checkbox, verticalCenter].join(' ')}
+          className={[styles.checkbox, baseStyles.verticalCenter].join(' ')}
           onClick={this.handleCheckbox.bind(this)}
           style={{
             backgroundColor: this.state.active ? this.props.color : null,

src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import base           from 'stylesheets/base.scss';
+import baseStyles     from 'stylesheets/base.scss';
 import Button         from 'components/Button/Button.react';
 import ChromeDropdown from 'components/ChromeDropdown/ChromeDropdown.react';
 import DateTimeEntry  from 'components/DateTimeEntry/DateTimeEntry.react';
@@ -584,12 +584,12 @@ export default class ExplorerQueryComposer extends React.Component {
       return (
         <div className={styles.queryComposer}>
           <div className={styles.header}>
-            <div className={[base.center, styles.headerView].join(' ')}>
+            <div className={[baseStyles.center, styles.headerView].join(' ')}>
               <h3 className={styles.headerLabel}>{query.name}</h3>
             </div>
           </div>
           <div className={styles.footer}>
-            <div className={[base.center, styles.boxContent].join(' ')}>
+            <div className={[baseStyles.center, styles.boxContent].join(' ')}>
               <Button
                 width='100%'
                 value='Dismiss query'
@@ -606,7 +606,7 @@ export default class ExplorerQueryComposer extends React.Component {
 
     if (!isNew && this.state.editing) {
       headerView = (
-        <div className={[base.center, styles.headerView].join(' ')}>
+        <div className={[baseStyles.center, styles.headerView].join(' ')}>
           <input
             type='text'
             className={[styles.headerLabel, styles.textInput].join(' ')}
@@ -631,7 +631,7 @@ export default class ExplorerQueryComposer extends React.Component {
       );
     } else {
       headerView = (
-        <div className={[base.center, styles.headerView].join(' ')}>
+        <div className={[baseStyles.center, styles.headerView].join(' ')}>
           <h3 className={styles.headerLabel}>{ this.state.name || 'Build a custom query' }</h3>
           { isNew ? null : <a
             href='javascript:;'

src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import base          from 'stylesheets/base.scss';
+import baseStyles    from 'stylesheets/base.scss';
 import Button        from 'components/Button/Button.react';
 import CascadingView from 'components/CascadingView/CascadingView.react';
 import PropTypes     from 'lib/PropTypes';
@@ -16,7 +16,7 @@ let ExplorerQueryPicker = ({ queries, onCompose, onSelect, onDelete }) => {
   return (
     <div className={styles.queryPicker}>
       <div className={styles.header}>
-        <h3 className={base.verticalCenter}>Choose a query to visualize</h3>
+        <h3 className={baseStyles.verticalCenter}>Choose a query to visualize</h3>
       </div>
       <div className={styles.queryContainer}>
         {queries.map((queryGroup) => {
@@ -68,7 +68,7 @@ let ExplorerQueryPicker = ({ queries, onCompose, onSelect, onDelete }) => {
         })}
       </div>
       <div className={styles.footer}>
-        <div className={base.center} style={{ width:'95%' }}>
+        <div className={baseStyles.center} style={{ width:'95%' }}>
           <Button
             width='100%'
             value='Build a custom query'