Skip to content

Commit

Permalink
docs: update migration guide
Browse files Browse the repository at this point in the history
  • Loading branch information
alexander-akait committed Apr 8, 2024
1 parent fd18587 commit 02ae0a2
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 6 deletions.
25 changes: 25 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,31 @@ import * as style from "./style.css";
console.log(style.myClass);
```

To restore 6.x behavior, please use:

```js
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`
Expand Down
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Then add the plugin to your `webpack` config. For example:
**file.js**

```js
import css from "file.css";
import * as css from "file.css";
```

**webpack.config.js**
Expand Down Expand Up @@ -1162,11 +1162,11 @@ Enables/disables ES modules named export for locals.
```js
import * as styles from "./styles.css";

// If using `exportLocalsConvention: "as-is"` (default value):
console.log(styles["foo-baz"], styles.bar);

// If using `exportLocalsConvention: "camel-case-only"`:
console.log(styles.fooBaz, styles.bar);

// If using `exportLocalsConvention: "as-is"`:
console.log(styles["foo-baz"], styles.bar);
```

You can enable a ES module named export using:
Expand Down Expand Up @@ -2033,8 +2033,8 @@ File treated as `CSS Module`.
Using both `CSS Module` functionality as well as SCSS variables directly in JavaScript.

```jsx
import svars from "variables.scss";
import styles from "Component.module.scss";
import * as svars from "variables.scss";
import * as styles from "Component.module.scss";

// Render DOM with CSS modules class name
// <div className={styles.componentClass}>
Expand Down

0 comments on commit 02ae0a2

Please sign in to comment.