Skip to content

Commit

Permalink
refactor!: next
Browse files Browse the repository at this point in the history
  • Loading branch information
alexander-akait committed Jun 30, 2021
1 parent 684ad36 commit 35a9efe
Show file tree
Hide file tree
Showing 122 changed files with 3,407 additions and 7,256 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@
/test/fixtures
/test/cases/*/expected
/test/js
/test/manual/dist
6 changes: 3 additions & 3 deletions .github/workflows/nodejs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ jobs:
strategy:
matrix:
os: [ubuntu-latest, windows-latest, macos-latest]
node-version: [10.x, 12.x, 14.x]
webpack-version: [4, latest]
node-version: [12.x, 14.x, 16.x]
webpack-version: [latest]

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

Expand Down Expand Up @@ -112,7 +112,7 @@ jobs:
strategy:
matrix:
os: [ubuntu-latest, windows-latest, macos-latest]
node-version: [10.x, 12.x, 14.x]
node-version: [12.x, 14.x, 16.x]

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

Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ npm-debug.log*
/dist
/test/js
/test/outputs
/test/manual/dist
/local
/reports
/node_modules
Expand Down
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
/dist
/node_modules
/test/fixtures
/test/manual/dist
/test/cases/*/expected
/test/js
CHANGELOG.md
141 changes: 61 additions & 80 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,6 @@ module.exports = {
| **[`publicPath`](#publicPath)** | `{String\|Function}` | `webpackOptions.output.publicPath` | Specifies a custom public path for the external resources like images, files, etc |
| **[`emit`](#emit)** | `{Boolean}` | `true` | If false, the plugin will extract the CSS but **will not** emit the file |
| **[`esModule`](#esModule)** | `{Boolean}` | `true` | Use ES modules syntax |
| **[`modules`](#modules)** | `{Object}` | `undefined` | Configuration CSS Modules |

#### `publicPath`

Expand Down Expand Up @@ -422,85 +421,6 @@ module.exports = {
};
```

#### `modules`

Type: `Object`
Default: `undefined`

Configuration CSS Modules.

##### `namedExport`

Type: `Boolean`
Default: `false`

Enables/disables ES modules named export for locals.

> ⚠ Names of locals are converted to `camelCase`.
> ⚠ It is not allowed to use JavaScript reserved words in css class names.
> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` and `MiniCssExtractPlugin.loader` should be enabled.
**styles.css**

```css
.foo-baz {
color: red;
}
.bar {
color: blue;
}
```

**index.js**

```js
import { fooBaz, bar } from './styles.css';

console.log(fooBaz, bar);
```

You can enable a ES module named export using:

**webpack.config.js**

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: true,
modules: {
namedExport: true,
},
},
},
{
loader: 'css-loader',
options: {
esModule: true,
modules: {
namedExport: true,
localIdentName: 'foo__[name]__[local]',
},
},
},
],
},
],
},
};
```

## Examples

### Recommend
Expand Down Expand Up @@ -573,6 +493,67 @@ module.exports = {
};
```

### Named export for CSS Modules

> ⚠ Names of locals are converted to `camelCase`.
> ⚠ It is not allowed to use JavaScript reserved words in css class names.
> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` should be enabled.
**styles.css**

```css
.foo-baz {
color: red;
}
.bar {
color: blue;
}
```

**index.js**

```js
import { fooBaz, bar } from './styles.css';

console.log(fooBaz, bar);
```

You can enable a ES module named export using:

**webpack.config.js**

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
esModule: true,
modules: {
namedExport: true,
localIdentName: 'foo__[name]__[local]',
},
},
},
],
},
],
},
};
```

### The `publicPath` option as function

**webpack.config.js**
Expand Down
1 change: 0 additions & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,4 @@ module.exports = {
transformIgnorePatterns: ['/node_modules/', '<rootDir>/dist/'],
watchPathIgnorePatterns: ['<rootDir>/test/js'],
setupFilesAfterEnv: ['<rootDir>/setupTest.js'],
snapshotResolver: './test/helpers/snapshotResolver.js',
};

0 comments on commit 35a9efe

Please sign in to comment.