Skip to content

docs: add module.parser.css.namedExports #7274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 7, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions src/content/configuration/module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,59 @@ module.exports = {
};
```

### module.parser.css.namedExports

This option enables the use of ES modules named export for CSS exports. When set to true, the CSS module will export its classes and styles using named exports.

- Type: `boolean`
- Available: 5.90.0+
- Example:

```js
module.exports = {
module: {
parser: {
css: {
namedExports: true,
},
},
},
};
```

When `namedExports` is `false` for CSS modules, you can retrieve CSS classes using various import methods.
Named exports are redirected to improve developer experience (DX), facilitating a smooth transition from default exports to named exports:

```js
import * as styles from './styles.module.css';
import styles1 from './styles.module.css';
import { foo } from './styles.module.css';

console.log(styles.default.foo); // Access via styles.default
console.log(styles.foo); // Access directly from styles
console.log(styles1.foo); // Access via default import styles1
console.log(foo); // Direct named import
```

When `namedExports` is enabled (default behavior), you can use **only** named exports to import CSS classes.

```css
/* styles.css */
.header {
color: blue;
}

.footer {
color: green;
}
```

```js
import { header, footer } from './styles.module.css';
```

By enabling `namedExports`, you adopt a more modular and maintainable approach to managing CSS in JavaScript projects, leveraging ES module syntax for clearer and more explicit imports.

### module.parser.javascript

Configure options for JavaScript parser.
Expand Down