Skip to content

Commit 6a86e2d

Browse files
authored
docs: add module.parser.css.namedExports (#7274)
1 parent 70e7dbc commit 6a86e2d

File tree

1 file changed

+53
-0
lines changed

1 file changed

+53
-0
lines changed

src/content/configuration/module.mdx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,59 @@ module.exports = {
270270
};
271271
```
272272

273+
### module.parser.css.namedExports
274+
275+
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.
276+
277+
- Type: `boolean`
278+
- Available: 5.90.0+
279+
- Example:
280+
281+
```js
282+
module.exports = {
283+
module: {
284+
parser: {
285+
css: {
286+
namedExports: true,
287+
},
288+
},
289+
},
290+
};
291+
```
292+
293+
When `namedExports` is `false` for CSS modules, you can retrieve CSS classes using various import methods.
294+
Named exports are redirected to improve developer experience (DX), facilitating a smooth transition from default exports to named exports:
295+
296+
```js
297+
import * as styles from './styles.module.css';
298+
import styles1 from './styles.module.css';
299+
import { foo } from './styles.module.css';
300+
301+
console.log(styles.default.foo); // Access via styles.default
302+
console.log(styles.foo); // Access directly from styles
303+
console.log(styles1.foo); // Access via default import styles1
304+
console.log(foo); // Direct named import
305+
```
306+
307+
When `namedExports` is enabled (default behavior), you can use **only** named exports to import CSS classes.
308+
309+
```css
310+
/* styles.css */
311+
.header {
312+
color: blue;
313+
}
314+
315+
.footer {
316+
color: green;
317+
}
318+
```
319+
320+
```js
321+
import { header, footer } from './styles.module.css';
322+
```
323+
324+
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.
325+
273326
### module.parser.javascript
274327

275328
Configure options for JavaScript parser.

0 commit comments

Comments
 (0)