ref(webpack): Remove less loader for modules (#11126)

src/sentry/static/sentry/app/components/flowLayout.jsx

@@ -1,38 +1,32 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-import 'app/../less/components/flowLayout.less';
+import styled from 'react-emotion';
 
-// Simple horizontal layout with vertical centering
-// Takes up remaining space of a flexbox container (i.e. "flex: 1")
-class FlowLayout extends React.Component {
-  static propTypes = {
-    /** Centers content via `justify-content` */
-    center: PropTypes.bool,
-    /** Changes flex direction to be column */
-    vertical: PropTypes.bool,
-    /** Applies "overflow: hidden" to container so that children can be truncated */
-    truncate: PropTypes.bool,
-  };
+const FlowLayout = styled('div')`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  flex-direction: ${p => (p.vertical ? 'column' : null)};
+  justify-content: ${p => (p.center ? 'center' : null)};
+  overflow: ${p => (p.truncate ? 'hidden' : null)};
+`;
 
-  static defaultProps = {
-    truncate: true,
-  };
+FlowLayout.propTypes = {
+  /**
+   * Centers content via `justify-content`
+   */
+  center: PropTypes.bool,
+  /**
+   * Changes flex direction to be column
+   */
+  vertical: PropTypes.bool,
+  /**
+   * Applies "overflow: hidden" to container so that children can be truncated
+   */
+  truncate: PropTypes.bool,
+};
 
-  render() {
-    let {className, children, truncate, vertical, center, ...otherProps} = this.props;
-    let cx = classNames('flow-layout', className, {
-      'is-vertical': vertical,
-      'is-center': center,
-      'is-truncated': truncate,
-    });
-
-    return (
-      <div className={cx} {...otherProps}>
-        {children}
-      </div>
-    );
-  }
-}
+FlowLayout.defaultProps = {
+  truncate: true,
+};
 
 export default FlowLayout;

src/sentry/static/sentry/app/components/toolbar.jsx

@@ -1,15 +1,12 @@
-import React from 'react';
-import classNames from 'classnames';
-import 'app/../less/components/toolbar.less';
+import styled from 'react-emotion';
 
-const Toolbar = ({className, children, ...otherProps}) => {
-  let cx = classNames('toolbar', className);
-
-  return (
-    <div className={cx} {...otherProps}>
-      {children}
-    </div>
-  );
-};
+const Toolbar = styled('div')`
+  background: ${p => p.theme.whiteDark};
+  border: 1px solid ${p => p.theme.borderLight};
+  border-bottom: none;
+  border-radius: 3px 3px 0 0;
+  box-shadow: 0 1px 0 ${p => p.theme.borderLight};
+  margin: 0;
+`;
 
 export default Toolbar;

src/sentry/static/sentry/app/components/toolbarHeader.jsx

@@ -1,15 +1,10 @@
-import React from 'react';
-import classNames from 'classnames';
-import 'app/../less/components/toolbarHeader.less';
+import styled from 'react-emotion';
 
-const ToolbarHeader = ({className, children, ...otherProps}) => {
-  let cx = classNames('toolbar-header', className);
-
-  return (
-    <div className={cx} {...otherProps}>
-      {children}
-    </div>
-  );
-};
+const ToolbarHeader = styled('div')`
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: ${p => p.theme.gray3};
+`;
 
 export default ToolbarHeader;

src/sentry/static/sentry/less/components/flowLayout.less

@@ -1,17 +0,0 @@
-.flow-layout {
-  display: flex;
-  flex: 1;
-  align-items: center;
-
-  &.is-vertical {
-    flex-direction: column;
-  }
-
-  &.is-truncated {
-    overflow: hidden;
-  }
-
-  &.is-center {
-    justify-content: center;
-  }
-}

src/sentry/static/sentry/less/components/toolbar.less

@@ -1,10 +0,0 @@
-@import '../palette.less';
-
-.toolbar {
-  background: @white-dark;
-  border: 1px solid @trim;
-  border-bottom: none;
-  border-radius: 3px 3px 0 0;
-  box-shadow: 0 1px 0 @trim;
-  margin: 0;
-}

src/sentry/static/sentry/less/components/toolbarHeader.less

@@ -1,8 +0,0 @@
-@import '../palette.less';
-
-.toolbar-header {
-  color: lighten(@gray, 10);
-  font-size: 12px;
-  text-transform: uppercase;
-  font-weight: bold;
-}

tests/js/spec/components/__snapshots__/toolbar.spec.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Toolbar renders 1`] = `
 <div
-  className="toolbar"
+  className="css-uvb3r7-Toolbar ehkx0bi0"
 >
   <div />
 </div>

tests/js/spec/components/__snapshots__/toolbarHeader.spec.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ToolbarHeader renders 1`] = `
 <div
-  className="toolbar-header"
+  className="css-1d016dc-ToolbarHeader eiwl27k0"
 >
   <div />
 </div>

tests/js/spec/views/__snapshots__/groupSimilarView.spec.jsx.snap

@@ -380,7 +380,7 @@ exports[`Issues Similar View renders with mocked data 1`] = `
             className="similar-toolbar"
           >
             <div
-              className="toolbar similar-toolbar"
+              className="similar-toolbar css-o93ry2-Toolbar ehkx0bi0"
             >
               <SpreadLayout
                 center={true}
@@ -398,7 +398,7 @@ exports[`Issues Similar View renders with mocked data 1`] = `
                     truncate={true}
                   >
                     <div
-                      className="flow-layout is-truncated"
+                      className="css-gmt0em-FlowLayout envzszi0"
                       style={
                         Object {
                           "flex": 1,
@@ -409,7 +409,7 @@ exports[`Issues Similar View renders with mocked data 1`] = `
                         truncate={true}
                       >
                         <div
-                          className="flow-layout is-truncated"
+                          className="css-gmt0em-FlowLayout envzszi0"
                         >
                           <div
                             className="similar-toolbar-actions"
@@ -509,7 +509,7 @@ exports[`Issues Similar View renders with mocked data 1`] = `
                       className="similar-score-column event-count-header"
                     >
                       <div
-                        className="toolbar-header similar-score-column event-count-header"
+                        className="similar-score-column event-count-header css-j72n3c-ToolbarHeader eiwl27k0"
                       >
                         Events
                       </div>
@@ -518,7 +518,7 @@ exports[`Issues Similar View renders with mocked data 1`] = `
                       className="similar-score-column event-similar-header"
                     >
                       <div
-                        className="toolbar-header similar-score-column event-similar-header"
+                        className="similar-score-column event-similar-header css-j72n3c-ToolbarHeader eiwl27k0"
                       >
                         Exception
                       </div>
@@ -527,7 +527,7 @@ exports[`Issues Similar View renders with mocked data 1`] = `
                       className="similar-score-column event-similar-header"
                     >
                       <div
-                        className="toolbar-header similar-score-column event-similar-header"
+                        className="similar-score-column event-similar-header css-j72n3c-ToolbarHeader eiwl27k0"
                       >
                         Message
                       </div>
@@ -619,13 +619,13 @@ exports[`Issues Similar View renders with mocked data 1`] = `
                   truncate={true}
                 >
                   <div
-                    className="flow-layout is-truncated"
+                    className="css-gmt0em-FlowLayout envzszi0"
                   >
                     <FlowLayout
                       truncate={true}
                     >
                       <div
-                        className="flow-layout is-truncated"
+                        className="css-gmt0em-FlowLayout envzszi0"
                       >
                         <div
                           className="action-column"

webpack.config.js

@@ -124,24 +124,6 @@ var appConfig = {
           },
         ],
       },
-      // loader for dynamic styles imported into components (embedded as js)
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              minimize: IS_PRODUCTION,
-            },
-          },
-          {
-            loader: 'less-loader',
-          },
-        ],
-      },
       {
         test: /\.css/,
         use: [
@@ -214,7 +196,7 @@ var appConfig = {
         : path.join(__dirname, 'src/sentry/integration-docs/_platforms.json'),
     },
     modules: [path.join(__dirname, staticPrefix), 'node_modules'],
-    extensions: ['.less', '.jsx', '.js', '.json'],
+    extensions: ['.jsx', '.js', '.json'],
   },
   output: {
     path: distPath,