WRQ-19494: css-loader v7 migration

.travis.yml

@@ -2,7 +2,7 @@ dist: focal
 language: node_js
 node_js:
     - lts/*
-    - "21"
+    - node
 sudo: false
 before_install:
     - curl -fsSL https://www.mongodb.org/static/pgp/server-4.4.asc | sudo gpg -o /usr/share/keyrings/mongodb-server-4.4.gpg --dearmor
@@ -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

ActionGuide/ActionGuide.js

@@ -20,7 +20,7 @@ import Button from '../Button';
 import {Marquee} from '../Marquee';
 import Skinnable from '../Skinnable';
 
-import componentCss from './ActionGuide.module.less';
+import * as componentCss from './ActionGuide.module.less';
 
 /**
  * An Action Guide component.

Alert/Alert.js

@@ -23,7 +23,7 @@ import Popup from '../Popup';
 
 import AlertImage from './AlertImage';
 
-import css from './Alert.module.less';
+import * as css from './Alert.module.less';
 
 /**
  * A modal Alert component.

Alert/AlertImage.js

@@ -2,7 +2,7 @@ import kind from '@enact/core/kind';
 import PropTypes from 'prop-types';
 
 import Image from '../Image';
-import componentCss from './AlertImage.module.less';
+import * as componentCss from './AlertImage.module.less';
 
 /**
  * An image for use in an Alert.

BodyText/BodyText.js

@@ -19,7 +19,7 @@ import Pure from '@enact/ui/internal/Pure';
 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

@@ -26,7 +26,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

@@ -19,7 +19,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 Sandstone applications.

CheckboxItem/CheckboxItem.js

@@ -24,7 +24,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

@@ -35,7 +35,7 @@ import Slider from '../Slider';
 
 import {hexToHSL, HSLToHex} from './utils';
 
-import componentCss from './ColorPicker.module.less';
+import * as componentCss from './ColorPicker.module.less';
 
 const SpottableButton = Spottable(ButtonBase);
 

ContextualMenuDecorator/ContextualMenuDecorator.js

@@ -18,7 +18,7 @@ import Item from '../Item';
 import Scroller from '../Scroller';
 import Skinnable from '../Skinnable';
 
-import css from './ContextualMenuDecorator.module.less';
+import * as css from './ContextualMenuDecorator.module.less';
 
 // The maximum number of visible items. More than this number invokes a scroller.
 // When updating this value, you must also set the max-items LESS variable.

ContextualPopupDecorator/ContextualPopup.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import Skinnable from '../Skinnable';
 
-import css from './ContextualPopup.module.less';
+import * as css from './ContextualPopup.module.less';
 
 /**
  * An SVG arrow for {@link sandstone/ContextualPopupDecorator/ContextualPopup.ContextualPopup}.

ContextualPopupDecorator/ContextualPopupDecorator.js

@@ -25,7 +25,7 @@ import {Component, Fragment, createRef} from 'react';
 import {ContextualPopup} from './ContextualPopup';
 import HolePunchScrim from './HolePunchScrim';
 
-import css from './ContextualPopupDecorator.module.less';
+import * as css from './ContextualPopupDecorator.module.less';
 
 const PositionToDirection = {
 	above: 'up',

ContextualPopupDecorator/HolePunchScrim.js

@@ -5,7 +5,7 @@ import compose from 'ramda/src/compose';
 
 import Skinnable from '../Skinnable';
 
-import css from './HolePunchScrim.module.less';
+import * as css from './HolePunchScrim.module.less';
 
 const autoUnit = (size) => (typeof size === 'number' ? unit(size, 'rem') : size);
 

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.

DayPicker/DayPicker.js

@@ -26,7 +26,7 @@ import Skinnable from '../Skinnable';
 
 import {DaySelectorDecorator, getSelectedDayString} from './DaySelectorDecorator';
 
-import css from './DayPicker.module.less';
+import * as css from './DayPicker.module.less';
 
 /**
  * A day of the week selection component.

Dropdown/Dropdown.js

@@ -42,7 +42,7 @@ import Skinnable from '../Skinnable';
 
 import DropdownList, {isSelectedValid} from './DropdownList';
 
-import css from './Dropdown.module.less';
+import * as css from './Dropdown.module.less';
 
 const pause = new Pause('dropdown');
 

Dropdown/DropdownList.js

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

FixedPopupPanels/FixedPopupPanels.js

@@ -20,7 +20,7 @@ import {BasicArranger, PopupDecorator, Viewport} from '../internal/Panels';
 import DefaultPanel from '../Panels/Panel';
 import DefaultHeader from '../Panels/Header';
 
-import css from './FixedPopupPanels.module.less';
+import * as css from './FixedPopupPanels.module.less';
 
 /**
  * Adds popup functionality and `rtl` prop to {@link sandstone/FixedPopupPanels|FixedPopupPanels}.

FlexiblePopupPanels/FlexiblePopupPanels.js

@@ -7,7 +7,7 @@ import {FadeAndSlideArranger, PopupDecorator, Viewport} from '../internal/Panels
 
 import {NavButtonFocusDecorator} from './useNavButtonFocus';
 
-import css from './FlexiblePopupPanels.module.less';
+import * as css from './FlexiblePopupPanels.module.less';
 
 /**
  * An instance of {@link sandstone/Panels.Panels|Panels} which restricts the `Panel` to the left

FlexiblePopupPanels/Header.js

@@ -7,7 +7,7 @@ import {PanelsStateContext} from '../internal/Panels';
 import {ContextAsDefaults} from '../internal/Panels/util';
 import DefaultHeader from '../Panels/Header';
 
-import css from './FlexiblePopupPanels.module.less';
+import * as css from './FlexiblePopupPanels.module.less';
 
 /**
  * A header component for `FlexiblePopupPanels.Panel` with a `title` and `subtitle`, supporting several configurable

FlexiblePopupPanels/Panel.js

@@ -7,7 +7,7 @@ import $L from '../internal/$L';
 import {NavigationButton, PanelsStateContext} from '../internal/Panels';
 import {PanelBase as DefaultPanel, PanelDecorator} from '../Panels/Panel';
 
-import css from './FlexiblePopupPanels.module.less';
+import * as css from './FlexiblePopupPanels.module.less';
 
 function clamp (val, total) {
 	// The extra two `total` values here accommodate negative values

FlexiblePopupPanels/useNavButtonFocus.js

@@ -2,7 +2,7 @@ import Spotlight from '@enact/spotlight';
 import PropTypes from 'prop-types';
 import {useRef} from 'react';
 
-import css from './FlexiblePopupPanels.module.less';
+import * as css from './FlexiblePopupPanels.module.less';
 
 const prevButtonSelector = `.${css.navCellBefore} .${css.navButton}`;
 const nextButtonSelector = `.${css.navCellAfter} .${css.navButton}`;

FormCheckboxItem/FormCheckboxItem.js

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

Heading/Heading.js

@@ -24,7 +24,7 @@ import {HeadingBase as UiHeadingBase} from '@enact/ui/Heading';
 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

@@ -23,7 +23,7 @@ import Skinnable from '../Skinnable';
 
 import iconList from './IconList.js';
 
-import componentCss from './Icon.module.less';
+import * as componentCss from './Icon.module.less';
 
 /**
  * Renders a sandstone-styled icon without any behavior.

IconItem/IconItem.js

@@ -30,7 +30,7 @@ import Image from '../Image';
 import {Marquee, MarqueeController} from '../Marquee';
 import Skinnable from '../Skinnable';
 
-import componentCss from './IconItem.module.less';
+import * as componentCss from './IconItem.module.less';
 
 /**
  * The shape for image of {@link sandstone/IconItem|IconItem}.

Image/Image.js

@@ -23,7 +23,7 @@ import {Component} from 'react';
 
 import Skinnable from '../Skinnable';
 
-import componentCss from './Image.module.less';
+import * as componentCss from './Image.module.less';
 
 /**
  * A Sandstone-styled image component without any behavior

ImageItem/ImageItem.js

@@ -30,7 +30,7 @@ import Skinnable from '../Skinnable';
 
 import AsyncRenderChildren from './AsyncRenderChildren';
 
-import componentCss from './ImageItem.module.less';
+import * as componentCss from './ImageItem.module.less';
 
 const
 	defaultPlaceholder =

Input/Input.js

@@ -24,7 +24,7 @@ import NumberField from './NumberField';
 import InputField from './InputField';
 import {DEFAULT_LENGTH, calcAriaLabel, convertToPasswordFormat, extractInputFieldProps, limitNumberLength} from './util';
 
-import componentCss from './Input.module.less';
+import * as componentCss from './Input.module.less';
 
 const prepareInputEventPayload = ev => ({value: ev.target.value});
 const isPasswordType = type => type && type.includes('password');

Input/InputField.js

@@ -21,7 +21,7 @@ import InputFieldDecoratorIcon from './InputFieldDecoratorIcon';
 import InputFieldSpotlightDecorator from './InputFieldSpotlightDecorator';
 import {calcAriaLabel, extractInputProps} from './util';
 
-import componentCss from './InputField.module.less';
+import * as componentCss from './InputField.module.less';
 
 /**
  * A Sandstone styled input component.

Input/Keypad.js

@@ -14,7 +14,7 @@ import Button from '../Button';
 import $L from '../internal/$L';
 import WindowEventable from '../internal/WindowEventable';
 
-import css from './Input.module.less';
+import * as css from './Input.module.less';
 
 add('number', [48, 49, 50, 51, 52, 53, 54, 55, 56, 57]); // Establish all number keys as 'number' keyword.
 add('backspace', 8);

Input/NumberField.js

@@ -16,7 +16,7 @@ import Tooltip from '../TooltipDecorator/Tooltip';
 import Keypad from './Keypad';
 import {DEFAULT_LENGTH, SEPARATE_DIGITS_LIMIT, convertToPasswordFormat} from './util';
 
-import componentCss from './Input.module.less';
+import * as componentCss from './Input.module.less';
 
 const getSeparated = (prefer, max) => (prefer === 'separated' || (prefer === 'auto' && max <= SEPARATE_DIGITS_LIMIT));
 

Item/Item.js

@@ -25,7 +25,7 @@ import PropTypes from 'prop-types';
 import {MarqueeDecorator, MarqueeController} from '../Marquee';
 import Skinnable from '../Skinnable';
 
-import componentCss from './Item.module.less';
+import * as componentCss from './Item.module.less';
 
 const MarqueeBase = ({...rest}) => {
 	// eslint-disable-next-line enact/prop-types

KeyGuide/KeyGuide.js

@@ -30,7 +30,7 @@ import Icon from '../Icon';
 import {ItemBase} from '../Item';
 import {MarqueeController} from '../Marquee';
 import Skinnable from '../Skinnable';
-import componentCss from './KeyGuide.module.less';
+import * as componentCss from './KeyGuide.module.less';
 
 const colorKeys = ['red', 'green', 'yellow', 'blue'];
 

Marquee/Marquee.js

@@ -14,16 +14,13 @@
 
 import hoc from '@enact/core/hoc';
 import {I18nContextDecorator} from '@enact/i18n/I18nDecorator';
-import {isRtlText} from '@enact/i18n/util';
 import {
 	MarqueeBase,
 	MarqueeController,
 	MarqueeDecorator as UiMarqueeDecorator
 } from '@enact/ui/Marquee';
 
-const MarqueeDecorator = hoc({
-	marqueeDirection: (str) => isRtlText(str) ? 'rtl' : 'ltr'
-}, (config, Wrapped) => {
+const MarqueeDecorator = hoc((config, Wrapped) => {
 	return I18nContextDecorator(
 		{rtlProp: 'rtl', localeProp: 'locale'},
 		UiMarqueeDecorator(

MediaOverlay/MediaOverlay.js

@@ -27,7 +27,7 @@ import {Marquee, MarqueeController} from '../Marquee';
 import ProgressBar from '../ProgressBar';
 import Skinnable from '../Skinnable';
 
-import componentCss from './MediaOverlay.module.less';
+import * as componentCss from './MediaOverlay.module.less';
 
 /**
  * A media component with image and text overlay support.

MediaPlayer/MediaControls.js

@@ -23,7 +23,7 @@ import Skinnable from '../Skinnable';
 
 import {countReactChildren} from './util';
 
-import css from './MediaControls.module.less';
+import * as css from './MediaControls.module.less';
 
 const DivComponent = ({mediaControlsRef, ...rest}) => (<div ref={mediaControlsRef} {...rest} />);
 

MediaPlayer/MediaSlider.js

@@ -6,7 +6,7 @@ import Slider from '../Slider';
 import MediaKnob from './MediaKnob';
 import MediaSliderDecorator from './MediaSliderDecorator';
 
-import css from './MediaSlider.module.less';
+import * as css from './MediaSlider.module.less';
 
 /**
  * The base component to render a customized {@link sandstone/Slider.Slider|Slider} for use in

MediaPlayer/Times.js

@@ -5,7 +5,7 @@ import {onlyUpdateForProps} from '../internal/util';
 
 import {secondsToPeriod, secondsToTime} from './util';
 
-import css from './Times.module.less';
+import * as css from './Times.module.less';
 
 /**
  * Sandstone-styled formatted time component.

PageViews/Page.js

@@ -1,7 +1,7 @@
 import kind from '@enact/core/kind';
 import PropTypes from 'prop-types';
 
-import css from './Page.module.less';
+import * as css from './Page.module.less';
 
 /**
  * Page for {@link sandstone/PageViews.PageViews|PageViews}.

PageViews/PageViews.js

@@ -19,7 +19,7 @@ import Steps from '../Steps';
 
 import {PageViewsRouter} from './PageViewsRouter';
 
-import css from './PageViews.module.less';
+import * as css from './PageViews.module.less';
 
 /**
  * A PageViews that has page indicator with corresponding pages.