WRQ-19494: css-loader v7 migration

.travis.yml

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

docs/creating-components.md

@@ -187,7 +187,7 @@ Then, in our component we'll just apply the imported LESS file to the component
 import kind from '@enact/core/kind';
 import Button from '@enact/sandstone/Button';
 
-import css from './CustomButton.less';
+import * as css from './CustomButton.less';
 
 const CustomButton = kind({
 	name: 'CustomizedButton',

docs/interoperability.md

@@ -124,7 +124,7 @@ is a good reference for enabling CSS modules prior to `2.0.0`.
 import Button from '@enact/sandstone/Button';
 import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
 
-import buttonCss from './Button.module.css';
+import * as buttonCss from './Button.module.css';
 
 function App() {
 	return (

docs/migration/enact/migrating-to-enact-2.md

@@ -23,7 +23,7 @@ The `factory` module has been replaced by the `css` override feature.
 import factory from '@enact/core/factory';
 import kind from '@enact/core/kind';
 
-import componentCss from './Button.module.less';
+import * as componentCss from './Button.module.less';
 
 const ButtonFactory = factory({css: componentCss}, ({css}) => {
 	return kind({
@@ -49,7 +49,7 @@ const ButtonFactory = factory({css: componentCss}, ({css}) => {
 
 // If `buttonCss` includes a `button` class, it will be appended to the `button` class of the
 // `Button` component.
-import buttonCss from './CustomButton.less';
+import * as buttonCss from './CustomButton.less';
 const CustomizedButton = ButtonFactory({css: buttonCss});
 ...
 	render: ({...rest}) => {
@@ -68,7 +68,7 @@ import Button from '@enact/ui/Button';
 
 // If `buttonCss` includes a `button` class, it will be appended to the `button` class of the
 // `Button` component.
-import buttonCss from './CustomButton.less';
+import * as buttonCss from './CustomButton.less';
 ...
 	render: ({...rest}) => {
 		return (

docs/migration/enact/migrating-to-enact-3.md

@@ -196,7 +196,7 @@ pseudo-selector.
 import {Input} from '@enact/moonstone';
 import kind from '@enact/core/kind';
 
-import css from './CustomInput.less';
+import * as css from './CustomInput.less';
 
 const CustomInput = kind({
 ...
@@ -228,7 +228,7 @@ const CustomInput = kind({
 import {Input} from '@enact/moonstone';
 import kind from '@enact/core/kind';
 
-import css from './CustomInput.less';
+import * as css from './CustomInput.less';
 
 const CustomInput = kind({
 ...

docs/theming.md

@@ -53,7 +53,7 @@ Let's look at an example, Sandstone's `Button`:
 import kind from '@enact/core/kind';
 import UiButton from '@enact/ui/Button';
 
-import componentCss from './Button.module.less';
+import * as componentCss from './Button.module.less';
 
 const Button = kind({
 	name: 'CustomizedButton',
@@ -111,7 +111,7 @@ When creating customizable components it may be helpful to understand how the th
 When a LESS or CSS file is imported, the classes are inventoried and a hash map is generated of original class names to obfuscated modularized class names: `{original: obfuscated}`. Your module now has a map of all of the class names you referenced. Normally, when using `kind()` you simply pass this into the `styles` block, and indicate which one is your base class, with the `className` key.
 
 ```js
-import css from './Button.module.less';
+import * as css from './Button.module.less';
 ...
 {
 	css,	// Via ES6, the `css` variable is converted to {'css': css}
@@ -156,7 +156,7 @@ Let's look at our combined example again.
 import kind from '@enact/core/kind';
 import UiButton from '@enact/ui/Button';
 
-import componentCss from './Button.module.less';
+import * as componentCss from './Button.module.less';
 
 const Button = kind({
 	name: 'CustomizedButton',

docs/why-use-kind.md

@@ -145,7 +145,7 @@ Let's see:
 
 ```js
 import classNames from 'classnames';
-import css from './hooray.less';
+import * as css from './hooray.less';
 
 const Hooray = ({name, className, ...rest}) => {
 	const formattedName = name ? ', ' + name : '';
@@ -164,7 +164,7 @@ export default Hooray;
 With `kind()`:
 
 ```js
-import css from './hooray.less';
+import * as css from './hooray.less';
 
 export default kind({
 	propTypes: {

packages/core/kind/kind.js

@@ -73,7 +73,7 @@ const NoContext = createContext(null);
  *
  * Example:
  * ```
- *	import css from './Button.module.less';
+ *	import * as css from './Button.module.less';
  *	const Button = kind({
  *		name: 'Button',
  *		// Return a functional component

packages/sampler/.storybook/main.js

@@ -1,27 +1,46 @@
+/* global __dirname */
+
 const webpack = require('@enact/storybook-utils/configs/webpack');
+const {loadCsf} = require('@storybook/csf-tools');
+const {readFileSync}  = require('fs');
 
 module.exports = {
 	core: {
-		builder: 'webpack5',
 		disableTelemetry: true
 	},
 	features: {
 		postcss: false,
-		storyStoreV7: true,
 		warnOnLegacyHierarchySeparator: false
 	},
-	framework: '@storybook/react',
+	framework: {
+		name: '@storybook/react-webpack5'
+	},
+	experimental_indexers: (indexers) => { // eslint-disable-line camelcase
+		const createIndex = async (fileName, opts) => {
+			const code = readFileSync(fileName, {encoding: 'utf-8'});
+			return loadCsf(code, {...opts, fileName}).parse().indexInputs;
+		};
+
+		return [
+			{
+				test: /\.[tj]sx?$/,
+				createIndex
+			},
+			...(indexers || [])
+		];
+	},
 	stories: ['./../stories/default/*.js'],
+	staticDirs: ['../public'],
 	addons: [
 		'@enact/storybook-utils/addons/actions',
 		'@enact/storybook-utils/addons/controls',
-		'@enact/storybook-utils/addons/docs',
-		'@enact/storybook-utils/addons/toolbars'
+		'@enact/storybook-utils/addons/toolbars',
+		'@storybook/addon-docs'
 	],
 	webpackFinal: async (config, {configType}) => {
 		return webpack(config, configType, __dirname);
 	},
 	typescript: {
 		reactDocgen: false
 	}
-}
+};

packages/sampler/.storybook/manager.js

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 import {create} from '@storybook/theming';
 
 addons.setConfig({
@@ -8,8 +8,5 @@ addons.setConfig({
 		brandUrl: 'http://enactjs.com/',
 		brandImage: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDAiIGhlaWdo  dD0iNzAwIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCI+PGRlZnM+PHN0eWxlPi5hLC5ie2ZpbGw6I2ZmZjt9LmJ7b3BhY2l0eTowLjg7fTwvc3R5bGU+PC9kZWZzPjxwb2x  5Z29uIGNsYXNzPSJhIiBwb2ludHM9IjM0OS45IDUyNy44IDE5OS45IDQyOS44IDE5OS45IDM3NC40IDM1MC4xIDQ3Mi43IDM0OS45IDM0OC41IDE5OS45IDI2MS4xID  E5OS45IDIwOS4zIDM1MCAyOTMuNiAzNTAgMjkzLjYgMzUwLjIgMjkzLjcgMzQ5LjkgMTY5LjMgMTAyLjcgNDguNSAxMDIuNyA0NzIuNiAzNTAuMSA2NTEuNiAzNDkuO  SA1MjcuOCIvPjxwb2x5Z29uIGNsYXNzPSJiIiBwb2ludHM9IjM1MC4xIDY1MS42IDU5Ny4zIDQ3Mi44IDU5Ny4zIDM2Ni4zIDM0OS45IDUyNy44IDM1MC4xIDY1MS42  Ii8+PHBvbHlnb24gY2xhc3M9ImIiIHBvaW50cz0iMzUwLjEgNDcyLjcgNTIzLjUgMzU5LjMgNTIzLjUgMjQ3LjQgMzQ5LjkgMzQ4LjUgMzUwLjEgNDcyLjciLz48cG9  seWdvbiBjbGFzcz0iYiIgcG9pbnRzPSIzNTAgMjkzLjYgMzUwIDI5My42IDM1MC4yIDI5My43IDU5Ny4zIDE1NC44IDU5Ny4zIDQ4LjQgMzQ5LjkgMTY5LjMgMzUwID  I5My42Ii8+PC9zdmc+'
 	}),
-	isFullscreen: false,
-	showNav: true,
-	showPanel: true,
 	panelPosition: 'bottom'
 });

packages/sampler/.storybook/preview.js

@@ -1,8 +1,5 @@
 import {configureActions} from '@enact/storybook-utils/addons/actions';
 import {getBooleanType, getObjectType} from '@enact/storybook-utils/addons/controls';
-import {DocsContainer, Primary, Title} from '@enact/storybook-utils/addons/docs';
-import ri from '@enact/ui/resolution';
-import {themes} from '@storybook/theming';
 
 import Environment from '../src/Environment';
 
@@ -40,18 +37,6 @@ const backgrounds = {
 configureActions();
 
 export const parameters = {
-	docs: {
-		container: DocsContainer,
-		inlineStories: false,
-		iframeHeight: ri.scaleToRem(300),
-		page: () => (
-			<>
-				<Title />
-				<Primary />
-			</>
-		),
-		theme: themes.light
-	},
 	options: {
 		storySort: {
 			method: 'alphabetical'