diff --git a/.travis.yml b/.travis.yml
index 66d876f98..9889874d0 100644
--- a/.travis.yml
+++ b/.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
diff --git a/agate/all-samples/src/App/App.js b/agate/all-samples/src/App/App.js
index a86d98f94..7b5c71b75 100644
--- a/agate/all-samples/src/App/App.js
+++ b/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',
diff --git a/agate/all-samples/src/components/ButtonToSamples/ButtonToSamples.js b/agate/all-samples/src/components/ButtonToSamples/ButtonToSamples.js
index f9401b5d3..454f236de 100644
--- a/agate/all-samples/src/components/ButtonToSamples/ButtonToSamples.js
+++ b/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}>
diff --git a/agate/pattern-dynamic-panel/src/App/App.js b/agate/pattern-dynamic-panel/src/App/App.js
index b05dcdbbb..c816fb56f 100644
--- a/agate/pattern-dynamic-panel/src/App/App.js
+++ b/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(
diff --git a/agate/pattern-locale-switching/src/App/App.js b/agate/pattern-locale-switching/src/App/App.js
index 25952bbb0..01ec25cde 100644
--- a/agate/pattern-locale-switching/src/App/App.js
+++ b/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',
diff --git a/agate/pattern-single-panel-redux/src/App/App.js b/agate/pattern-single-panel-redux/src/App/App.js
index 9606d1197..ed1b65da8 100644
--- a/agate/pattern-single-panel-redux/src/App/App.js
+++ b/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',
diff --git a/agate/pattern-single-panel-redux/src/components/PhotoSlider.js b/agate/pattern-single-panel-redux/src/components/PhotoSlider.js
index e367b6aa5..ae85b3ecf 100644
--- a/agate/pattern-single-panel-redux/src/components/PhotoSlider.js
+++ b/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',
diff --git a/agate/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js b/agate/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js
index b06675dcd..59965ff1b 100644
--- a/agate/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js
+++ b/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',
diff --git a/agate/pattern-single-panel/src/App/App.js b/agate/pattern-single-panel/src/App/App.js
index 9606d1197..ed1b65da8 100644
--- a/agate/pattern-single-panel/src/App/App.js
+++ b/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',
diff --git a/agate/pattern-single-panel/src/components/ProfilePhotoPicker.js b/agate/pattern-single-panel/src/components/ProfilePhotoPicker.js
index e35888715..9f140c023 100644
--- a/agate/pattern-single-panel/src/components/ProfilePhotoPicker.js
+++ b/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,
diff --git a/agate/pattern-virtualgridlist-api/src/App/App.js b/agate/pattern-virtualgridlist-api/src/App/App.js
index c80787db4..d1210a6fb 100644
--- a/agate/pattern-virtualgridlist-api/src/App/App.js
+++ b/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',
diff --git a/agate/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js b/agate/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js
index b085de215..8f9c0f129 100755
--- a/agate/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js
+++ b/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',
diff --git a/agate/pattern-virtualgridlist-api/src/views/MainView.js b/agate/pattern-virtualgridlist-api/src/views/MainView.js
index f354b23e0..eaa7d673a 100644
--- a/agate/pattern-virtualgridlist-api/src/views/MainView.js
+++ b/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'];
 
diff --git a/agate/pattern-virtuallist-preserving-focus/src/views/PatternList.js b/agate/pattern-virtuallist-preserving-focus/src/views/PatternList.js
index 139066b97..0deca27bc 100644
--- a/agate/pattern-virtuallist-preserving-focus/src/views/PatternList.js
+++ b/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)}`);
 
diff --git a/moonstone/all-samples/src/App/App.js b/moonstone/all-samples/src/App/App.js
index 18447f45e..98304dd9a 100644
--- a/moonstone/all-samples/src/App/App.js
+++ b/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',
diff --git a/moonstone/all-samples/src/components/ButtonToSamples/ButtonToSamples.js b/moonstone/all-samples/src/components/ButtonToSamples/ButtonToSamples.js
index bf4800b3b..341db64a6 100644
--- a/moonstone/all-samples/src/components/ButtonToSamples/ButtonToSamples.js
+++ b/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}>
diff --git a/moonstone/pattern-analytics-webostv/src/App/App.js b/moonstone/pattern-analytics-webostv/src/App/App.js
index 8df9fac54..b64011964 100644
--- a/moonstone/pattern-analytics-webostv/src/App/App.js
+++ b/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',
diff --git a/moonstone/pattern-dynamic-panel/src/App/App.js b/moonstone/pattern-dynamic-panel/src/App/App.js
index 0b4f9538f..79befa1a7 100644
--- a/moonstone/pattern-dynamic-panel/src/App/App.js
+++ b/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(
diff --git a/moonstone/pattern-dynamic-panel/src/components/FileBrowser/FileBrowser.js b/moonstone/pattern-dynamic-panel/src/components/FileBrowser/FileBrowser.js
index c278074e8..5db28940a 100644
--- a/moonstone/pattern-dynamic-panel/src/components/FileBrowser/FileBrowser.js
+++ b/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: [
diff --git a/moonstone/pattern-locale-switching/src/App/App.js b/moonstone/pattern-locale-switching/src/App/App.js
index cae95788b..dac46dadc 100644
--- a/moonstone/pattern-locale-switching/src/App/App.js
+++ b/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',
diff --git a/moonstone/pattern-single-panel-redux/src/App/App.js b/moonstone/pattern-single-panel-redux/src/App/App.js
index 6f5ca34bb..65ce01e5c 100644
--- a/moonstone/pattern-single-panel-redux/src/App/App.js
+++ b/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',
diff --git a/moonstone/pattern-single-panel-redux/src/components/PhotoSlider.js b/moonstone/pattern-single-panel-redux/src/components/PhotoSlider.js
index f22302f18..a8df4af21 100644
--- a/moonstone/pattern-single-panel-redux/src/components/PhotoSlider.js
+++ b/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',
diff --git a/moonstone/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js b/moonstone/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js
index 17e410864..5be172e2a 100644
--- a/moonstone/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js
+++ b/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',
diff --git a/moonstone/pattern-single-panel/src/App/App.js b/moonstone/pattern-single-panel/src/App/App.js
index 6f5ca34bb..65ce01e5c 100644
--- a/moonstone/pattern-single-panel/src/App/App.js
+++ b/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',
diff --git a/moonstone/pattern-single-panel/src/components/ProfilePhotoPicker.js b/moonstone/pattern-single-panel/src/components/ProfilePhotoPicker.js
index dce002d24..db77d338e 100644
--- a/moonstone/pattern-single-panel/src/components/ProfilePhotoPicker.js
+++ b/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,
diff --git a/moonstone/pattern-video-player/src/App/App.js b/moonstone/pattern-video-player/src/App/App.js
index 61c05cdda..e27873128 100644
--- a/moonstone/pattern-video-player/src/App/App.js
+++ b/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];
 
diff --git a/moonstone/pattern-virtualgridlist-api/src/App/App.js b/moonstone/pattern-virtualgridlist-api/src/App/App.js
index 2bb1acf33..04a351ba3 100644
--- a/moonstone/pattern-virtualgridlist-api/src/App/App.js
+++ b/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',
diff --git a/moonstone/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js b/moonstone/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js
index 7c28b2b9b..f9940b658 100755
--- a/moonstone/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js
+++ b/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',
diff --git a/moonstone/pattern-virtualgridlist-api/src/views/MainView.js b/moonstone/pattern-virtualgridlist-api/src/views/MainView.js
index bfc0989e2..e12ff0e15 100644
--- a/moonstone/pattern-virtualgridlist-api/src/views/MainView.js
+++ b/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'];
 
diff --git a/moonstone/pattern-virtuallist-preserving-focus/src/views/PatternList.js b/moonstone/pattern-virtuallist-preserving-focus/src/views/PatternList.js
index 60abf8b56..32a24435d 100644
--- a/moonstone/pattern-virtuallist-preserving-focus/src/views/PatternList.js
+++ b/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)}`);
 
diff --git a/moonstone/tutorial-hello-enact/src/App/App.js b/moonstone/tutorial-hello-enact/src/App/App.js
index 959aff30d..03c66e861 100644
--- a/moonstone/tutorial-hello-enact/src/App/App.js
+++ b/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',
diff --git a/moonstone/tutorial-kitten-browser/src/components/Kitten/Kitten.js b/moonstone/tutorial-kitten-browser/src/components/Kitten/Kitten.js
index d2ebd36fe..99a08c40f 100644
--- a/moonstone/tutorial-kitten-browser/src/components/Kitten/Kitten.js
+++ b/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',
diff --git a/my-theme-app/src/App/App.js b/my-theme-app/src/App/App.js
index 05dcbe243..f47f9ffdd 100644
--- a/my-theme-app/src/App/App.js
+++ b/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',
diff --git a/my-theme-app/src/components/PanelHeader/PanelHeader.js b/my-theme-app/src/components/PanelHeader/PanelHeader.js
index 599845f88..0f0617ea3 100644
--- a/my-theme-app/src/components/PanelHeader/PanelHeader.js
+++ b/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',
diff --git a/my-theme-app/src/views/ButtonsIcons.js b/my-theme-app/src/views/ButtonsIcons.js
index 666bcfbc7..94ed3d5a9 100644
--- a/my-theme-app/src/views/ButtonsIcons.js
+++ b/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',
diff --git a/my-theme-app/src/views/Items.js b/my-theme-app/src/views/Items.js
index 10d4212fe..22bb0052e 100644
--- a/my-theme-app/src/views/Items.js
+++ b/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',
diff --git a/sandstone/all-samples/src/App/App.js b/sandstone/all-samples/src/App/App.js
index 100dc0af5..215f8265e 100644
--- a/sandstone/all-samples/src/App/App.js
+++ b/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',
diff --git a/sandstone/all-samples/src/components/ButtonToSamples/ButtonToSamples.js b/sandstone/all-samples/src/components/ButtonToSamples/ButtonToSamples.js
index 769275309..c8a79d20b 100644
--- a/sandstone/all-samples/src/components/ButtonToSamples/ButtonToSamples.js
+++ b/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}>
diff --git a/sandstone/feature-custom-skin-generator/src/App/App.js b/sandstone/feature-custom-skin-generator/src/App/App.js
index 89bc70cf7..ac9f5bdc9 100644
--- a/sandstone/feature-custom-skin-generator/src/App/App.js
+++ b/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',
diff --git a/sandstone/feature-custom-skin-generator/src/components/AutoPopup/AutoPopup.js b/sandstone/feature-custom-skin-generator/src/components/AutoPopup/AutoPopup.js
index 3f1da4ddf..c28047a5e 100644
--- a/sandstone/feature-custom-skin-generator/src/components/AutoPopup/AutoPopup.js
+++ b/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
diff --git a/sandstone/feature-custom-skin-generator/src/components/ColorPicker/ColorPicker.js b/sandstone/feature-custom-skin-generator/src/components/ColorPicker/ColorPicker.js
index eeebb7cf2..4f0c68baf 100644
--- a/sandstone/feature-custom-skin-generator/src/components/ColorPicker/ColorPicker.js
+++ b/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
diff --git a/sandstone/feature-custom-skin-generator/src/components/ImportSkin/ImportSkin.js b/sandstone/feature-custom-skin-generator/src/components/ImportSkin/ImportSkin.js
index 74d5985f3..9b09c363d 100644
--- a/sandstone/feature-custom-skin-generator/src/components/ImportSkin/ImportSkin.js
+++ b/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
diff --git a/sandstone/feature-custom-skin-generator/src/components/NameField/NameField.js b/sandstone/feature-custom-skin-generator/src/components/NameField/NameField.js
index c800486ef..531752bd5 100644
--- a/sandstone/feature-custom-skin-generator/src/components/NameField/NameField.js
+++ b/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
diff --git a/sandstone/feature-custom-skin-generator/src/components/OutputField/OutputField.js b/sandstone/feature-custom-skin-generator/src/components/OutputField/OutputField.js
index 3bd754493..17aaefb64 100644
--- a/sandstone/feature-custom-skin-generator/src/components/OutputField/OutputField.js
+++ b/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';
 
diff --git a/sandstone/feature-custom-skin-generator/src/components/SingleField/SingleField.js b/sandstone/feature-custom-skin-generator/src/components/SingleField/SingleField.js
index 0afa608cc..aeed235cd 100644
--- a/sandstone/feature-custom-skin-generator/src/components/SingleField/SingleField.js
+++ b/sandstone/feature-custom-skin-generator/src/components/SingleField/SingleField.js
@@ -7,8 +7,8 @@ import PropTypes from 'prop-types';
 
 import ColorPicker from '../ColorPicker/ColorPicker';
 
-import commonCss from '../../common/styles.module.less';
-import componentCss from './SingleField.module.less';
+import * as commonCss from '../../common/styles.module.less';
+import * as componentCss from './SingleField.module.less';
 
 /**
  * A component that contains a label and an input field, used to change the value of a css attribute
diff --git a/sandstone/feature-custom-skin-generator/src/components/TripleField/TripleField.js b/sandstone/feature-custom-skin-generator/src/components/TripleField/TripleField.js
index b6c6991a2..f9d17add9 100644
--- a/sandstone/feature-custom-skin-generator/src/components/TripleField/TripleField.js
+++ b/sandstone/feature-custom-skin-generator/src/components/TripleField/TripleField.js
@@ -9,8 +9,8 @@ import ColorPicker from '../ColorPicker/ColorPicker';
 
 import {convertHexToRGB, convertRGBToHex} from '../../utils';
 
-import commonCss from '../../common/styles.module.less';
-import componentCss from './TripleField.module.less';
+import * as commonCss from '../../common/styles.module.less';
+import * as componentCss from './TripleField.module.less';
 
 /**
  * A component that contains a label and three input fields, used to change the value of a css attribute
diff --git a/sandstone/feature-custom-skin-generator/src/views/MainPanel.js b/sandstone/feature-custom-skin-generator/src/views/MainPanel.js
index 27b81acaf..73c0736a3 100644
--- a/sandstone/feature-custom-skin-generator/src/views/MainPanel.js
+++ b/sandstone/feature-custom-skin-generator/src/views/MainPanel.js
@@ -34,7 +34,7 @@ import {
 } from '../utils';
 
 import styles from '../common/styles.module.less';
-import css from './MainPanel.module.less';
+import * as css from './MainPanel.module.less';
 
 const TooltipButton = TooltipDecorator({tooltipDestinationProp: 'decoration'}, Button);
 
diff --git a/sandstone/pattern-account-icon/src/components/AccountIcon.js b/sandstone/pattern-account-icon/src/components/AccountIcon.js
index e4129db2d..b6274a9c1 100644
--- a/sandstone/pattern-account-icon/src/components/AccountIcon.js
+++ b/sandstone/pattern-account-icon/src/components/AccountIcon.js
@@ -2,7 +2,7 @@ import Icon from '@enact/sandstone/Icon';
 import PropTypes from 'prop-types';
 
 // For custom style of account icon
-import css from './AccountIcon.module.less';
+import * as css from './AccountIcon.module.less';
 
 const AccountIcon = ({bgColor, children}) => {
 	const accountStyle = {
diff --git a/sandstone/pattern-account-icon/src/views/MainPanel.js b/sandstone/pattern-account-icon/src/views/MainPanel.js
index c8faa6576..092e0b61b 100644
--- a/sandstone/pattern-account-icon/src/views/MainPanel.js
+++ b/sandstone/pattern-account-icon/src/views/MainPanel.js
@@ -8,7 +8,7 @@ import AccountIcon from '../components/AccountIcon';
 
 // In sandstone theme, the text color changes to gray tone when the button is focused.
 // A custom style is needed to prevent this and maintain the white tone text color.
-import css from './MainPanel.module.less';
+import * as css from './MainPanel.module.less';
 
 const MainPanel = kind({
 	name: 'MainPanel',
diff --git a/sandstone/pattern-analytics-webostv/src/App/App.js b/sandstone/pattern-analytics-webostv/src/App/App.js
index 950a682eb..8a433a0d5 100644
--- a/sandstone/pattern-analytics-webostv/src/App/App.js
+++ b/sandstone/pattern-analytics-webostv/src/App/App.js
@@ -4,7 +4,7 @@ import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
 
 import MainPanel from '../views/MainPanel';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const App = kind({
 	name: 'App',
diff --git a/sandstone/pattern-dynamic-panel/src/App/App.js b/sandstone/pattern-dynamic-panel/src/App/App.js
index 1df64134b..bae31a6a4 100644
--- a/sandstone/pattern-dynamic-panel/src/App/App.js
+++ b/sandstone/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(
diff --git a/sandstone/pattern-locale-switching/src/App/App.js b/sandstone/pattern-locale-switching/src/App/App.js
index c2c00e295..139b95a27 100644
--- a/sandstone/pattern-locale-switching/src/App/App.js
+++ b/sandstone/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',
diff --git a/sandstone/pattern-react18-new/src/App/App.js b/sandstone/pattern-react18-new/src/App/App.js
index e456891ae..2f6027ed4 100644
--- a/sandstone/pattern-react18-new/src/App/App.js
+++ b/sandstone/pattern-react18-new/src/App/App.js
@@ -7,7 +7,7 @@ import Batching from '../views/Batching/Batching';
 import Suspense from '../views/Suspense/Suspense';
 import UseTransition from '../views/UseTransition/UseTransition';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const App = (props) => {
 	return (
diff --git a/sandstone/pattern-react18-new/src/views/UseTransition/UseTransition.js b/sandstone/pattern-react18-new/src/views/UseTransition/UseTransition.js
index c4c789962..7b38b9397 100644
--- a/sandstone/pattern-react18-new/src/views/UseTransition/UseTransition.js
+++ b/sandstone/pattern-react18-new/src/views/UseTransition/UseTransition.js
@@ -10,7 +10,7 @@ import {Suspense, useState, useTransition} from 'react';
 import Content, {ContentUseTransition} from './Content';
 import {fetchDataUseTransition} from './FakeApi';
 
-import css from './UseTransition.module.less';
+import * as css from './UseTransition.module.less';
 
 const initialResource = fetchDataUseTransition();
 
diff --git a/sandstone/pattern-single-panel-redux/src/App/App.js b/sandstone/pattern-single-panel-redux/src/App/App.js
index e33eb79ed..62bb853f9 100644
--- a/sandstone/pattern-single-panel-redux/src/App/App.js
+++ b/sandstone/pattern-single-panel-redux/src/App/App.js
@@ -4,7 +4,7 @@ import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
 
 import MainPanel from '../views/MainPanel';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const AppBase = kind({
 	name: 'App',
diff --git a/sandstone/pattern-single-panel-redux/src/components/PhotoSlider.js b/sandstone/pattern-single-panel-redux/src/components/PhotoSlider.js
index baa6f3819..e9476b682 100644
--- a/sandstone/pattern-single-panel-redux/src/components/PhotoSlider.js
+++ b/sandstone/pattern-single-panel-redux/src/components/PhotoSlider.js
@@ -2,7 +2,7 @@ import kind from '@enact/core/kind';
 import Slider from '@enact/sandstone/Slider';
 import PropTypes from 'prop-types';
 
-import css from './componentStyles.module.less';
+import * as css from './componentStyles.module.less';
 
 const PhotoSlider = kind({
 	name: 'PhotoSlider',
diff --git a/sandstone/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js b/sandstone/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js
index 445060c1f..fe50a3907 100644
--- a/sandstone/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js
+++ b/sandstone/pattern-single-panel-redux/src/containers/PhotoPreviewContainer.js
@@ -3,7 +3,7 @@ import Image from '@enact/sandstone/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',
diff --git a/sandstone/pattern-single-panel/src/App/App.js b/sandstone/pattern-single-panel/src/App/App.js
index e33eb79ed..62bb853f9 100644
--- a/sandstone/pattern-single-panel/src/App/App.js
+++ b/sandstone/pattern-single-panel/src/App/App.js
@@ -4,7 +4,7 @@ import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
 
 import MainPanel from '../views/MainPanel';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const AppBase = kind({
 	name: 'App',
diff --git a/sandstone/pattern-single-panel/src/components/ProfilePhotoPicker.js b/sandstone/pattern-single-panel/src/components/ProfilePhotoPicker.js
index 35c09f728..2118ea294 100644
--- a/sandstone/pattern-single-panel/src/components/ProfilePhotoPicker.js
+++ b/sandstone/pattern-single-panel/src/components/ProfilePhotoPicker.js
@@ -11,7 +11,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,
diff --git a/sandstone/pattern-video-player-custom/src/App/App.js b/sandstone/pattern-video-player-custom/src/App/App.js
index 9beb32138..fb7a4c547 100644
--- a/sandstone/pattern-video-player-custom/src/App/App.js
+++ b/sandstone/pattern-video-player-custom/src/App/App.js
@@ -13,7 +13,7 @@ import SubtitleSelectionPanel from '../views/SubtitleSelectionPanel';
 
 import videos from './videos.js';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const getVideo = (index) => videos[index];
 
diff --git a/sandstone/pattern-video-player/src/App/App.js b/sandstone/pattern-video-player/src/App/App.js
index 87d72aa93..02c7f107e 100644
--- a/sandstone/pattern-video-player/src/App/App.js
+++ b/sandstone/pattern-video-player/src/App/App.js
@@ -12,7 +12,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];
 
diff --git a/sandstone/pattern-virtualgridlist-api/src/App/App.js b/sandstone/pattern-virtualgridlist-api/src/App/App.js
index bef7f5a76..39de6dd60 100644
--- a/sandstone/pattern-virtualgridlist-api/src/App/App.js
+++ b/sandstone/pattern-virtualgridlist-api/src/App/App.js
@@ -3,7 +3,7 @@ import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
 
 import MainView from '../views/MainView';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const AppBase = kind({
 	name: 'App',
diff --git a/sandstone/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js b/sandstone/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js
index df71035d9..80786ba2e 100755
--- a/sandstone/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js
+++ b/sandstone/pattern-virtualgridlist-api/src/components/SideBar/SideBar.js
@@ -4,7 +4,7 @@ import Button from '@enact/sandstone/Button';
 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',
diff --git a/sandstone/pattern-virtualgridlist-api/src/views/MainView.js b/sandstone/pattern-virtualgridlist-api/src/views/MainView.js
index bfc0989e2..e12ff0e15 100644
--- a/sandstone/pattern-virtualgridlist-api/src/views/MainView.js
+++ b/sandstone/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'];
 
diff --git a/sandstone/pattern-virtuallist-preserving-focus/src/views/PatternList.js b/sandstone/pattern-virtuallist-preserving-focus/src/views/PatternList.js
index c9ac33809..236445bd0 100644
--- a/sandstone/pattern-virtuallist-preserving-focus/src/views/PatternList.js
+++ b/sandstone/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)}`);
 
diff --git a/sandstone/tutorial-hello-enact/src/App/App.js b/sandstone/tutorial-hello-enact/src/App/App.js
index c79d564b9..5a58b8376 100644
--- a/sandstone/tutorial-hello-enact/src/App/App.js
+++ b/sandstone/tutorial-hello-enact/src/App/App.js
@@ -1,7 +1,7 @@
 import kind from '@enact/core/kind';
 import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const AppBase = kind({
 	name: 'App',
diff --git a/sandstone/tutorial-kitten-browser/src/components/Kitten/Kitten.js b/sandstone/tutorial-kitten-browser/src/components/Kitten/Kitten.js
index 8711aeb90..5b7170e82 100644
--- a/sandstone/tutorial-kitten-browser/src/components/Kitten/Kitten.js
+++ b/sandstone/tutorial-kitten-browser/src/components/Kitten/Kitten.js
@@ -2,7 +2,7 @@ import kind from '@enact/core/kind';
 import Spottable from '@enact/spotlight/Spottable';
 import PropTypes from 'prop-types';
 
-import css from './Kitten.module.less';
+import * as css from './Kitten.module.less';
 
 const SpottableDiv = Spottable('div');
 
diff --git a/tutorial-typescript/src/App/App.tsx b/tutorial-typescript/src/App/App.tsx
index 950a682eb..8a433a0d5 100644
--- a/tutorial-typescript/src/App/App.tsx
+++ b/tutorial-typescript/src/App/App.tsx
@@ -4,7 +4,7 @@ import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
 
 import MainPanel from '../views/MainPanel';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const App = kind({
 	name: 'App',
diff --git a/ui/all-samples/src/App/App.js b/ui/all-samples/src/App/App.js
index 93decf1c5..f91eab926 100644
--- a/ui/all-samples/src/App/App.js
+++ b/ui/all-samples/src/App/App.js
@@ -5,7 +5,7 @@ import SampleItem from '../components/SampleItem';
 import Scroller from '@enact/ui/Scroller';
 import {useNavigate} from 'react-router-dom';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const App = kind({
 	name: 'App',
diff --git a/ui/all-samples/src/components/ButtonToSamples/ButtonToSamples.js b/ui/all-samples/src/components/ButtonToSamples/ButtonToSamples.js
index cbc3a25b7..98273284f 100644
--- a/ui/all-samples/src/components/ButtonToSamples/ButtonToSamples.js
+++ b/ui/all-samples/src/components/ButtonToSamples/ButtonToSamples.js
@@ -1,7 +1,7 @@
 import Button from '@enact/ui/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}>
diff --git a/ui/pattern-analytics/src/App/App.js b/ui/pattern-analytics/src/App/App.js
index 8f1f35fae..b35749ccd 100644
--- a/ui/pattern-analytics/src/App/App.js
+++ b/ui/pattern-analytics/src/App/App.js
@@ -2,7 +2,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',
diff --git a/ui/pattern-analytics/src/views/MainPanel.js b/ui/pattern-analytics/src/views/MainPanel.js
index 62f4c3ff8..484daff91 100644
--- a/ui/pattern-analytics/src/views/MainPanel.js
+++ b/ui/pattern-analytics/src/views/MainPanel.js
@@ -3,7 +3,7 @@ import Button from '@enact/ui/Button';
 import BodyText from '@enact/ui/BodyText';
 import Heading from '@enact/ui/Heading';
 
-import css from './MainPanel.module.less';
+import * as css from './MainPanel.module.less';
 
 const MainPanel = kind({
 	name: 'MainPanel',
diff --git a/ui/pattern-list-details-redux/src/App/App.js b/ui/pattern-list-details-redux/src/App/App.js
index 9b8a8b02b..9dd8b56d9 100644
--- a/ui/pattern-list-details-redux/src/App/App.js
+++ b/ui/pattern-list-details-redux/src/App/App.js
@@ -2,7 +2,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 App = kind({
 	name: 'App',
diff --git a/ui/pattern-list-details-redux/src/components/Content.js b/ui/pattern-list-details-redux/src/components/Content.js
index 91e8f2346..c5cca0221 100644
--- a/ui/pattern-list-details-redux/src/components/Content.js
+++ b/ui/pattern-list-details-redux/src/components/Content.js
@@ -17,7 +17,7 @@ import seoul from '/assets/images/seoul.jpeg';
 import tokyo from '/assets/images/tokyo.jpeg';
 import valencia from '/assets/images/valencia.jpg';
 
-import css from './Content.module.less';
+import * as css from './Content.module.less';
 
 const cityPhotos = {
 	barcelona,
diff --git a/ui/pattern-list-details-redux/src/components/Nav/CountryButton.js b/ui/pattern-list-details-redux/src/components/Nav/CountryButton.js
index 46d91a362..516b2601a 100644
--- a/ui/pattern-list-details-redux/src/components/Nav/CountryButton.js
+++ b/ui/pattern-list-details-redux/src/components/Nav/CountryButton.js
@@ -3,7 +3,7 @@ import Button from '@enact/ui/Button';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
-import css from './CountryButton.module.less';
+import * as css from './CountryButton.module.less';
 
 const CountryButton = kind({
 	name: 'CountryButton',
diff --git a/ui/pattern-list-details-redux/src/components/SideBar/CityItem.js b/ui/pattern-list-details-redux/src/components/SideBar/CityItem.js
index 272fc5d59..397cf134f 100644
--- a/ui/pattern-list-details-redux/src/components/SideBar/CityItem.js
+++ b/ui/pattern-list-details-redux/src/components/SideBar/CityItem.js
@@ -4,7 +4,7 @@ import Item from '@enact/ui/Item';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
-import css from './CityItem.module.less';
+import * as css from './CityItem.module.less';
 
 const CityItem = kind({
 	name: 'CityItem',
diff --git a/ui/pattern-list-details-redux/src/views/Body.js b/ui/pattern-list-details-redux/src/views/Body.js
index 411684b31..1824d9a6c 100644
--- a/ui/pattern-list-details-redux/src/views/Body.js
+++ b/ui/pattern-list-details-redux/src/views/Body.js
@@ -4,7 +4,7 @@ import {Cell, Row} from '@enact/ui/Layout';
 import ContentContainer from '../containers/ContentContainer';
 import SideBarContainer from '../containers/SideBarContainer';
 
-import css from './Body.module.less';
+import * as css from './Body.module.less';
 
 const Body = kind({
 	name: 'Body',
diff --git a/ui/pattern-list-details-redux/src/views/MainView.js b/ui/pattern-list-details-redux/src/views/MainView.js
index 64e6f0dd3..bc3c4708b 100644
--- a/ui/pattern-list-details-redux/src/views/MainView.js
+++ b/ui/pattern-list-details-redux/src/views/MainView.js
@@ -5,7 +5,7 @@ import NavContainer from '../containers/NavContainer';
 
 import Body from './Body';
 
-import css from './MainView.module.less';
+import * as css from './MainView.module.less';
 
 const MainView = kind({
 	name: 'MainView',
diff --git a/ui/pattern-list-details/src/App/App.js b/ui/pattern-list-details/src/App/App.js
index 9b8a8b02b..9dd8b56d9 100644
--- a/ui/pattern-list-details/src/App/App.js
+++ b/ui/pattern-list-details/src/App/App.js
@@ -2,7 +2,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 App = kind({
 	name: 'App',
diff --git a/ui/pattern-list-details/src/components/Content.js b/ui/pattern-list-details/src/components/Content.js
index 712415a41..61744a9ec 100644
--- a/ui/pattern-list-details/src/components/Content.js
+++ b/ui/pattern-list-details/src/components/Content.js
@@ -17,7 +17,7 @@ import seoul from '../../assets/images/seoul.jpeg';
 import tokyo from '../../assets/images/tokyo.jpeg';
 import valencia from '../../assets/images/valencia.jpg';
 
-import css from './Content.module.less';
+import * as css from './Content.module.less';
 
 const cityPhotos = {
 	barcelona,
diff --git a/ui/pattern-list-details/src/components/Nav.js b/ui/pattern-list-details/src/components/Nav.js
index a4172c00d..2445601da 100644
--- a/ui/pattern-list-details/src/components/Nav.js
+++ b/ui/pattern-list-details/src/components/Nav.js
@@ -3,7 +3,7 @@ import Button from '@enact/ui/Button';
 import Group from '@enact/ui/Group';
 import PropTypes from 'prop-types';
 
-import css from './Nav.module.less';
+import * as css from './Nav.module.less';
 
 const Nav = kind({
 	name: 'Nav',
diff --git a/ui/pattern-list-details/src/components/SideBar.js b/ui/pattern-list-details/src/components/SideBar.js
index abf064444..036e18f62 100644
--- a/ui/pattern-list-details/src/components/SideBar.js
+++ b/ui/pattern-list-details/src/components/SideBar.js
@@ -3,7 +3,7 @@ import Group from '@enact/ui/Group';
 import Item from '@enact/ui/Item';
 import PropTypes from 'prop-types';
 
-import css from './SideBar.module.less';
+import * as css from './SideBar.module.less';
 
 const SideBar = kind({
 	name: 'SideBar',
diff --git a/ui/pattern-list-details/src/views/Body.js b/ui/pattern-list-details/src/views/Body.js
index bf0ae072f..9af8b2997 100644
--- a/ui/pattern-list-details/src/views/Body.js
+++ b/ui/pattern-list-details/src/views/Body.js
@@ -5,7 +5,7 @@ import {useCallback, useEffect, useState} from 'react';
 import Content from '../components/Content';
 import SideBar from '../components/SideBar';
 
-import css from './Body.module.less';
+import * as css from './Body.module.less';
 
 const Body = ({cities, selectedCountry, ...rest}) => {
 	const [city, setCity] = useState(cities['usa'][0]);
diff --git a/ui/pattern-list-details/src/views/MainView.js b/ui/pattern-list-details/src/views/MainView.js
index 6a266fb96..b323d9469 100644
--- a/ui/pattern-list-details/src/views/MainView.js
+++ b/ui/pattern-list-details/src/views/MainView.js
@@ -5,7 +5,7 @@ import Nav from '../components/Nav';
 
 import Body from './Body';
 
-import css from './MainView.module.less';
+import * as css from './MainView.module.less';
 
 const cities = {
 	usa: ['San Francisco', 'Los Angeles', 'New York City'],
diff --git a/ui/pattern-ls2request/src/App/App.js b/ui/pattern-ls2request/src/App/App.js
index 27624b6ed..13b8cf329 100644
--- a/ui/pattern-ls2request/src/App/App.js
+++ b/ui/pattern-ls2request/src/App/App.js
@@ -5,7 +5,7 @@ import {useSelector, useDispatch} from 'react-redux';
 
 import {getSystemSettings, setSystemSettings, setSystemSettingsSubscribed} from '../store';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const App = () => {
 	const {brightness, eyeComfortMode} = useSelector(state => state);