WRQ-19494: css-loader v7 migration

.travis.yml

@@ -5,7 +5,7 @@ node_js:
     - node
 sudo: false
 install:
-    - 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

agate/all-samples/src/App/App.js

@@ -15,7 +15,7 @@ import {appElementBase as PatternSinglePanelRedux} from '../../../pattern-single
 import {appElementBase as PatternVirtualgridlistApi} from '../../../pattern-virtualgridlist-api/src/main';
 import {appElementBase as PatternVirtuallistPreservingFocus} from '../../../pattern-virtuallist-preserving-focus/src/main';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const NavigationMenu = kind({
 	name: 'NavigationMenu',

agate/all-samples/src/components/ButtonToSamples/ButtonToSamples.js

@@ -1,7 +1,7 @@
 import Button from '@enact/agate/Button';
 import {Link} from 'react-router-dom';
 
-import css from './ButtonToSamples.module.less';
+import * as css from './ButtonToSamples.module.less';
 
 const ButtonToSamples = () => (
 	<div className={css.buttonContainer}>

agate/pattern-dynamic-panel/src/App/App.js

@@ -4,7 +4,7 @@ import Changeable from '@enact/ui/Changeable';
 
 import FileBrowser from '../components/FileBrowser';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 // This would be replaced by redux but Changeable is a handy single-value, single-event state HOC
 const Browser = Changeable(

agate/pattern-locale-switching/src/App/App.js

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 
 import MainPanel from '../views/MainPanel';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const Sample = kind({
 	name: 'App',

agate/pattern-single-panel-redux/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 AppBase = kind({
 	name: 'App',

agate/pattern-single-panel-redux/src/components/PhotoSlider.js

@@ -3,7 +3,7 @@ import kind from '@enact/core/kind';
 import ri from '@enact/ui/resolution';
 import PropTypes from 'prop-types';
 
-import css from './componentStyles.module.less';
+import * as css from './componentStyles.module.less';
 
 const PhotoSlider = kind({
 	name: 'PhotoSlider',

agate/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js

@@ -3,7 +3,7 @@ import kind from '@enact/core/kind';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
-import css from './containerStyles.module.less';
+import * as css from './containerStyles.module.less';
 
 const PhotoPreview = kind({
 	name: 'PhotoPreview',

agate/pattern-single-panel/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 AppBase = kind({
 	name: 'App',

agate/pattern-single-panel/src/components/ProfilePhotoPicker.js

@@ -12,7 +12,7 @@ import mural from '../../assets/images/mural.jpeg';
 import spaceShuttle from '../../assets/images/space-shuttle.jpg';
 import violin from '../../assets/images/violin.jpeg';
 
-import css from './ProfilePhotoPicker.module.less';
+import * as css from './ProfilePhotoPicker.module.less';
 
 const imageURLs = [
 	car,

agate/pattern-virtualgridlist-api/src/App/App.js

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

agate/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js

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

agate/pattern-virtualgridlist-api/src/views/MainView.js

@@ -6,7 +6,7 @@ import ImageList from '../components/ImageList';
 import SideBar from '../components/SideBar';
 import {changeAlbum} from '../store';
 
-import css from './MainView.module.less';
+import * as css from './MainView.module.less';
 
 const albums = ['Family', 'Car', 'Travel'];
 

agate/pattern-virtuallist-preserving-focus/src/views/PatternList.js

@@ -4,7 +4,7 @@ import ri from '@enact/ui/resolution';
 import PropTypes from 'prop-types';
 import {useCallback} from 'react';
 
-import css from './PatternList.module.less';
+import * as css from './PatternList.module.less';
 
 const items = Array.from(new Array(1000)).map((n, i) => `Item  ${('00' + i).slice(-3)}`);
 

moonstone/all-samples/src/App/App.js

@@ -22,7 +22,7 @@ import {appElementBase as PatternVirtualgridlistApi} from '../../../pattern-virt
 import {appElementBase as PatternVirtuallistPreservingFocus} from '../../../pattern-virtuallist-preserving-focus/src/main';
 
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const NavigationMenu = kind({
 	name: 'NavigationMenu',

moonstone/all-samples/src/components/ButtonToSamples/ButtonToSamples.js

@@ -1,7 +1,7 @@
 import Button from '@enact/moonstone/Button';
 import {Link} from 'react-router-dom';
 
-import css from './ButtonToSamples.module.less';
+import * as css from './ButtonToSamples.module.less';
 
 const ButtonToSamples = () => (
 	<div className={css.buttonContainer}>

moonstone/pattern-analytics-webostv/src/App/App.js

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

moonstone/pattern-dynamic-panel/src/App/App.js

@@ -4,7 +4,7 @@ import Changeable from '@enact/ui/Changeable';
 
 import FileBrowser from '../components/FileBrowser';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 // This would be replaced by redux but Changeable is a handy single-value, single-event state HOC
 const Browser = Changeable(

moonstone/pattern-dynamic-panel/src/components/FileBrowser/FileBrowser.js

@@ -15,7 +15,7 @@ import rainbow from '/assets/images/rainbow.jpg';
 
 import DynamicPanel from '../DynamicPanel';
 
-import css from './FileBrowser.module.less';
+import * as css from './FileBrowser.module.less';
 
 const a = {
 	files: [

moonstone/pattern-locale-switching/src/App/App.js

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 
 import MainPanel from '../views/MainPanel';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const Sample = kind({
 	name: 'App',

moonstone/pattern-single-panel-redux/src/App/App.js

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

moonstone/pattern-single-panel-redux/src/components/PhotoSlider.js

@@ -2,7 +2,7 @@ import kind from '@enact/core/kind';
 import Slider from '@enact/moonstone/Slider';
 import PropTypes from 'prop-types';
 
-import css from './componentStyles.module.less';
+import * as css from './componentStyles.module.less';
 
 const PhotoSlider = kind({
 	name: 'PhotoSlider',

moonstone/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js

@@ -3,7 +3,7 @@ import Image from '@enact/moonstone/Image';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
-import css from './containerStyles.module.less';
+import * as css from './containerStyles.module.less';
 
 const PhotoPreview = kind({
 	name: 'PhotoPreview',

moonstone/pattern-single-panel/src/App/App.js

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

moonstone/pattern-single-panel/src/components/ProfilePhotoPicker.js

@@ -12,7 +12,7 @@ import mural from '../../assets/images/mural.jpeg';
 import spaceShuttle from '../../assets/images/space-shuttle.jpg';
 import violin from '../../assets/images/violin.jpeg';
 
-import css from './ProfilePhotoPicker.module.less';
+import * as css from './ProfilePhotoPicker.module.less';
 
 const imageURLs = [
 	car,

moonstone/pattern-video-player/src/App/App.js

@@ -11,7 +11,7 @@ import MainPanel from '../views/MainPanel';
 
 import videos from './videos.js';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const getVideo = (index) => videos[index];
 

moonstone/pattern-virtualgridlist-api/src/App/App.js

@@ -3,7 +3,7 @@ import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator';
 
 import MainView from '../views/MainView';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const AppBase = kind({
 	name: 'App',

moonstone/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js

@@ -4,7 +4,7 @@ import SelectableItem from '@enact/moonstone/SelectableItem';
 import Group from '@enact/ui/Group';
 import PropTypes from 'prop-types';
 
-import css from './SideBar.module.less';
+import * as css from './SideBar.module.less';
 
 const SideBar = kind({
 	name: 'SideBar',

moonstone/pattern-virtualgridlist-api/src/views/MainView.js

@@ -7,7 +7,7 @@ import SideBar from '../components/SideBar';
 
 import AppStateDecorator from './AppStateDecorator';
 
-import css from './MainView.module.less';
+import * as css from './MainView.module.less';
 
 const albums = ['Family', 'Car', 'Travel'];
 

moonstone/pattern-virtuallist-preserving-focus/src/views/PatternList.js

@@ -4,7 +4,7 @@ import ri from '@enact/ui/resolution';
 import PropTypes from 'prop-types';
 import {useCallback} from 'react';
 
-import css from './PatternList.module.less';
+import * as css from './PatternList.module.less';
 
 const items = Array.from(new Array(1000)).map((n, i) => `Item  ${('00' + i).slice(-3)}`);
 

moonstone/tutorial-hello-enact/src/App/App.js

@@ -1,7 +1,7 @@
 import kind from '@enact/core/kind';
 import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const AppBase = kind({
 	name: 'App',

moonstone/tutorial-kitten-browser/src/components/Kitten/Kitten.js

@@ -2,7 +2,7 @@ import kind from '@enact/core/kind';
 import PropTypes from 'prop-types';
 import Spottable from '@enact/spotlight/Spottable';
 
-import css from './Kitten.module.less';
+import * as css from './Kitten.module.less';
 
 const KittenBase = kind({
 	name: 'Kitten',

my-theme-app/src/App/App.js

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

my-theme-app/src/components/PanelHeader/PanelHeader.js

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

my-theme-app/src/views/ButtonsIcons.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import PanelHeader from '../components/PanelHeader';
 
-import commonCss from './common.module.less';
+import * as commonCss from './common.module.less';
 
 const ButtonsIconsPanel = kind({
 	name: 'ButtonsIconsPanel',

my-theme-app/src/views/Items.js

@@ -14,7 +14,7 @@ import PropTypes from 'prop-types';
 
 import PanelHeader from '../components/PanelHeader';
 
-import commonCss from './common.module.less';
+import * as commonCss from './common.module.less';
 
 const ItemsPanel = kind({
 	name: 'ItemsPanel',

sandstone/all-samples/src/App/App.js

@@ -22,7 +22,7 @@ import {appElementBase as PatternVirtuallistPreservingFocus} from '../../../patt
 import {AppBase as TutorialHelloEnact} from '../../../tutorial-hello-enact/src/App/App';
 import {AppBase as TutorialKittenBrowser} from '../../../tutorial-kitten-browser/src/App/App';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const NavigationMenu = kind({
 	name: 'NavigationMenu',

sandstone/all-samples/src/components/ButtonToSamples/ButtonToSamples.js

@@ -1,7 +1,7 @@
 import Button from '@enact/sandstone/Button';
 import {Link} from 'react-router-dom';
 
-import css from './ButtonToSamples.module.less';
+import * as css from './ButtonToSamples.module.less';
 
 const ButtonToSamples = () => (
 	<div className={css.buttonContainer}>

sandstone/feature-custom-skin-generator/src/App/App.js

@@ -5,7 +5,7 @@ import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
 import MainPanel from '../views/MainPanel';
 import screenTypes from '../../screenTypes.json';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const App = kind({
 	name: 'App',

sandstone/feature-custom-skin-generator/src/components/AutoPopup/AutoPopup.js

@@ -4,7 +4,7 @@ import Button from '@enact/sandstone/Button';
 import Popup from '@enact/sandstone/Popup';
 import PropTypes from 'prop-types';
 
-import commonCss from '../../common/styles.module.less';
+import * as commonCss from '../../common/styles.module.less';
 
 /**
  * A popup component containing the alert for `switch to auto` warning

sandstone/feature-custom-skin-generator/src/components/ColorPicker/ColorPicker.js

@@ -8,8 +8,8 @@ import {useState} from 'react';
 
 import {convertHexToRGB, convertRGBToHex, hexColors} from '../../utils';
 
-import commonCss from '../../common/styles.module.less';
-import componentCss from './ColorPicker.module.less';
+import * as commonCss from '../../common/styles.module.less';
+import * as componentCss from './ColorPicker.module.less';
 
 /**
  * A component that replaces the html color picker

sandstone/feature-custom-skin-generator/src/components/ImportSkin/ImportSkin.js

@@ -3,7 +3,7 @@ import platform from '@enact/core/platform';
 import Dropdown from '@enact/sandstone/Dropdown';
 import PropTypes from 'prop-types';
 
-import componentCss from './ImportSkin.module.less';
+import * as componentCss from './ImportSkin.module.less';
 
 /**
  * A component that contains the dropdown used for preset selection

sandstone/feature-custom-skin-generator/src/components/NameField/NameField.js

@@ -5,8 +5,8 @@ import {Cell, Layout} from '@enact/ui/Layout';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
-import commonCss from '../../common/styles.module.less';
-import componentCss from './NameField.module.less';
+import * as commonCss from '../../common/styles.module.less';
+import * as componentCss from './NameField.module.less';
 
 /**
  * A component that contains a label and an input field, used to denote the name of the skin

sandstone/feature-custom-skin-generator/src/components/OutputField/OutputField.js

@@ -12,7 +12,7 @@ import TooltipDecorator from '@enact/sandstone/TooltipDecorator';
 import {Cell, Column, Row} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
 
-import css from './OutputField.module.less';
+import * as css from './OutputField.module.less';
 
 import {generateCSS, generateCSSFile, getPresetDifferences} from '../../utils';