Remove component stylesheet imports

ui/src/configuration/components/CreateVariableOverlay.tsx

@@ -1,9 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
 
-// Styles
-import 'src/organizations/components/CreateVariableOverlay.scss'
-
 // Components
 import {Overlay} from 'src/clockface'
 import VariableForm from 'src/organizations/components/VariableForm'

ui/src/configuration/components/LabelOverlayForm.tsx

@@ -19,9 +19,6 @@ const MAX_LABEL_CHARS = 50
 // Utils
 import {validateHexCode} from 'src/configuration/utils/labels'
 
-// Styles
-import 'src/configuration/components/LabelOverlayForm.scss'
-
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 

ui/src/configuration/components/RandomLabelColor.tsx

@@ -6,9 +6,6 @@ import {randomPresetColor} from 'src/configuration/utils/labels'
 import {IconFont} from 'src/clockface'
 import {validateHexCode} from 'src/configuration/utils/labels'
 
-// Styles
-import 'src/configuration/components/RandomLabelColor.scss'
-
 // Constants
 import {INPUT_ERROR_COLOR} from 'src/configuration/constants/LabelColors'
 

ui/src/dashboards/components/NoteEditor.tsx

@@ -20,9 +20,6 @@ import {
   setNote,
 } from 'src/dashboards/actions/notes'
 
-// Styles
-import 'src/dashboards/components/NoteEditor.scss'
-
 // Types
 import {AppState} from 'src/types/v2'
 

ui/src/dashboards/components/VEO.tsx

@@ -33,9 +33,6 @@ import {VEO_TIME_MACHINE_ID} from 'src/timeMachine/constants'
 // Nofication Messages
 import {cellAddFailed} from 'src/shared/copy/notifications'
 
-// Styles
-import './VEO.scss'
-
 interface StateProps {
   draftView: QueryView
   existingView?: QueryView

ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx

@@ -12,9 +12,6 @@ import {selectVariableValue} from 'src/dashboards/actions/index'
 // Utils
 import {getValuesForVariable} from 'src/variables/selectors'
 
-// Styles
-import 'src/dashboards/components/variablesControlBar/VariableDropdown.scss'
-
 // Types
 import {AppState} from 'src/types/v2'
 

ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx

@@ -14,9 +14,6 @@ import {
   getDashboardValuesStatus,
 } from 'src/variables/selectors'
 
-// Styles
-import 'src/dashboards/components/variablesControlBar/VariablesControlBar.scss'
-
 // Types
 import {AppState} from 'src/types/v2'
 import {Variable} from '@influxdata/influx'

ui/src/dataExplorer/components/DataExplorer.tsx

@@ -16,9 +16,6 @@ import {DE_TIME_MACHINE_ID} from 'src/timeMachine/constants'
 import {HoverTimeProvider} from 'src/dashboards/utils/hoverTime'
 import {queryBuilderFetcher} from 'src/timeMachine/apis/QueryBuilderFetcher'
 
-// Styles
-import './DataExplorer.scss'
-
 interface DispatchProps {
   onSetActiveTimeMachine: typeof setActiveTimeMachine
 }

ui/src/dataExplorer/components/SaveAsButton.tsx

@@ -5,9 +5,6 @@ import {withRouter, WithRouterProps} from 'react-router'
 // Components
 import {IconFont, Button, ComponentColor} from '@influxdata/clockface'
 
-// Styles
-import 'src/dataExplorer/components/SaveAsButton.scss'
-
 class SaveAsButton extends PureComponent<WithRouterProps, {}> {
   public render() {
     return (

ui/src/dataExplorer/components/SaveAsOverlay.tsx

@@ -7,9 +7,6 @@ import SaveAsTaskForm from 'src/dataExplorer/components/SaveAsTaskForm'
 import SaveAsVariable from 'src/dataExplorer/components/SaveAsVariable'
 import {Radio, Overlay} from 'src/clockface'
 
-// Styles
-import 'src/dataExplorer/components/SaveAsButton.scss'
-
 enum SaveAsOption {
   Dashboard = 'dashboard',
   Task = 'task',

ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx

@@ -24,9 +24,6 @@ import {
   setPluginConfiguration,
 } from 'src/dataLoaders/actions/dataLoaders'
 
-// Styles
-import 'src/dataLoaders/components/DataLoadersOverlay.scss'
-
 // Types
 import {Links} from 'src/types/v2/links'
 import {Substep, TelegrafPlugin} from 'src/types/v2/dataLoaders'

ui/src/dataLoaders/components/lineProtocolWizard/configure/LineProtocolTabs.tsx

@@ -3,16 +3,12 @@ import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 
+// Components
+import {Grid, Columns} from 'src/clockface'
 import PrecisionDropdown from 'src/dataLoaders/components/lineProtocolWizard/configure/PrecisionDropdown'
 import TabSelector from 'src/dataLoaders/components/lineProtocolWizard/configure/TabSelector'
 import TabBody from 'src/dataLoaders/components/lineProtocolWizard/configure/TabBody'
 
-// Types
-import {LineProtocolTab} from 'src/types/v2/dataLoaders'
-
-// Components
-import {Grid, Columns} from 'src/clockface'
-
 // Actions
 import {
   setLineProtocolBody,
@@ -21,10 +17,9 @@ import {
   setPrecision,
 } from 'src/dataLoaders/actions/dataLoaders'
 
+// Types
+import {LineProtocolTab} from 'src/types/v2/dataLoaders'
 import {AppState} from 'src/types/v2/index'
-
-// Styles
-import 'src/clockface/components/auto_input/AutoInput.scss'
 import {WritePrecision} from '@influxdata/influx'
 
 interface OwnProps {

ui/src/dataLoaders/components/side_bar/SideBar.tsx

@@ -7,9 +7,6 @@ import SideBarTab from 'src/dataLoaders/components/side_bar/SideBarTab'
 import SideBarButton from 'src/dataLoaders/components/side_bar/SideBarButton'
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 
-// Styles
-import './SideBar.scss'
-
 export enum SideBarTabStatus {
   Default = 'default',
   Error = 'error',

ui/src/me/components/GettingStarted.tsx

@@ -12,9 +12,6 @@ import CollectorGraphic from 'src/me/graphics/CollectorGraphic'
 // Types
 import {Organization} from 'src/types/v2'
 
-// Styles
-import 'src/me/components/GettingStarted.scss'
-
 interface StateProps {
   orgs: Organization[]
 }

ui/src/me/containers/MePage.tsx

@@ -2,9 +2,6 @@
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 
-// Styles
-import 'src/me/containers/MePage.scss'
-
 // Components
 import {Grid, Columns} from 'src/clockface'
 import {Page} from 'src/pageLayout'

ui/src/me/graphics/CollectorGraphic.tsx

@@ -1,9 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
 
-// Styles
-import 'src/me/graphics/CollectorGraphic.scss'
-
 export default class GettingStarted extends PureComponent {
   public render() {
     return (

ui/src/me/graphics/DashboardingGraphic.tsx

@@ -1,9 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
 
-// Styles
-import 'src/me/graphics/DashboardingGraphic.scss'
-
 export default class GettingStarted extends PureComponent {
   public render() {
     return (

ui/src/me/graphics/ExploreGraphic.tsx

@@ -1,9 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
 
-// Styles
-import 'src/me/graphics/ExploreGraphic.scss'
-
 export default class GettingStarted extends PureComponent {
   public render() {
     return (

ui/src/organizations/components/OrgTaskPage.tsx

@@ -35,9 +35,6 @@ import {
   TaskSchedule,
 } from 'src/utils/taskOptionsToFluxScript'
 
-// Styles
-import 'src/tasks/components/TaskForm.scss'
-
 interface PassedInProps {
   router: InjectedRouter
   params: {orgID: string}

ui/src/organizations/components/Retention.tsx

@@ -12,8 +12,6 @@ import {
   secondsToDuration,
 } from 'src/utils/formatting'
 
-import 'src/organizations/components/Retention.scss'
-
 import {BucketRetentionRules} from '@influxdata/influx'
 
 interface Props {

ui/src/organizations/components/TelegrafConfigOverlay.tsx

@@ -20,9 +20,6 @@ import {client} from 'src/utils/api'
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'
 
-// Styles
-import 'src/organizations/components/TelegrafConfigOverlay.scss'
-
 // Types
 import {AppState} from 'src/types/v2'
 

ui/src/organizations/components/TelegrafExplainer.tsx

@@ -4,9 +4,6 @@ import React, {SFC} from 'react'
 // Components
 import {Panel} from 'src/clockface'
 
-// Styles
-import 'src/organizations/components/TelegrafExplainer.scss'
-
 const TelegrafExplainer: SFC = () => (
   <Panel className="telegraf-explainer">
     <Panel.Header title="What is Telegraf?" />

ui/src/organizations/components/VariableForm.tsx

@@ -1,9 +1,6 @@
 // Libraries
 import React, {PureComponent, ChangeEvent} from 'react'
 
-// Styles
-import 'src/organizations/components/CreateVariableOverlay.scss'
-
 // Components
 import {Form, Input, Grid} from 'src/clockface'
 import {Button} from '@influxdata/clockface'

ui/src/pageLayout/components/RenamablePageTitle.tsx

@@ -9,9 +9,6 @@ import {ClickOutside} from 'src/shared/components/ClickOutside'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-// Styles
-import 'src/pageLayout/components/RenamablePageTitle.scss'
-
 interface Props {
   onRename: (name: string) => void
   name: string

ui/src/pageLayout/containers/Nav.tsx

@@ -10,9 +10,6 @@ import NavMenu from 'src/pageLayout/components/NavMenu'
 import {MeState, AppState} from 'src/types/v2'
 import {IconFont} from 'src/clockface'
 
-// Styles
-import '../PageLayout.scss'
-
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props extends WithRouterProps {

ui/src/shared/components/BoxTooltip.tsx

@@ -5,9 +5,6 @@ import {createPortal} from 'react-dom'
 // Constants
 import {TOOLTIP_PORTAL_ID} from 'src/shared/components/TooltipPortal'
 
-// Styles
-import 'src/shared/components/BoxTooltip.scss'
-
 interface Props {
   triggerRect: DOMRect
   children: JSX.Element

ui/src/shared/components/ColorSchemeDropdown.tsx

@@ -10,9 +10,6 @@ import {
   DEFAULT_LINE_COLORS,
 } from 'src/shared/constants/graphColorPalettes'
 
-// Styles
-import 'src/shared/components/ColorSchemeDropdown.scss'
-
 // Types
 import {Color} from 'src/types/colors'
 

ui/src/shared/components/DragAndDrop.scss

@@ -33,14 +33,14 @@
     display: none;
   }
   .drag-and-drop--graphic {
-    background-image: url('../../../assets/images/drag-n-drop.svg');
+    background-image: url('../../assets/images/drag-n-drop.svg');
     background-size: 100% 100%;
     background-position: center center;
     width: 90px;
     height: 90px;
     color: $g6-smoke; 
     &.success {
-      background-image: url('../../../assets/images/drag-n-drop.svg'); 
+      background-image: url('../../assets/images/drag-n-drop.svg'); 
     }
   }
   .drag-and-drop--header {

ui/src/shared/components/DragAndDrop.tsx

@@ -7,8 +7,6 @@ import {
   ButtonType,
 } from '@influxdata/clockface'
 
-import './DragAndDrop.scss'
-
 interface Props {
   fileTypesToAccept?: string
   containerClass?: string

ui/src/shared/components/EditableName.tsx

@@ -13,9 +13,6 @@ import {RemoteDataState} from 'src/types'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-// Styles
-import 'src/shared/components/EditableName.scss'
-
 interface PassedProps {
   onUpdate: (name: string) => void
   name: string

ui/src/shared/components/ExportOverlay.tsx

@@ -22,9 +22,6 @@ import {
 import {downloadTextFile} from 'src/shared/utils/download'
 import {addOrgIDToTemplate} from 'src/shared/utils/resourceToTemplate'
 
-// Styles
-import 'src/shared/components/ExportOverlay.scss'
-
 // Types
 import {DocumentCreate} from '@influxdata/influx'
 

ui/src/shared/components/HistogramTooltip.tsx

@@ -6,8 +6,6 @@ import {format} from 'd3-format'
 
 import {TOOLTIP_PORTAL_ID} from 'src/shared/components/TooltipPortal'
 
-import 'src/shared/components/HistogramTooltip.scss'
-
 const formatLarge = format('.4~s')
 const formatSmall = format('.4~g')
 const formatBin = n => (n < 1 && n > -1 ? formatSmall(n) : formatLarge(n))

ui/src/shared/components/HoverTimeMarker.tsx

@@ -1,7 +1,5 @@
 import React, {SFC} from 'react'
 
-import 'src/shared/components/HoverTimeMarker.scss'
-
 interface Props {
   x: number
 }

ui/src/shared/components/ImportOverlay.tsx

@@ -9,9 +9,6 @@ import {ComponentStatus, FormElement, Form, Overlay} from 'src/clockface'
 import {Button, ComponentColor, Radio, ButtonType} from '@influxdata/clockface'
 import OrgDropdown from 'src/shared/components/OrgDropdown'
 
-// Styles
-import 'src/shared/components/ImportOverlay.scss'
-
 // Types
 import TextArea from 'src/clockface/components/inputs/TextArea'
 import {AppState, Organization} from 'src/types/v2'

ui/src/shared/components/InputClickToEdit.tsx

@@ -1,6 +1,5 @@
 import React, {ChangeEvent, KeyboardEvent, PureComponent} from 'react'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import './InputClickToEdit.scss'
 
 interface Props {
   wrapperClass: string

ui/src/shared/components/Legend.tsx

@@ -11,9 +11,6 @@ import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar
 import {LEGEND_PORTAL_ID} from 'src/shared/components/LegendPortal'
 import {DEFAULT_TIME_FORMAT} from 'src/shared/constants'
 
-// Styles
-import 'src/shared/components/Legend.scss'
-
 // Types
 import {SeriesDescription} from 'src/shared/parsing/flux/spreadTables'
 

ui/src/shared/components/ResourceLabelForm.tsx

@@ -26,9 +26,6 @@ import {
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-// Style
-import 'src/shared/components/ResourceLabelForm.scss'
-
 interface Props {
   labelName: string
   onSubmit: (label: Label) => void

ui/src/shared/components/SearchableDropdown.tsx

@@ -9,9 +9,6 @@ import Dropdown, {
   Props as DropdownProps,
 } from 'src/clockface/components/dropdowns/Dropdown'
 
-// Styles
-import 'src/shared/components/SearchableDropdown.scss'
-
 // Types
 import {DropdownMenuColors} from 'src/clockface/types'
 

ui/src/shared/components/SingleStat.tsx

@@ -8,9 +8,6 @@ import {formatStatValue} from 'src/shared/utils/formatStatValue'
 // Types
 import {ViewType, SingleStatView} from 'src/types/v2/dashboards'
 
-// Styles
-import 'src/shared/components/SingleStat.scss'
-
 interface Props {
   properties: SingleStatView
   stat: number

ui/src/shared/components/TagInput.tsx

@@ -6,9 +6,6 @@ import _ from 'lodash'
 import Tags from 'src/shared/components/Tags'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-// Styles
-import 'src/shared/components/TagInput.scss'
-
 export interface Item {
   text?: string
   name?: string

ui/src/shared/components/VersionInfo.tsx

@@ -4,9 +4,6 @@ import React, {PureComponent} from 'react'
 // Constants
 import {VERSION, GIT_SHA} from 'src/shared/constants'
 
-// Styles
-import 'src/shared/components/VersionInfo.scss'
-
 interface Props {
   widthPixels?: number
 }

ui/src/shared/components/WaitingText.tsx

@@ -1,7 +1,5 @@
 import React, {SFC} from 'react'
 
-import 'src/shared/components/WaitingText.scss'
-
 interface Props {
   text: string
   className?: string

ui/src/shared/components/cells/Cell.tsx

@@ -16,9 +16,6 @@ import {getView} from 'src/dashboards/selectors'
 import {TimeRange} from 'src/types'
 import {AppState, ViewType, View, Cell} from 'src/types/v2'
 
-// Styles
-import './Cell.scss'
-
 interface StateProps {
   view: View
 }

ui/src/shared/components/cells/CellHeaderNoteTooltip.tsx

@@ -3,9 +3,6 @@ import React, {SFC, CSSProperties} from 'react'
 import {createPortal} from 'react-dom'
 import ReactMarkdown from 'react-markdown'
 
-// Styles
-import 'src/shared/components/cells/CellHeaderNoteTooltip.scss'
-
 interface Props {
   note: string
   containerStyle: CSSProperties

ui/src/shared/components/cells/Cells.tsx

@@ -24,9 +24,6 @@ import {
 import {Cell} from 'src/types/v2'
 import {TimeRange} from 'src/types'
 
-// Styles
-import './react-grid-layout.scss'
-
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {

ui/src/shared/components/cells/GradientBorder.tsx

@@ -1,9 +1,6 @@
 // Libraries
 import React, {SFC} from 'react'
 
-// Styles
-import './GradientBorder.scss'
-
 const GradientBorder: SFC = () => (
   <div className="gradient-border">
     <div className="gradient-border--top-left" />

ui/src/shared/components/dateRangePicker/DateRangePicker.tsx

@@ -5,9 +5,6 @@ import React, {PureComponent, createRef, CSSProperties} from 'react'
 import DatePicker from 'src/shared/components/dateRangePicker/DatePicker'
 import {ClickOutside} from 'src/shared/components/ClickOutside'
 
-// Styles
-import 'src/shared/components/dateRangePicker/DateRangePicker.scss'
-
 // Types
 import {TimeRange} from 'src/types'
 import {Button, ComponentColor, ComponentSize} from '@influxdata/clockface'

ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx

@@ -12,9 +12,6 @@ import autoRefreshOptions, {
   AutoRefreshOptionType,
 } from 'src/shared/data/autoRefreshes'
 
-// Styles
-import 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss'
-
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {

ui/src/shared/components/editable_description/EditableDescription.tsx

@@ -9,9 +9,6 @@ import {ClickOutside} from 'src/shared/components/ClickOutside'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-// Styles
-import 'src/shared/components/editable_description/EditableDescription.scss'
-
 interface Props {
   onUpdate: (name: string) => void
   description: string

ui/src/shared/components/inlineLabels/InlineLabels.tsx

@@ -9,9 +9,6 @@ import InlineLabelsEditor from 'src/shared/components/inlineLabels/InlineLabelsE
 // Types
 import {ILabel} from '@influxdata/influx'
 
-// Styles
-import 'src/shared/components/inlineLabels/InlineLabels.scss'
-
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 

ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx

@@ -30,9 +30,6 @@ export const ADD_NEW_LABEL_LABEL: ILabel = {
   },
 }
 
-// Styles
-import 'src/shared/components/inlineLabels/InlineLabelsEditor.scss'
-
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {

ui/src/shared/components/permissionsWidget/PermissionsWidget.tsx

@@ -6,9 +6,6 @@ import PermissionsWidgetSection from 'src/shared/components/permissionsWidget/Pe
 import PermissionsWidgetItem from 'src/shared/components/permissionsWidget/PermissionsWidgetItem'
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 
-// Styles
-import './PermissionsWidget.scss'
-
 export enum PermissionsWidgetMode {
   Read = 'read',
   Write = 'write',

ui/src/shared/components/tabbed_page/TabbedPage.tsx

@@ -9,9 +9,6 @@ import TabbedPageTab from 'src/shared/components/tabbed_page/TabbedPageTab'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-// Styles
-import 'src/shared/components/tabbed_page/TabbedPage.scss'
-
 interface OwnProps {
   name: string
   avatar?: string

ui/src/style/chronograf.scss

@@ -14,7 +14,6 @@
 @import 'src/clockface/styles';
 
 // Components
-// TODO: Import these styles into their respective components instead of this stylesheet
 @import 'src/shared/components/ColorDropdown';
 @import 'src/shared/components/avatar/Avatar';
 @import 'src/shared/components/tables/TableGraphs';
@@ -31,6 +30,81 @@
 @import 'src/shared/components/custom_singular_time/CustomSingularTime';
 @import 'src/onboarding/OnboardingWizard.scss';
 @import 'src/shared/components/columns_options/ColumnsOptions';
+@import 'src/shared/components/InputClickToEdit.scss';
+@import 'src/shared/components/ImportOverlay.scss';
+@import 'src/shared/components/Legend.scss';
+@import 'src/shared/components/VersionInfo.scss';
+@import 'src/shared/components/WaitingText.scss';
+@import 'src/shared/components/cells/react-grid-layout.scss';
+@import 'src/shared/components/cells/CellHeaderNoteTooltip.scss';
+@import 'src/shared/components/cells/Cell.scss';
+@import 'src/shared/components/cells/GradientBorder.scss';
+@import 'src/shared/components/permissionsWidget/PermissionsWidget.scss';
+@import 'src/shared/components/tabbed_page/TabbedPage.scss';
+@import 'src/shared/components/editable_description/EditableDescription.scss';
+@import 'src/shared/components/dateRangePicker/DateRangePicker.scss';
+@import 'src/shared/components/inlineLabels/InlineLabels.scss';
+@import 'src/shared/components/inlineLabels/InlineLabelsEditor.scss';
+@import 'src/shared/components/TagInput.scss';
+@import 'src/shared/components/HistogramTooltip.scss';
+@import 'src/shared/components/ColorSchemeDropdown.scss';
+@import 'src/shared/components/ExportOverlay.scss';
+@import 'src/shared/components/EditableName.scss';
+@import 'src/shared/components/SingleStat.scss';
+@import 'src/shared/components/HoverTimeMarker.scss';
+@import 'src/shared/components/ResourceLabelForm.scss';
+@import 'src/shared/components/DragAndDrop.scss';
+@import 'src/shared/components/SearchableDropdown.scss';
+@import 'src/shared/components/BoxTooltip.scss';
+@import 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss';
+@import 'src/organizations/components/Retention.scss';
+@import 'src/organizations/components/TelegrafConfigOverlay.scss';
+@import 'src/organizations/components/TelegrafExplainer.scss';
+@import 'src/organizations/components/CreateVariableOverlay.scss';
+@import 'src/organizations/components/CreateVariableOverlay.scss';
+@import 'src/tasks/components/TaskForm.scss';
+@import 'src/tasks/components/TasksPage.scss';
+@import 'src/tasks/components/RunLogsList.scss';
+@import 'src/tasks/components/TaskForm.scss';
+@import 'src/tasks/components/TasksPage.scss';
+@import 'src/configuration/components/LabelOverlayForm.scss';
+@import 'src/configuration/components/RandomLabelColor.scss';
+@import 'src/dataExplorer/components/SaveAsButton.scss';
+@import 'src/dataExplorer/components/DataExplorer.scss';
+@import 'src/dataExplorer/components/SaveAsButton.scss';
+@import 'src/dashboards/components/VEO.scss';
+@import 'src/dashboards/components/NoteEditor.scss';
+@import 'src/dashboards/components/variablesControlBar/VariableDropdown.scss';
+@import 'src/dashboards/components/variablesControlBar/VariablesControlBar.scss';
+@import 'src/me/components/GettingStarted.scss';
+@import 'src/me/containers/MePage.scss';
+@import 'src/me/graphics/ExploreGraphic.scss';
+@import 'src/me/graphics/DashboardingGraphic.scss';
+@import 'src/me/graphics/CollectorGraphic.scss';
+@import 'src/pageLayout/components/RenamablePageTitle.scss';
+@import 'src/pageLayout/PageLayout.scss';
+@import 'src/timeMachine/components/SelectorList.scss';
+@import 'src/timeMachine/components/Queries.scss';
+@import 'src/timeMachine/components/SearchBar.scss';
+@import 'src/timeMachine/components/QueriesTimer.scss';
+@import 'src/timeMachine/components/QueriesSwitcher.scss';
+@import 'src/timeMachine/components/TimeMachineFluxEditor.scss';
+@import 'src/timeMachine/components/TagSelector.scss';
+@import 'src/timeMachine/components/QueryTab.scss';
+@import 'src/timeMachine/components/TimeMachine.scss';
+@import 'src/timeMachine/components/QueryBuilder.scss';
+@import 'src/timeMachine/components/RawFluxDataTable.scss';
+@import 'src/timeMachine/components/ToolbarTab.scss';
+@import 'src/timeMachine/components/FunctionSelector.scss';
+@import 'src/timeMachine/components/variableToolbar/VariableToolbar.scss';
+@import 'src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar.scss';
+@import 'src/timeMachine/components/view_options/TimeFormat.scss';
+@import 'src/timeMachine/components/view_options/ThresholdList.scss';
+@import 'src/timeMachine/components/view_options/HistogramOptions.scss';
+@import 'src/timeMachine/components/view_options/ViewOptions.scss';
+@import 'src/timeMachine/components/view_options/ViewTypeDropdown.scss';
+@import 'src/dataLoaders/components/side_bar/SideBar.scss';
+@import 'src/dataLoaders/components/DataLoadersOverlay.scss';
 
 // External
 @import '../../node_modules/@influxdata/react-custom-scrollbars/dist/styles.css';

ui/src/tasks/components/RunLogsList.tsx

@@ -10,9 +10,6 @@ import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar
 // Types
 import {LogEvent} from '@influxdata/influx'
 
-// Stylesheet
-import './RunLogsList.scss'
-
 interface Props {
   onDismissOverlay: () => void
   logs: LogEvent[]

ui/src/tasks/components/TaskForm.tsx

@@ -25,9 +25,6 @@ import {TaskOptions, TaskSchedule} from 'src/utils/taskOptionsToFluxScript'
 import {Alignment, Stack, ComponentStatus} from 'src/clockface/types'
 import {Organization, Bucket} from '@influxdata/influx'
 
-// Styles
-import './TaskForm.scss'
-
 interface Props {
   orgs: Organization[]
   taskOptions: TaskOptions

ui/src/tasks/components/TaskHeader.tsx

@@ -3,8 +3,6 @@ import React, {PureComponent} from 'react'
 import {Page} from 'src/pageLayout'
 import {ComponentColor, Button, ComponentStatus} from '@influxdata/clockface'
 
-import 'src/tasks/components/TasksPage.scss'
-
 interface Props {
   title: string
   canSubmit: boolean

ui/src/tasks/components/TasksHeader.tsx

@@ -8,8 +8,6 @@ import {Tabs, ComponentSpacer, Alignment, Stack} from 'src/clockface'
 import TaskOrgDropdown from 'src/tasks/components/TasksOrgDropdown'
 import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
 
-import 'src/tasks/components/TasksPage.scss'
-
 interface Props {
   onCreateTask: () => void
   setShowInactive: () => void

ui/src/tasks/containers/TaskPage.tsx

@@ -35,9 +35,6 @@ import {
   TaskSchedule,
 } from 'src/utils/taskOptionsToFluxScript'
 
-// Styles
-import 'src/tasks/components/TaskForm.scss'
-
 interface PassedInProps {
   router: InjectedRouter
 }

ui/src/templates/components/TemplatesHeader.tsx

@@ -6,8 +6,6 @@ import {Page} from 'src/pageLayout'
 import {Tabs, ComponentSpacer, Alignment, Stack} from 'src/clockface'
 import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
 
-import 'src/tasks/components/TasksPage.scss'
-
 interface Props {
   onCreateTemplate: () => void
   onImportTemplate: () => void

ui/src/timeMachine/components/FunctionSelector.tsx

@@ -15,9 +15,6 @@ import {getActiveQuery} from 'src/timeMachine/selectors'
 // Constants
 import {FUNCTIONS} from 'src/timeMachine/constants/queryBuilder'
 
-// Styles
-import 'src/timeMachine/components/FunctionSelector.scss'
-
 // Types
 import {AppState, BuilderConfig} from 'src/types/v2'
 

ui/src/timeMachine/components/Queries.tsx

@@ -29,9 +29,6 @@ import {setTimeRange} from 'src/timeMachine/actions'
 // Utils
 import {getActiveTimeMachine, getActiveQuery} from 'src/timeMachine/selectors'
 
-// Styles
-import 'src/timeMachine/components/Queries.scss'
-
 // Types
 import {AppState, DashboardQuery, QueryEditMode, TimeRange} from 'src/types/v2'
 import {DashboardDraftQuery} from 'src/types/v2/dashboards'

ui/src/timeMachine/components/QueriesSwitcher.tsx

@@ -16,9 +16,6 @@ import {
 import {getActiveQuery} from 'src/timeMachine/selectors'
 import {hasQueryBeenEdited} from 'src/timeMachine/utils/queryBuilder'
 
-// Styles
-import 'src/timeMachine/components/QueriesSwitcher.scss'
-
 // Types
 import {AppState, QueryEditMode, DashboardQuery} from 'src/types/v2'
 

ui/src/timeMachine/components/QueriesTimer.tsx

@@ -5,9 +5,6 @@ import {connect} from 'react-redux'
 // Utils
 import {getActiveTimeMachine} from 'src/timeMachine/selectors'
 
-// Styles
-import 'src/timeMachine/components/QueriesTimer.scss'
-
 // Types
 import {RemoteDataState} from 'src/types'
 import {AppState} from 'src/types/v2'

ui/src/timeMachine/components/QueryBuilder.tsx

@@ -16,9 +16,6 @@ import {loadBuckets, addTagSelector} from 'src/timeMachine/actions/queryBuilder'
 // Utils
 import {getActiveQuery, getActiveTimeMachine} from 'src/timeMachine/selectors'
 
-// Styles
-import 'src/timeMachine/components/QueryBuilder.scss'
-
 // Types
 import {AppState} from 'src/types/v2'
 import {RemoteDataState} from 'src/types'

ui/src/timeMachine/components/QueryTab.tsx

@@ -18,9 +18,6 @@ import {
 // Utils
 import {getActiveTimeMachine} from 'src/timeMachine/selectors'
 
-// Styles
-import 'src/timeMachine/components/QueryTab.scss'
-
 // Types
 import {AppState} from 'src/types/v2'
 import {DashboardDraftQuery} from 'src/types/v2/dashboards'

ui/src/timeMachine/components/RawFluxDataTable.tsx

@@ -9,9 +9,6 @@ import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar
 // Utils
 import {parseFiles} from 'src/timeMachine/utils/rawFluxDataTable'
 
-// Styles
-import 'src/timeMachine/components/RawFluxDataTable.scss'
-
 interface Props {
   files: string[]
   width: number

ui/src/timeMachine/components/SearchBar.tsx

@@ -8,9 +8,6 @@ import {Input, IconFont} from 'src/clockface'
 // Types
 import {InputType} from 'src/clockface/components/inputs/Input'
 
-// Styles
-import 'src/timeMachine/components/SearchBar.scss'
-
 interface Props {
   onSearch: (s: string) => void
   resourceName: string

ui/src/timeMachine/components/SelectorList.tsx

@@ -2,8 +2,6 @@ import React, {SFC} from 'react'
 
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 
-import 'src/timeMachine/components/SelectorList.scss'
-
 interface Props {
   items: string[]
   selectedItems: string[]

ui/src/timeMachine/components/TagSelector.tsx

@@ -28,9 +28,6 @@ import {toComponentStatus} from 'src/shared/utils/toComponentStatus'
 import DefaultDebouncer from 'src/shared/utils/debouncer'
 import {getActiveQuery, getActiveTimeMachine} from 'src/timeMachine/selectors'
 
-// Styles
-import 'src/timeMachine/components/TagSelector.scss'
-
 // Types
 import {AppState} from 'src/types/v2'
 import {RemoteDataState} from 'src/types'

ui/src/timeMachine/components/TimeMachine.tsx

@@ -16,9 +16,6 @@ import {getActiveTimeMachine} from 'src/timeMachine/selectors'
 import {TimeMachineTab} from 'src/types/v2/timeMachine'
 import {AppState} from 'src/types/v2'
 
-// Styles
-import 'src/timeMachine/components/TimeMachine.scss'
-
 const INITIAL_RESIZER_HANDLE = 0.5
 
 interface StateProps {

ui/src/timeMachine/components/TimeMachineFluxEditor.tsx

@@ -9,6 +9,7 @@ import Threesizer from 'src/shared/components/threesizer/Threesizer'
 import FluxFunctionsToolbar from 'src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar'
 import VariableToolbar from 'src/timeMachine/components/variableToolbar/VariableToolbar'
 import ToolbarTab from 'src/timeMachine/components/ToolbarTab'
+import FeatureFlag from 'src/shared/components/FeatureFlag'
 
 // Actions
 import {setActiveQueryText} from 'src/timeMachine/actions'
@@ -25,10 +26,6 @@ import {HANDLE_VERTICAL, HANDLE_NONE} from 'src/shared/constants'
 // Types
 import {AppState} from 'src/types/v2'
 
-// Styles
-import 'src/timeMachine/components/TimeMachineFluxEditor.scss'
-import FeatureFlag from 'src/shared/components/FeatureFlag'
-
 interface StateProps {
   activeQueryText: string
 }

ui/src/timeMachine/components/ToolbarTab.tsx

@@ -1,9 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
 
-// Styles
-import 'src/timeMachine/components/ToolbarTab.scss'
-
 interface PassedProps {
   onSetActive: () => void
   name: string

ui/src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar.tsx

@@ -18,9 +18,6 @@ import {getActiveQuery} from 'src/timeMachine/selectors'
 // Constants
 import {FLUX_FUNCTIONS} from 'src/shared/constants/fluxFunctions'
 
-// Styles
-import 'src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar.scss'
-
 // Types
 import {AppState} from 'src/types/v2'
 

ui/src/timeMachine/components/variableToolbar/VariableToolbar.tsx

@@ -11,9 +11,6 @@ import VariableItem from 'src/timeMachine/components/variableToolbar/VariableIte
 import {getVariablesForOrg} from 'src/variables/selectors'
 import {getActiveOrg} from 'src/organizations/selectors'
 
-// Styles
-import 'src/timeMachine/components/variableToolbar/VariableToolbar.scss'
-
 // Types
 import {Variable} from '@influxdata/influx'
 import {AppState} from 'src/types/v2'

ui/src/timeMachine/components/view_options/HistogramOptions.tsx

@@ -29,9 +29,6 @@ import {
 // Utils
 import {getActiveTimeMachine} from 'src/timeMachine/selectors'
 
-// Styles
-import 'src/timeMachine/components/view_options/HistogramOptions.scss'
-
 // Types
 import {HistogramPosition} from 'src/minard'
 import {Color} from 'src/types/colors'

ui/src/timeMachine/components/view_options/ThresholdList.tsx

@@ -22,9 +22,6 @@ import {
   DEFAULT_VALUE_MAX,
 } from 'src/shared/constants/thresholds'
 
-// Styles
-import 'src/timeMachine/components/view_options/ThresholdList.scss'
-
 // Types
 import {Color, ThresholdConfig} from 'src/types/colors'
 

ui/src/timeMachine/components/view_options/TimeFormat.tsx

@@ -21,9 +21,6 @@ import {
   TIME_FORMAT_TOOLTIP_LINK,
 } from 'src/dashboards/constants'
 
-// Styles
-import 'src/timeMachine/components/view_options/TimeFormat.scss'
-
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 

ui/src/timeMachine/components/view_options/ViewOptions.tsx

@@ -16,9 +16,6 @@ import {getActiveTimeMachine} from 'src/timeMachine/selectors'
 // Types
 import {View, NewView, AppState} from 'src/types/v2'
 
-// Styles
-import './ViewOptions.scss'
-
 interface DispatchProps {
   onUpdateType: typeof setType
 }

ui/src/timeMachine/components/view_options/ViewTypeDropdown.tsx

@@ -14,9 +14,6 @@ import {getActiveTimeMachine} from 'src/timeMachine/selectors'
 // Constants
 import {VIS_GRAPHICS} from 'src/timeMachine/constants/visGraphics'
 
-// Styles
-import 'src/timeMachine/components/view_options/ViewTypeDropdown.scss'
-
 // Types
 import {View, NewView, AppState, ViewType} from 'src/types/v2'