WRQ-19494: css-loader v7 migration

.travis.yml

@@ -12,12 +12,12 @@ before_install:
 install:
     - npm config set prefer-offline false
     - npm install -g codecov
-    - git clone --branch=develop --depth 1 https://github.com/enactjs/cli ../cli
+    - git clone --branch=feature/WRQ-19494 --depth 1 https://github.com/enactjs/cli ../cli
     - pushd ../cli
     - npm install
     - npm link
     - popd
-    - git clone --branch=develop --depth 1 https://github.com/enactjs/enact ../enact
+    - git clone --branch=feature/WRQ-19494 --depth 1 https://github.com/enactjs/enact ../enact
     - pushd ../enact
     - npm install
     - npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock install

ArcPicker/ArcPicker.js

@@ -25,7 +25,7 @@ import {ThemeContext} from '../ThemeDecorator';
 
 import ArcPickerBehaviorDecorator from './ArcPickerBehaviorDecorator';
 
-import css from './ArcPicker.module.less';
+import * as css from './ArcPicker.module.less';
 
 /**
  * An Agate component for displaying an arc picker.

ArcSlider/ArcSlider.js

@@ -28,7 +28,7 @@ import {ThemeContext} from '../ThemeDecorator';
 import ArcSliderBehaviorDecorator from './ArcSliderBehaviorDecorator';
 import {valueToAngle} from './utils';
 
-import css from './ArcSlider.module.less';
+import * as css from './ArcSlider.module.less';
 
 /**
  * An arc slider component.

BodyText/BodyText.js

@@ -19,7 +19,7 @@ import compose from 'ramda/src/compose';
 import {MarqueeDecorator} from '../Marquee';
 import Skinnable from '../Skinnable';
 
-import componentCss from './BodyText.module.less';
+import * as componentCss from './BodyText.module.less';
 
 // Create a Marquee using BodyText as the base
 const MarqueeBodyText = MarqueeDecorator(UiBodyText);

Button/Button.js

@@ -28,7 +28,7 @@ import {MarqueeDecorator} from '../Marquee';
 import Skinnable from '../Skinnable';
 import TooltipDecorator from '../TooltipDecorator';
 
-import componentCss from './Button.module.less';
+import * as componentCss from './Button.module.less';
 
 /**
  * A button component.

Checkbox/Checkbox.js

@@ -20,7 +20,7 @@ import compose from 'ramda/src/compose';
 import Icon from '../Icon';
 import Skinnable from '../Skinnable';
 
-import componentCss from './Checkbox.module.less';
+import * as componentCss from './Checkbox.module.less';
 
 /**
  * A checkbox component, ready to use in Agate applications.

CheckboxItem/CheckboxItem.js

@@ -23,7 +23,7 @@ import {CheckboxBase} from '../Checkbox';
 import {ItemBase, ItemDecorator} from '../Item';
 import Skinnable from '../Skinnable';
 
-import componentCss from './CheckboxItem.module.less';
+import * as componentCss from './CheckboxItem.module.less';
 
 const Item = ItemDecorator(ItemBase);
 

ColorPicker/ColorPicker.js

@@ -33,7 +33,7 @@ import Button from '../Button';
 import Slider from '../Slider';
 import SwatchButton from './SwatchButton';
 
-import componentCss from './ColorPicker.module.less';
+import * as componentCss from './ColorPicker.module.less';
 
 const ContainerDiv = SpotlightContainerDecorator({enterTo: 'last-focused'}, 'div');
 

ColorPicker/SwatchButton.js

@@ -15,7 +15,7 @@ import compose from 'ramda/src/compose';
 import {ButtonBase} from '../Button';
 import Skinnable from '../Skinnable';
 
-import componentCss from './SwatchButton.module.less';
+import * as componentCss from './SwatchButton.module.less';
 
 /**
  * A swatch component which sets-up the component's structure.

ContextualPopupDecorator/ContextualPopup.js

@@ -6,7 +6,7 @@ import $L from '../internal/$L';
 import Button from '../Button';
 import Skinnable from '../Skinnable';
 
-import componentCss from './ContextualPopup.module.less';
+import * as componentCss from './ContextualPopup.module.less';
 
 /**
  * An SVG arrow for {@link agate/ContextualPopupDecorator.ContextualPopup}.

ContextualPopupDecorator/ContextualPopupDecorator.js

@@ -24,7 +24,7 @@ import ReactDOM from 'react-dom';
 
 import {ContextualPopup} from './ContextualPopup';
 
-import componentCss from './ContextualPopupDecorator.module.less';
+import * as componentCss from './ContextualPopupDecorator.module.less';
 
 /**
  * Default config for {@link agate/ContextualPopupDecorator.ContextualPopupDecorator}

DatePicker/DatePickerBase.js

@@ -5,7 +5,7 @@ import $L from '../internal/$L';
 import {DateComponentRangePicker} from '../internal/DateComponentPicker';
 import DateTime from '../internal/DateTime';
 
-import css from './DatePicker.module.less';
+import * as css from './DatePicker.module.less';
 
 /**
  * A date selection component.

DateTimePicker/DateTimePicker.js

@@ -19,7 +19,7 @@ import DatePicker from '../DatePicker';
 import Skinnable from '../Skinnable';
 import TimePicker from '../TimePicker';
 
-import css from './DateTimePicker.module.less';
+import * as css from './DateTimePicker.module.less';
 
 /**
  * A date/time Picker component.

Drawer/Drawer.js

@@ -18,7 +18,7 @@ import PropTypes from 'prop-types';
 import Skinnable from '../Skinnable';
 import PopupState from '../Popup/PopupState';
 
-import componentCss from './Drawer.module.less';
+import * as componentCss from './Drawer.module.less';
 
 const TransitionContainer = SpotlightContainerDecorator(
 	{enterTo: 'default-element', preserveId: true},

DropManager/DropManager.js

@@ -20,7 +20,7 @@ import {createContext, Component} from 'react';
 
 import Rearrangeable from '../Rearrangeable';
 
-import css from './DropManager.module.less';
+import * as css from './DropManager.module.less';
 
 // https://stackoverflow.com/questions/9907419/how-to-get-a-key-in-a-javascript-object-by-its-value
 // By: ZER0 - Mar 28 '12 at 12:51

Dropdown/Dropdown.js

@@ -39,7 +39,7 @@ import Skinnable from '../Skinnable';
 
 import DropdownList, {isSelectedValid} from './DropdownList';
 
-import componentCss from './Dropdown.module.less';
+import * as componentCss from './Dropdown.module.less';
 
 /**
  * A stateless Dropdown Button component.

Dropdown/DropdownList.js

@@ -15,7 +15,7 @@ import RadioItem from '../RadioItem';
 import Skinnable from '../Skinnable';
 import VirtualList from '../VirtualList';
 
-import css from './Dropdown.module.less';
+import * as css from './Dropdown.module.less';
 
 const isSelectedValid = ({children, selected}) => Array.isArray(children) && children[selected] != null;
 

FanSpeedControl/FanSpeedControl.js

@@ -20,7 +20,7 @@ import ArcPicker from '../ArcPicker';
 import Icon from '../Icon';
 import Skinnable from '../Skinnable';
 
-import css from './FanSpeedControl.module.less';
+import * as css from './FanSpeedControl.module.less';
 
 /**
  * An Agate component for displaying fan speed.

Header/Header.js

@@ -21,7 +21,7 @@ import compose from 'ramda/src/compose';
 import {MarqueeController, MarqueeDecorator} from '../Marquee';
 import Skinnable from '../Skinnable';
 
-import componentCss from './Header.module.less';
+import * as componentCss from './Header.module.less';
 
 const MarqueeH1 = MarqueeDecorator('h1');
 const MarqueeH2 = MarqueeDecorator('h2');

Heading/Heading.js

@@ -26,7 +26,7 @@ import Button from '../Button';
 import {MarqueeDecorator} from '../Marquee';
 import Skinnable from '../Skinnable';
 
-import componentCss from './Heading.module.less';
+import * as componentCss from './Heading.module.less';
 
 /**
  * A labeled Heading component.

Icon/Icon.js

@@ -22,7 +22,7 @@ import Skinnable from '../Skinnable';
 
 import iconList, {iconListSilicon} from './IconList.js';
 
-import componentCss from './Icon.module.less';
+import * as componentCss from './Icon.module.less';
 
 /**
  * Renders an Agate-styled icon without any behavior.

Image/Image.js

@@ -21,7 +21,7 @@ import {Component} from 'react';
 
 import Skinnable from '../Skinnable';
 
-import componentCss from './Image.module.less';
+import * as componentCss from './Image.module.less';
 
 const placeholder =
 	'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' +

ImageItem/ImageItem.js

@@ -23,7 +23,7 @@ import compose from 'ramda/src/compose';
 import ImageBase from '../Image';
 import Skinnable from '../Skinnable';
 
-import componentCss from './ImageItem.module.less';
+import * as componentCss from './ImageItem.module.less';
 
 const MarqueeImageItem = MarqueeDecorator(UiImageItem);
 

IncrementSlider/IncrementSlider.js

@@ -41,7 +41,7 @@ import SliderBehaviorDecorator from '../Slider/SliderBehaviorDecorator';
 import IncrementSliderButton from './IncrementSliderButton';
 import {emitChange} from './utils';
 
-import componentCss from './IncrementSlider.module.less';
+import * as componentCss from './IncrementSlider.module.less';
 
 const isDown = is('down');
 const isLeft = is('left');

IncrementSlider/IncrementSliderButton.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Button from '../Button';
 import {onlyUpdateForProps} from '../internal/util';
 
-import componentCss from './IncrementSliderButton.module.less';
+import * as componentCss from './IncrementSliderButton.module.less';
 
 /**
  * A {@link agate/Button.Button|Button} customized for

Input/Input.js

@@ -28,7 +28,7 @@ import InputDecoratorIcon from './InputDecoratorIcon';
 import InputSpotlightDecorator from './InputSpotlightDecorator';
 import {calcAriaLabel, extractInputProps} from './util';
 
-import componentCss from './Input.module.less';
+import * as componentCss from './Input.module.less';
 
 /**
  * An input component.

Input/InputDecoratorIcon.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import {onlyUpdateForProps} from '../internal/util';
 
-import css from './Input.module.less';
+import * as css from './Input.module.less';
 
 /**
  * The stateless functional base component for {@link agate/Input.InputDecoratorIcon}.

Item/Item.js

@@ -23,7 +23,7 @@ import compose from 'ramda/src/compose';
 import {Marquee, MarqueeController} from '../Marquee';
 import Skinnable from '../Skinnable';
 
-import componentCss from './Item.module.less';
+import * as componentCss from './Item.module.less';
 
 /**
  * Renders the Item content.

Keypad/Keypad.js

@@ -25,7 +25,7 @@ import $L from '../internal/$L';
 import Button from '../Button';
 import Skinnable from '../Skinnable';
 
-import css from './Keypad.module.less';
+import * as css from './Keypad.module.less';
 
 const SpotlightContainerLayout = SpotlightContainerDecorator(
 	{enterTo: 'default-element'},

LabeledIcon/LabeledIcon.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import Skinnable from '../Skinnable';
 
-import componentCss from './LabeledIcon.module.less';
+import * as componentCss from './LabeledIcon.module.less';
 
 /**
  * A basic LabeledIcon component structure without any behaviors applied to it.

LabeledIconButton/LabeledIconButton.js

@@ -23,7 +23,7 @@ import {ButtonBase} from '../Button';
 import Skinnable from '../Skinnable';
 import TooltipDecorator from '../TooltipDecorator';
 
-import componentCss from './LabeledIconButton.module.less';
+import * as componentCss from './LabeledIconButton.module.less';
 
 const Button = Skinnable(ButtonBase);
 

MediaPlayer/MediaControls.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import $L from '../internal/$L';
 import Button from '../Button';
 
-import css from './MediaControls.module.less';
+import * as css from './MediaControls.module.less';
 
 const badges = {
 	none: '',

MediaPlayer/MediaPlayer.js

@@ -31,7 +31,7 @@ import Skinnable from '../Skinnable';
 import Times from './Times';
 import {secondsToTime} from './util';
 
-import css from './MediaPlayer.module.less';
+import * as css from './MediaPlayer.module.less';
 
 const Container = SpotlightContainerDecorator({
 	enterTo: 'default-element'

MediaPlayer/MediaSlider.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import Slider from '../Slider';
 
-import css from './MediaSlider.module.less';
+import * as css from './MediaSlider.module.less';
 
 /**
  * A customized slider suitable for use within media player components such as

MediaPlayer/Times.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import {secondsToPeriod, secondsToTime} from './util';
 
-import css from './Times.module.less';
+import * as css from './Times.module.less';
 
 /**
  * Agate-styled formatted time component.

Panels/Breadcrumb.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 import $L from '../internal/$L';
 
-import css from './Panels.module.less';
+import * as css from './Panels.module.less';
 
 // Since we expose `onSelect` to handle breadcrumb selection, we need that handler to be set on a
 // component that proxies mouse events for key events so we create a spottable div that will

Panels/BreadcrumbDecorator.js

@@ -15,7 +15,7 @@ import Breadcrumb from './Breadcrumb';
 import Breadcrumbs from './Breadcrumbs';
 import CancelDecorator from './CancelDecorator';
 
-import css from './Panels.module.less';
+import * as css from './Panels.module.less';
 
 // TODO: Figure out how to document private sub-module members
 

Panels/CancelDecorator.js

@@ -2,7 +2,7 @@ import hoc from '@enact/core/hoc';
 import Spotlight from '@enact/spotlight';
 import Cancelable from '@enact/ui/Cancelable';
 
-import css from './Panels.module.less';
+import * as css from './Panels.module.less';
 
 const defaultConfig = {
 	cancel: null

Panels/Controls.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 import ApplicationCloseButton from './ApplicationCloseButton';
 
-import css from './Panels.module.less';
+import * as css from './Panels.module.less';
 
 /**
  * Group of controls shared across Panel instances

Panels/Panel.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import Skinnable from '../Skinnable';
 
-import componentCss from './Panel.module.less';
+import * as componentCss from './Panel.module.less';
 
 let panelId = 0;
 

Panels/Panels.js

@@ -12,7 +12,7 @@ import Controls from './Controls';
 import IdProvider from './IdProvider';
 import Viewport from './Viewport';
 
-import componentCss from './Panels.module.less';
+import * as componentCss from './Panels.module.less';
 
 const getControlsId = (id) => id && `${id}-controls`;
 

Panels/TabbedPanels.js

@@ -11,7 +11,7 @@ import TabGroup from '../TabGroup';
 
 import Panels from './Panels';
 
-import componentCss from './TabbedPanels.module.less';
+import * as componentCss from './TabbedPanels.module.less';
 
 /**
  * Tabbed Panels component.

Panels/Viewport.js

@@ -9,7 +9,7 @@ import {Children, cloneElement, Component, createRef} from 'react';
 
 import SharedStateDecorator, {SharedState} from './SharedStateDecorator';
 
-import css from './Panels.module.less';
+import * as css from './Panels.module.less';
 
 /**
  * The container for a set of Panels