Skip to content

Commit 35a9efe

Browse files
refactor!: next
1 parent 684ad36 commit 35a9efe

File tree

122 files changed

+3407
-7256
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

122 files changed

+3407
-7256
lines changed

Diff for: .eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@
44
/test/fixtures
55
/test/cases/*/expected
66
/test/js
7+
/test/manual/dist

Diff for: .github/workflows/nodejs.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ jobs:
5555
strategy:
5656
matrix:
5757
os: [ubuntu-latest, windows-latest, macos-latest]
58-
node-version: [10.x, 12.x, 14.x]
59-
webpack-version: [4, latest]
58+
node-version: [12.x, 14.x, 16.x]
59+
webpack-version: [latest]
6060

6161
runs-on: ${{ matrix.os }}
6262

@@ -112,7 +112,7 @@ jobs:
112112
strategy:
113113
matrix:
114114
os: [ubuntu-latest, windows-latest, macos-latest]
115-
node-version: [10.x, 12.x, 14.x]
115+
node-version: [12.x, 14.x, 16.x]
116116

117117
runs-on: ${{ matrix.os }}
118118

Diff for: .gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ npm-debug.log*
66
/dist
77
/test/js
88
/test/outputs
9+
/test/manual/dist
910
/local
1011
/reports
1112
/node_modules

Diff for: .prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
/dist
33
/node_modules
44
/test/fixtures
5+
/test/manual/dist
56
/test/cases/*/expected
67
/test/js
78
CHANGELOG.md

Diff for: README.md

+61-80
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,6 @@ module.exports = {
296296
| **[`publicPath`](#publicPath)** | `{String\|Function}` | `webpackOptions.output.publicPath` | Specifies a custom public path for the external resources like images, files, etc |
297297
| **[`emit`](#emit)** | `{Boolean}` | `true` | If false, the plugin will extract the CSS but **will not** emit the file |
298298
| **[`esModule`](#esModule)** | `{Boolean}` | `true` | Use ES modules syntax |
299-
| **[`modules`](#modules)** | `{Object}` | `undefined` | Configuration CSS Modules |
300299

301300
#### `publicPath`
302301

@@ -422,85 +421,6 @@ module.exports = {
422421
};
423422
```
424423

425-
#### `modules`
426-
427-
Type: `Object`
428-
Default: `undefined`
429-
430-
Configuration CSS Modules.
431-
432-
##### `namedExport`
433-
434-
Type: `Boolean`
435-
Default: `false`
436-
437-
Enables/disables ES modules named export for locals.
438-
439-
> ⚠ Names of locals are converted to `camelCase`.
440-
441-
> ⚠ It is not allowed to use JavaScript reserved words in css class names.
442-
443-
> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` and `MiniCssExtractPlugin.loader` should be enabled.
444-
445-
**styles.css**
446-
447-
```css
448-
.foo-baz {
449-
color: red;
450-
}
451-
.bar {
452-
color: blue;
453-
}
454-
```
455-
456-
**index.js**
457-
458-
```js
459-
import { fooBaz, bar } from './styles.css';
460-
461-
console.log(fooBaz, bar);
462-
```
463-
464-
You can enable a ES module named export using:
465-
466-
**webpack.config.js**
467-
468-
```js
469-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
470-
471-
module.exports = {
472-
plugins: [new MiniCssExtractPlugin()],
473-
module: {
474-
rules: [
475-
{
476-
test: /\.css$/,
477-
use: [
478-
{
479-
loader: MiniCssExtractPlugin.loader,
480-
options: {
481-
esModule: true,
482-
modules: {
483-
namedExport: true,
484-
},
485-
},
486-
},
487-
{
488-
loader: 'css-loader',
489-
options: {
490-
esModule: true,
491-
modules: {
492-
namedExport: true,
493-
localIdentName: 'foo__[name]__[local]',
494-
},
495-
},
496-
},
497-
],
498-
},
499-
],
500-
},
501-
};
502-
```
503-
504424
## Examples
505425

506426
### Recommend
@@ -573,6 +493,67 @@ module.exports = {
573493
};
574494
```
575495

496+
### Named export for CSS Modules
497+
498+
> ⚠ Names of locals are converted to `camelCase`.
499+
500+
> ⚠ It is not allowed to use JavaScript reserved words in css class names.
501+
502+
> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` should be enabled.
503+
504+
**styles.css**
505+
506+
```css
507+
.foo-baz {
508+
color: red;
509+
}
510+
.bar {
511+
color: blue;
512+
}
513+
```
514+
515+
**index.js**
516+
517+
```js
518+
import { fooBaz, bar } from './styles.css';
519+
520+
console.log(fooBaz, bar);
521+
```
522+
523+
You can enable a ES module named export using:
524+
525+
**webpack.config.js**
526+
527+
```js
528+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
529+
530+
module.exports = {
531+
plugins: [new MiniCssExtractPlugin()],
532+
module: {
533+
rules: [
534+
{
535+
test: /\.css$/,
536+
use: [
537+
{
538+
loader: MiniCssExtractPlugin.loader,
539+
},
540+
{
541+
loader: 'css-loader',
542+
options: {
543+
esModule: true,
544+
modules: {
545+
namedExport: true,
546+
localIdentName: 'foo__[name]__[local]',
547+
},
548+
},
549+
},
550+
],
551+
},
552+
],
553+
},
554+
};
555+
```
556+
576557
### The `publicPath` option as function
577558

578559
**webpack.config.js**

Diff for: jest.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,4 @@ module.exports = {
33
transformIgnorePatterns: ['/node_modules/', '<rootDir>/dist/'],
44
watchPathIgnorePatterns: ['<rootDir>/test/js'],
55
setupFilesAfterEnv: ['<rootDir>/setupTest.js'],
6-
snapshotResolver: './test/helpers/snapshotResolver.js',
76
};

0 commit comments

Comments
 (0)