WRQ-19494: css-loader v7 migration

console/src/App/App.js

@@ -32,7 +32,7 @@ import Weather from '../views/WeatherPanel';
 
 import AppContextConnect from './AppContextConnect';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 add('backspace', 8);
 

console/src/components/AppIconCell/AppIconCell.js

@@ -4,7 +4,7 @@ import kind from '@enact/core/kind';
 import {Cell} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
 
-import css from './AppIconCell.module.less';
+import * as css from './AppIconCell.module.less';
 
 const AppIconCell = kind({
 	name: 'AppIconCell',

console/src/components/CallPopup/CallPopup.js

@@ -5,7 +5,7 @@ import kind from '@enact/core/kind';
 import {Cell, Row} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
 
-import css from './CallPopup.module.less';
+import * as css from './CallPopup.module.less';
 
 const forwardSimpleEvent = type => handle(adaptEvent(() => ({type}), forward(type)));
 

console/src/components/Clock/Clock.js

@@ -3,7 +3,7 @@ import kind from '@enact/core/kind';
 import PropTypes from 'prop-types';
 import {Component} from 'react';
 
-import css from './Clock.module.less';
+import * as css from './Clock.module.less';
 
 const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

console/src/components/CompactHVAC/CompactHVAC.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 // import AppStateConnect from '../../App/AppContextConnect';
 import Widget from '../Widget';
 
-import css from './CompactHVAC.module.less';
+import * as css from './CompactHVAC.module.less';
 
 const temps = ['HI', '74°', '73°', '72°', '71°', '70°', '69°', '68°', '67°', '66°', 'LO'];
 

console/src/components/CompactHeader/CompactHeader.js

@@ -5,7 +5,7 @@ import kind from '@enact/core/kind';
 import {Row, Cell} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
 
-import css from './CompactHeader.module.less';
+import * as css from './CompactHeader.module.less';
 
 const TitleHeading = kind({
 	name: 'TitleHeading',

console/src/components/CompactHeater/CompactHeater.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import AppStateConnect from '../../App/AppContextConnect';
 import Widget from '../Widget';
 
-import css from './CompactHeater.module.less';
+import * as css from './CompactHeater.module.less';
 
 const CompactHeaterBase = kind({
 	name: 'CompactHeater',

console/src/components/CompactMap/CompactMap.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import MapController from '../MapController';
 import Widget from '../Widget';
 
-import css from './CompactMap.module.less';
+import * as css from './CompactMap.module.less';
 
 const CompactMapBase = kind({
 	name: 'CompactMap',

console/src/components/CompactMultimedia/CompactMultimedia.js

@@ -7,7 +7,7 @@ import {ScreenSelectionPopup} from '../../../../components/ScreenSelectionPopup'
 import {MultimediaDecorator, ResponsiveVirtualList} from '../../views/Multimedia';
 import {WidgetBase, WidgetDecorator} from '../Widget';
 
-import componentCss from './CompactMultimedia.module.less';
+import * as componentCss from './CompactMultimedia.module.less';
 
 const CompactMultimediaBase = kind({
 	name: 'CompactMultimedia',

console/src/components/CompactMusic/CompactMusic.js

@@ -4,7 +4,7 @@ import {Cell} from '@enact/ui/Layout';
 
 import Widget from '../Widget';
 
-import css from './CompactMusic.module.less';
+import * as css from './CompactMusic.module.less';
 
 const CompactMusicBase = kind({
 	name: 'CompactMusic',

console/src/components/CompactScreenMonitor/CompactScreenMonitor.js

@@ -6,7 +6,7 @@ import compose from 'ramda/src/compose';
 import {WidgetBase, WidgetDecorator} from '../Widget';
 import AppStateConnect from '../../App/AppContextConnect';
 
-import css from './CompactScreenMonitor.module.less';
+import * as css from './CompactScreenMonitor.module.less';
 
 const CompactScreenMonitorBase = kind({
 	name: 'CompactScreenMonitor',

console/src/components/CompactWeather/CompactWeather.js

@@ -6,7 +6,7 @@ import AppStateConnect from '../../App/AppContextConnect';
 import WeatherItem from '../WeatherItem';
 import Widget from '../Widget';
 
-import css from './CompactWeather.module.less';
+import * as css from './CompactWeather.module.less';
 
 const CompactWeatherBase = kind({
 	name: 'CompactWeather',

console/src/components/ContactThumbnail/ContactThumbnail.js

@@ -3,7 +3,7 @@ import Item from '@enact/agate/Item';
 import kind from '@enact/core/kind';
 import PropTypes from 'prop-types';
 
-import css from './ContactThumbnail.module.less';
+import * as css from './ContactThumbnail.module.less';
 
 const ContactThumbnail = kind({
 	name: 'ContactThumbnail',

console/src/components/CustomLayout/CustomLayout.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 import AppContextConnect from '../../App/AppContextConnect';
 
-import css from './CustomLayout.module.less';
+import * as css from './CustomLayout.module.less';
 
 const allSlotNames = ['bottom', 'bottomLeft', 'bottomRight', 'children', 'top', 'topLeft', 'topRight', 'left', 'right'];
 

console/src/components/DestinationList/DestinationList.js

@@ -9,7 +9,7 @@ import {equals} from 'ramda';
 import {propTypeLatLonList} from '../../data/proptypes';
 import Marker from '../MapCore/Marker';
 
-import css from './DestinationList.module.less';
+import * as css from './DestinationList.module.less';
 
 const DestinationButton = (props) => {
 	const {children, 'data-index': index, ...rest} = props;

console/src/components/Dialer/Dialer.js

@@ -3,7 +3,7 @@ import kind from '@enact/core/kind';
 import {Row, Column, Cell} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
 
-import css from './Dialer.module.less';
+import * as css from './Dialer.module.less';
 
 const Digit = kind({
 	name: 'Digit',

console/src/components/MapController/MapController.js

@@ -16,7 +16,7 @@ import {propTypeLatLon, propTypeLatLonList} from '../../data/proptypes';
 import DestinationList from '../DestinationList';
 import MapCore from '../MapCore';
 
-import css from './MapController.module.less';
+import * as css from './MapController.module.less';
 
 const StyledButton = ({style = {}, ...rest}) => {
 	style.width = 'auto';  // Allow the buttons to properly self-size. Margins + auto-sizing confuses relatively positioned elements with 0 width and flex.

console/src/components/MapCore/MapCore.js

@@ -15,8 +15,8 @@ import CarPng from '../../../assets/car.png';
 import {propTypeLatLon, propTypeLatLonList} from '../../data/proptypes';
 import {ServiceLayerContext} from '../../data/ServiceLayer';
 
-import css from './MapCore.module.less';
-import markerCss from './Marker.module.less';
+import * as css from './MapCore.module.less';
+import * as markerCss from './Marker.module.less';
 
 const linear = (input) => input;
 

console/src/components/MapCore/Marker.js

@@ -2,7 +2,7 @@ import Skinnable from '@enact/agate/Skinnable';
 import kind from '@enact/core/kind';
 // import PropTypes from 'prop-types';
 
-import css from './Marker.module.less';
+import * as css from './Marker.module.less';
 
 const MarkerBase = kind({
 	name: 'Marker',

console/src/components/ProfileDrawer/ProfileDrawer.js

@@ -13,7 +13,7 @@ import AppContextConnect from '../../App/AppContextConnect';
 import UserAvatar from '../UserAvatar';
 import UserSelectionPopup from '../UserSelectionPopup';
 
-import componentCss from './ProfileDrawer.module.less';
+import * as componentCss from './ProfileDrawer.module.less';
 
 const panelIndexes = [
 	'home',

console/src/components/UserAvatar/UserAvatar.js

@@ -7,7 +7,7 @@ import lauraAvatar from '../../../assets/laura.png';
 import thomasAvatar from '../../../assets/thomas.png';
 import williamAvatar from '../../../assets/william.png';
 
-import componentCss from './UserAvatar.module.less';
+import * as componentCss from './UserAvatar.module.less';
 
 const userAvatars = [lauraAvatar, thomasAvatar, williamAvatar];
 

console/src/components/UserSelectionPopup/UserSelectionPopup.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import AppContextConnect from '../../App/AppContextConnect';
 import UserAvatar from '../UserAvatar';
 
-import css from './UserSelectionPopup.module.less';
+import * as css from './UserSelectionPopup.module.less';
 
 const UserItem = kind({
 	name: 'UserItem',

console/src/components/WeatherItem/WeatherItem.js

@@ -13,7 +13,7 @@ import snowy from '../../../assets/weather/snowy.png';
 import sunny from '../../../assets/weather/sunny.png';
 import thunderstorm from '../../../assets/weather/thunderstorm.png';
 
-import css from './WeatherItem.module.less';
+import * as css from './WeatherItem.module.less';
 
 const WeatherItemBase = kind({
 	name: 'WeatherItem',

console/src/components/WelcomePopup/WelcomePopup.js

@@ -20,7 +20,7 @@ import MapController from '../MapController';
 
 import UserAvatar from '../UserAvatar';
 
-import css from './WelcomePopup.module.less';
+import * as css from './WelcomePopup.module.less';
 
 const getCompactComponent = ({components, key, onSendVideo}) => {
 	let CompactComponent; // name changed because of {Component} import above

console/src/components/Widget/Widget.js

@@ -8,7 +8,7 @@ import compose from 'ramda/src/compose';
 
 import CompactHeader from '../CompactHeader';
 
-import css from './Widget.module.less';
+import * as css from './Widget.module.less';
 
 const WidgetBase = kind({
 	name: 'Widget',

console/src/views/AppList.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {getPanelIndexOf} from '../App';
 import AppIconCell from '../components/AppIconCell';
 
-import css from './AppList.module.less';
+import * as css from './AppList.module.less';
 
 const AppList = kind({
 	name: 'Home',

console/src/views/Dashboard.js

@@ -13,7 +13,7 @@ import CarPng from '../../assets/car.png';
 import AppContextConnect from '../App/AppContextConnect';
 import CustomLayout, {SaveLayoutArrangement} from '../components/CustomLayout';
 
-import css from './Dashboard.module.less';
+import * as css from './Dashboard.module.less';
 
 const ResponsiveLayout = ResponsiveBox(({containerShape, ...rest}) => {
 	const orientation = (containerShape.orientation === 'portrait') ? 'vertical' : 'horizontal';

console/src/views/HVAC.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import AppContextConnect from '../App/AppContextConnect';
 import CustomLayout, {SaveLayoutArrangement} from '../components/CustomLayout';
 
-import css from './HVAC.module.less';
+import * as css from './HVAC.module.less';
 
 const speeds = ['Off', 'Low', 'Medium', 'High'];
 const temps = ['HI', '74°', '73°', '72°', '71°', '70°', '69°', '68°', '67°', '66°', 'LO'];

console/src/views/Home.js

@@ -17,7 +17,7 @@ import CompactMusic from '../components/CompactMusic';
 import CompactScreenMonitor from '../components/CompactScreenMonitor';
 import CompactWeather from '../components/CompactWeather';
 
-import css from './Home.module.less';
+import * as css from './Home.module.less';
 
 const allSlotNames = ['small1', 'small2', 'medium', 'large', 'tray1', 'tray2', 'tray3', 'tray4'];
 

console/src/views/Map.js

@@ -4,7 +4,7 @@ import kind from '@enact/core/kind';
 
 import MapController from '../components/MapController';
 
-import css from './Map.module.less';
+import * as css from './Map.module.less';
 
 const MapViewBase = kind({
 	name: 'MapView',

console/src/views/Multimedia.js

@@ -17,7 +17,7 @@ import CustomLayout from '../components/CustomLayout';
 import ScreenSelectionPopup from '../../../components/ScreenSelectionPopup';
 import youtubeVideos from '../data/youtubeapi.json';
 
-import css from './Multimedia.module.less';
+import * as css from './Multimedia.module.less';
 
 const IFrame = kind({
 	name: 'IFrame',

console/src/views/Phone.js

@@ -17,7 +17,7 @@ import ContactThumbnail from '../components/ContactThumbnail';
 import CustomLayout, {SaveLayoutArrangement} from '../components/CustomLayout';
 import Dialer from '../components/Dialer';
 
-import css from './Phone.module.less';
+import * as css from './Phone.module.less';
 
 const contacts = [
 	{name: 'Blake',    number: '535-953-3185'},

console/src/views/Radio.js

@@ -13,7 +13,7 @@ import {Component} from 'react';
 import PresetItem from '../components/PresetItem';
 import CustomLayout, {SaveLayoutArrangement} from '../components/CustomLayout';
 
-import css from './Radio.module.less';
+import * as css from './Radio.module.less';
 
 const wrapFrequency = (frequency, factor) => {
 	// case 'tune-up':

console/src/views/Settings.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import {getPanelIndexOf} from '../App';
 import NetworkInfo from '../../../components/NetworkInfo';
 
-import viewCss from './Settings.module.less';
+import * as viewCss from './Settings.module.less';
 
 const SwitchItemCell =  kind({
 	name: 'SwitchItemCell',

console/src/views/ThemeSettings.js

@@ -11,7 +11,7 @@ import compose from 'ramda/src/compose';
 import {getPanelIndexOf} from '../App';
 import AppContextConnect from '../App/AppContextConnect';
 
-import componentCss from './Settings.module.less';
+import * as componentCss from './Settings.module.less';
 
 // Skin setup area
 const skinCollection = {

console/src/views/WeatherPanel.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import WeatherItem from '../components/WeatherItem';
 import AppStateConnect from '../App/AppContextConnect';
 
-import viewCSS from './WeatherPanel.module.less';
+import * as viewCss from './WeatherPanel.module.less';
 
 const Weather = kind({
 	name: 'Weather',

copilot/src/App/App.js

@@ -15,7 +15,7 @@ import ScreenSelectionPopup from '../../../components/ScreenSelectionPopup';
 
 import appConfig from './configLoader';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const screenIds = [1];
 const durationIncrements = ['day', 'hour', 'min', 'second'];

kitchen-sink/src/App/App.js

@@ -4,7 +4,7 @@ import kind from '@enact/core/kind';
 
 import MainPanel from '../views/MainPanel';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const App = kind({
 	name: 'App',