chore(deps): update dependency css-loader to v7

[cultureamp-renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
css-loader	^6.11.0 -> ^7.1.1

---

Release Notes

webpack-contrib/css-loader (css-loader)

v7.1.1

Compare Source

v7.1.0

Compare Source

Features

• added the getJSON option to output CSS modules mapping (#​1577) (af834b4)

v7.0.0

Compare Source

⚠ BREAKING CHANGES

• The modules.namedExport option is true by default if you enable the esModule option

Migration guide:

Before:

import style from "./style.css";

console.log(style.myClass);

After:

import * as style from "./style.css";

console.log(style.myClass);

To restore 6.x behavior, please use:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            namedExport: false,
            exportLocalsConvention: 'as-is',
            //
            // or, if you prefer camelcase style
            //
            // exportLocalsConvention: 'camel-case-only'
          },
        },
      },
    ],
  },
};

• The modules.exportLocalsConvention has the value as-is when the modules.namedExport option is true and you don't specify a value
• Minimum supported webpack version is 5.27.0
• Minimum supported Node.js version is 18.12.0

Features

• The modules.namedExports option works fine with any modules.exportLocalsConvention values (f96a110)
• Added dashed variants for the modules.exportLocalsConvention options (40e1668)

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Renovate Bot.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0c84b0b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[cultureamp-renovate]

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠️ Warning: custom changes will be lost.

[gyfchong]

https://cultureamp.atlassian.net/browse/KZN-2365

[github-actions]

✨ Here is your branch preview! ✨

• Storybook

Last updated for commit 0c84b0b: Merge branch 'main' into renovate/update/css-loader-7.x

[mcwinter07]

I've discovered that the the underlying issue cause some of the CSS to not be present int he DOM is due to us having a mix of class name conventions in our code.

With the update [exportLocalsConvention](https://webpack.js.org/loaders/css-loader/#exportlocalsconvention) defaults to camel case, where as in some of our components, i.e: Text.module.scss, we have kebab case styles.

As we can see, there variants that have kebab classes like extra-small will have the styles omitted from the build.

The solution to this is adding the flag exportLocalsConvention: "as-is", to our loader rules, which results in an expected render.

[mcwinter07]

Calling out a good point @HeartSquared raised, it would be better to have class names that follow a single convention, ie: camel case, but maybe we release this as a fix first in case there are implication of folks who may be targeting our classes in things like classNameOverride