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'

src/components/ExplorerQueryPicker/ExplorerQueryPicker.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 { centered } from 'components/Field/Field.scss';
+import fieldStyles  from 'components/Field/Field.scss';
 import PropTypes    from 'lib/PropTypes';
 import React        from 'react';
 import styles       from 'components/Label/Label.scss';
@@ -14,7 +14,7 @@ let Label = (props) => {
   let padding = (props.padding || 20) + 'px';
   return (
     <div
-      className={[styles.label, centered].join(' ')}
+      className={[styles.label, fieldStyles.centered].join(' ')}
       style={{ padding: '0 ' + padding }}>
       <div className={styles.text}>{props.text}</div>
       {props.description ? <div className={styles.description}>{props.description}</div> : null}

src/components/Label/Label.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 { center } from 'stylesheets/base.scss';
+import baseStyles from 'stylesheets/base.scss';
 import Loader from 'components/Loader/Loader.react';
 import React  from 'react';
 
@@ -21,7 +21,7 @@ export const demos = [
           margin: '10px auto',
           position: 'relative'
         }}>
-          <Loader className={center} />
+          <Loader className={baseStyles.center} />
         </div>
       );
     }

src/components/Loader/Loader.example.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 { center }   from 'stylesheets/base.scss';
+import baseStyles   from 'stylesheets/base.scss';
 import Loader       from 'components/Loader/Loader.react';
 import PropTypes    from 'lib/PropTypes';
 import React        from 'react';
@@ -19,7 +19,7 @@ const LoaderContainer = ({ loading, hideAnimation, children, solid = true }) =>
       {children}
     </div>
     <div className={[styles.loaderParent, loading ? styles.visible : '', solid ? styles.solid : ''].join(' ')}>
-      {(hideAnimation || !loading) ? null : <Loader className={center}/>}
+      {(hideAnimation || !loading) ? null : <Loader className={baseStyles.center}/>}
     </div>
   </div>
 );

src/components/LoaderContainer/LoaderContainer.react.js

@@ -5,11 +5,11 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import CSRFInput from 'components/CSRFInput/CSRFInput.react';
-import Icon               from 'components/Icon/Icon.react';
-import React              from 'react';
-import styles             from 'components/LoginForm/LoginForm.scss';
-import { verticalCenter } from 'stylesheets/base.scss';
+import CSRFInput  from 'components/CSRFInput/CSRFInput.react';
+import Icon       from 'components/Icon/Icon.react';
+import React      from 'react';
+import styles     from 'components/LoginForm/LoginForm.scss';
+import baseStyles from 'stylesheets/base.scss';
 
 // Class-style component, because we need refs
 export default class LoginForm extends React.Component {
@@ -26,7 +26,7 @@ export default class LoginForm extends React.Component {
           <div className={styles.header}>{this.props.header}</div>
           {this.props.children}
           <div className={styles.footer}>
-            <div className={verticalCenter} style={{ width: '100%' }}>
+            <div className={baseStyles.verticalCenter} style={{ width: '100%' }}>
               {this.props.footer}
             </div>
           </div>

src/components/LoginForm/LoginForm.react.js

@@ -5,9 +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,
-   verticalCenter }     from 'stylesheets/base.scss';
+import baseStyles       from 'stylesheets/base.scss';
 import Button           from 'components/Button/Button.react';
 import Checkbox         from 'components/Checkbox/Checkbox.react';
 import Icon             from 'components/Icon/Icon.react';
@@ -1155,7 +1153,7 @@ export default class PermissionsDialog extends React.Component {
   }
 
   render() {
-    let classes = [styles.dialog, unselectable];
+    let classes = [styles.dialog, baseStyles.unselectable];
 
     // for 3-column CLP dialog
     if (this.props.advanced) {
@@ -1300,7 +1298,7 @@ export default class PermissionsDialog extends React.Component {
                 onClick={() => this.props.onConfirm(this.outputPerms())}
               />
             </div>
-            <div className={[styles.details, verticalCenter].join(' ')}>
+            <div className={[styles.details, baseStyles.verticalCenter].join(' ')}>
               {this.props.details}
             </div>
           </div>

src/components/PermissionsDialog/PermissionsDialog.react.js

@@ -19,9 +19,7 @@ import styles             from 'components/ProtectedFieldsDialog/ProtectedFields
 import MultiSelect        from 'components/MultiSelect/MultiSelect.react';
 import MultiSelectOption  from 'components/MultiSelect/MultiSelectOption.react';
 import TrackVisibility    from 'components/TrackVisibility/TrackVisibility.react';
-import { 
-  unselectable,
-  verticalCenter }        from 'stylesheets/base.scss';
+import baseStyles         from 'stylesheets/base.scss';
 
 let origin = new Position(0, 0);
 const intersectionMargin = '10px 0px 0px 20px';
@@ -446,7 +444,7 @@ export default class ProtectedFieldsDialog extends React.Component {
   }
 
   render() {
-    let classes = [styles.dialog, unselectable];
+    let classes = [styles.dialog, baseStyles.unselectable];
 
     let placeholderText = 'Role/User id/name * or authenticated\u2026';
 
@@ -510,7 +508,7 @@ export default class ProtectedFieldsDialog extends React.Component {
                 onClick={() => this.props.onConfirm(this.outputPerms())}
               />
             </div>
-            <div className={[styles.details, verticalCenter].join(' ')}>
+            <div className={[styles.details, baseStyles.verticalCenter].join(' ')}>
               {this.props.details}
             </div>
           </div>

src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.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 { input } from 'components/Field/Field.scss';
-import PropTypes from 'lib/PropTypes';
-import React     from 'react';
-import styles    from 'components/Range/Range.scss';
+import fieldStyles from 'components/Field/Field.scss';
+import PropTypes   from 'lib/PropTypes';
+import React       from 'react';
+import styles      from 'components/Range/Range.scss';
 
 const DEFAULT_COLOR = '#fd9539';
 
@@ -66,7 +66,7 @@ export default class Range extends React.Component {
       <div
         style={wrapperStyle}
         ref={this.metricsRef}
-        className={[styles.range, input].join(' ')}>
+        className={[styles.range, fieldStyles.input].join(' ')}>
         {tracker}
         <input
           type='range'