Merge pull request #6099 from valadas/css-loader-update

Bumped css-loader to v7.1.2

.gitignore

@@ -148,3 +148,5 @@ yarn-error.log
 
 /DotNetNuke.Internal.SourceGenerators/bin/
 /DNN Platform/Tests/DotNetNuke.Tests.SourceGenerators/Snapshots/*.received.*
+Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Pages/scripts/bundles/
+Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Roles/scripts/bundles/

Dnn.AdminExperience/ClientSide/AdminLogs.Web/package.json

@@ -21,7 +21,7 @@
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "babel-polyfill": "6.26.0",
     "create-react-class": "^15.7.0",
-    "css-loader": "2.1.1",
+    "css-loader": "^7.1.2",
     "es6-object-assign": "1.1.0",
     "eslint": "7.32.0",
     "eslint-loader": "4.0.2",

Dnn.AdminExperience/ClientSide/AdminLogs.Web/webpack.config.js

@@ -48,7 +48,19 @@ module.exports = (env, argv) => {
                     test: /\.(less|css)$/,
                     use: [
                         { loader: "style-loader" },
-                        { loader: "css-loader", options: { modules: "global" } },
+                        {
+                            loader: "css-loader",
+                            options: {
+                                importLoaders: 1,
+                                sourceMap: true,
+                                modules: {
+                                    auto: true,
+                                    mode: "global",
+                                    localIdentName: "[name]__[local]___[hash:base64:5]",
+                                },
+                                esModule: false,
+                            },
+                        },
                         { loader: "less-loader" },
                     ],
                 },

Dnn.AdminExperience/ClientSide/Bundle.Web/package.json

@@ -22,7 +22,7 @@
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "babel-polyfill": "6.26.0",
     "create-react-class": "^15.7.0",
-    "css-loader": "2.1.1",
+    "css-loader": "^7.1.2",
     "dayjs": "^1.11.9",
     "es6-object-assign": "1.1.0",
     "es6-promise": "4.2.8",

Dnn.AdminExperience/ClientSide/Bundle.Web/src/components/BackTo/BackTo.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
-import styles from "./style.less";
+import styles from "./style.module.less";
 import { ArrowBack } from "@dnnsoftware/dnn-react-common";
 
 /* eslint-disable react/no-danger */

Dnn.AdminExperience/ClientSide/Bundle.Web/webpack.config.js

@@ -47,7 +47,24 @@ module.exports = (env, argv) => {
                 },
                 {
                     test: /\.(less|css)$/,
-                    use: ["style-loader", "css-loader", "less-loader"],
+                    use:
+                    [
+                        "style-loader",
+                        {
+                            loader: "css-loader",
+                            options: {
+                                importLoaders: 1,
+                                sourceMap: true,
+                                modules: {
+                                    auto: true,
+                                    mode: "global",
+                                    localIdentName: "[name]__[local]___[hash:base64:5]",
+                                },
+                                esModule: false,
+                            },
+                        },
+                        "less-loader"
+                    ],
                 },
                 {
                     test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,

Dnn.AdminExperience/ClientSide/Dnn.React.Common/.storybook/webpack.config.js

@@ -5,7 +5,18 @@ module.exports = {
         rules: [
             {
                 test: /\.less$/,
-                use: ["style-loader", "css-loader", "less-loader"],
+                use:
+                [
+                    {
+                        loader: "css-loader",
+                        options: {
+                            importLoaders: 1,
+                            sourceMap: true,
+                            esModule: false,
+                        },
+                    },
+                    "less-loader"
+                ],
                 include: path.resolve(__dirname, "../")
             },
             {

Dnn.AdminExperience/ClientSide/Dnn.React.Common/dist.webpack.config.js

@@ -29,7 +29,25 @@ module.exports = {
                 ],
             },
             { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"] },
-            { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
+            { test: /\.less$/, use:
+                [
+                    "style-loader",
+                    {
+                        loader: "css-loader",
+                        options: {
+                            importLoaders: 1,
+                            sourceMap: true,
+                            modules: {
+                                auto: true,
+                                mode: "global",
+                                localIdentName: "[name]__[local]___[hash:base64:5]",
+                            },
+                            esModule: false,
+                        },
+                    },
+                    "less-loader"
+                ]
+            },
             { test: /\.(ttf|woff)$/, use: ["url-loader?limit=8192"] },
             { test: /\.css$/, use: ["style-loader!css-loader"] },
             { test: /\.(gif|png)$/, use: ["url-loader?mimetype=image/png"] },

Dnn.AdminExperience/ClientSide/Dnn.React.Common/package.json

@@ -40,7 +40,6 @@
     "react-widgets": "^5.8.4",
     "redux-undo": "^1.0.0-beta9",
     "scroll": "^3.0.1",
-    "shortid": "^2.2.16",
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
@@ -57,7 +56,7 @@
     "babel-polyfill": "6.26.0",
     "cpy-cli": "^2.0.0",
     "create-react-class": "^15.7.0",
-    "css-loader": "2.1.1",
+    "css-loader": "^7.1.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
     "enzyme-to-json": "^3.6.2",
@@ -74,6 +73,7 @@
     "file-loader": "3.0.1",
     "less": "4.1.3",
     "less-loader": "12.2.0",
+    "nanoid": "^5.0.7",
     "prop-types": "^15.8.1",
     "raw-loader": "2.0.0",
     "react": "^16.14.0",

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/TreeControlInteractor/icons/arrow-icon/_arrow_icon.jsx

@@ -7,7 +7,7 @@ import { global } from "../../global";
 const styles = global.styles;
 const merge = styles.merge;
 
-import * as shortid from "shortid";
+import { nanoid } from "nanoid/non-secure";
 
 const style = (direction) => {
     return {
@@ -23,7 +23,7 @@ export class ArrowIcon extends Component {
     constructor(props) {
         super();
         this.direction = props.direction;
-        this.id = shortid.generate();
+        this.id = nanoid();
         this.state = {};
     }
 

Dnn.AdminExperience/ClientSide/Extensions.Web/package.json

@@ -19,7 +19,7 @@
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "babel-polyfill": "6.26.0",
     "create-react-class": "^15.7.0",
-    "css-loader": "2.1.1",
+    "css-loader": "^7.1.2",
     "eslint": "7.32.0",
     "eslint-loader": "4.0.2",
     "eslint-plugin-react": "7.13.0",

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/Body/AvailableExtensions/common/ExtensionDetailRow/index.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { GridCell, Button, TextOverflowWrapper } from "@dnnsoftware/dnn-react-common";
-import styles from "./style.less";
+import styles from "./style.module.less";
 import Localization from "localization";
 import ColumnSizes from "../ExtensionColumnSizes";
 import util from "utils";

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/Body/AvailableExtensions/common/ExtensionHeader/index.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { GridCell } from "@dnnsoftware/dnn-react-common";
 import Localization from "localization";
 import ColumnSizes from "../ExtensionColumnSizes";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const ExtensionHeader = () => (
     <GridCell className={styles.extensionHeader} columnSize={100} style={{ padding: "20px 20px 5px" }}>

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/Body/InstalledExtensions/ExtensionList/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { GridCell } from "@dnnsoftware/dnn-react-common";
 import ExtensionHeader from "../common/ExtensionHeader";
 import ExtensionDetailRow from "../common/ExtensionDetailRow";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 class ExtensionList extends Component {
     constructor() {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/Body/InstalledExtensions/common/ExtensionDetailRow/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { GridCell, SvgIcons } from "@dnnsoftware/dnn-react-common";
-import styles from "./style.less";
+import styles from "./style.module.less";
 import ColumnSizes from "../ExtensionColumnSizes";
 import InUseModal from "../InUseModal";
 

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/Body/InstalledExtensions/common/ExtensionHeader/index.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { GridCell } from "@dnnsoftware/dnn-react-common";
 import Localization from "localization";
 import ColumnSizes from "../ExtensionColumnSizes";
-import styles from "./style.less";
+import styles from "./style.module.less";
 const ExtensionHeader = () => (
     <GridCell className={styles.extensionHeader} columnSize={100} style={{ padding: "20px 20px 5px" }}>
         <GridCell columnSize={ColumnSizes[0]}>

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/index.jsx

@@ -11,7 +11,7 @@ import StepFive from "./StepFive";
 import StepSix from "./StepSix";
 import Localization from "localization";
 import utilities from "utils";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 function mapToManifestPayload(payload, manifest) {
     return Object.assign(manifest, {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/DeleteExtension/index.jsx

@@ -6,7 +6,7 @@ import { ExtensionActions, VisiblePanelActions } from "actions";
 import PackageInformation from "../common/BasicPackageInformation";
 import Localization from "localization";
 import utilities from "utils";
-import styles from "./style.less";
+import styles from "./style.module.less";
 class DeleteExtension extends Component {
     constructor() {
         super();

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/AuthenticationSystem/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { GridCell, SingleLineInputWithError, GridSystem, Switch, Button } from "@dnnsoftware/dnn-react-common";
 import Localization from "localization";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Container/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { GridCell, SingleLineInputWithError, Button } from "@dnnsoftware/dnn-react-common";
 import Localization from "localization";
 import { connect } from "react-redux";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 class Container extends Component {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/CoreLanguagePack/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { GridCell, DropdownWithError, Button } from "@dnnsoftware/dnn-react-common";
 import Localization from "localization";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 class CoreLanguagePack extends Component {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/ExtensionLanguagePack/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { GridCell, DropdownWithError, Button } from "@dnnsoftware/dnn-react-common";
 import Localization from "localization";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 class ExtensionLanguagePack extends Component {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/JavascriptLibrary/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { GridCell, SingleLineInputWithError, GridSystem, Button, Label } from "@dnnsoftware/dnn-react-common";
 import Localization from "localization";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 class JavascriptLibrary extends Component {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Module/AssignedSelector/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { GridCell, SvgIcons } from "@dnnsoftware/dnn-react-common";
 import { Scrollbars } from "react-custom-scrollbars";
 import Localization from "localization";
-import styles from "./style.less";
+import styles from "./style.module.less";
 class AssignedSelector extends Component {
     constructor() {
         super();

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Module/index.jsx

@@ -5,7 +5,7 @@ import { GridCell, SingleLineInputWithError, DropdownWithError, GridSystem, Swit
 import Localization from "localization";
 import AssignedSelector from "./AssignedSelector";
 import ModuleDefinitions from "./ModuleDefinitions";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/SkinObject/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { GridCell, SingleLineInputWithError, GridSystem, Switch, Button } from "@dnnsoftware/dnn-react-common";
 import Localization from "localization";
 import { connect } from "react-redux";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/EditSettings/AuthenticationSystemSettings/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { GridCell, SingleLineInputWithError, Switch, Button } from "@dnnsoftware/dnn-react-common";
 import { connect } from "react-redux";
 import Localization from "localization";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 class AuthenticationSystemSettings extends Component {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/PackageInformation/index.jsx

@@ -7,7 +7,7 @@ import {
     validationMapExtensionBeingEdited,
     getVersionDropdownValues
 } from "./helperFunctions";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/index.jsx

@@ -10,7 +10,7 @@ import CustomSettings from "./CustomSettings";
 import EditSettings from "./EditSettings";
 import Localization from "localization";
 import utilities from "utils";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 
 class EditExtension extends Component {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/InstallExtensionModal/index.jsx

@@ -10,7 +10,7 @@ import License from "../EditExtension/License";
 import Localization from "localization";
 import utilities from "utils";
 import FileUpload from "./FileUpload";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 class InstallExtensionModal extends Component {
     constructor(props) {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewExtensionModal/index.jsx

@@ -6,7 +6,7 @@ import Localization from "localization";
 import { ExtensionActions, VisiblePanelActions, PaginationActions } from "actions";
 import CustomSettings from "../EditExtension/CustomSettings";
 import BasicPackageInformation from "../common/BasicPackageInformation";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromControl/index.jsx

@@ -4,7 +4,7 @@ import { GridCell, GridSystem, SingleLineInputWithError, MultiLineInputWithError
 import FolderDropdown from "../common/FolderDropdown";
 import Localization from "localization";
 import { validationMapNewModule, valueMapNewModule } from "../common/helperFunctions";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 function getValidateRequired(key) {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromManifest/index.jsx

@@ -4,7 +4,7 @@ import { GridCell, GridSystem, DropdownWithError, Switch, Button } from "@dnnsof
 import FolderDropdown from "../common/FolderDropdown";
 import { validationMapNewModule, valueMapNewModule } from "../common/helperFunctions";
 import Localization from "localization";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const dropdownStyle = { width: "100%", marginBottom: 64 };
 function getValidateRequired(key) {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromNew/index.jsx

@@ -4,7 +4,7 @@ import { GridCell, GridSystem, SingleLineInputWithError, MultiLineInputWithError
 import FolderDropdown from "../common/FolderDropdown";
 import { validationMapNewModule, valueMapNewModule } from "../common/helperFunctions";
 import Localization from "localization";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 const inputStyle = { width: "100%" };
 function getValidateRequired(key) {

Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/common/FolderDropdown/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { DropdownWithError, SingleLineInputWithError, Button, GridCell } from "@dnnsoftware/dnn-react-common";
 import Collapsible from "react-collapse";
 import Localization from "localization";
-import styles from "./style.less";
+import styles from "./style.module.less";
 
 class FolderDropdown extends Component {
     constructor() {