diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index 5f795282..00000000
--- a/.editorconfig
+++ /dev/null
@@ -1,12 +0,0 @@
-# editorconfig.org
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 8477d2ab..00000000
--- a/.eslintignore
+++ /dev/null
@@ -1,6 +0,0 @@
-/coverage
-/dist
-/node_modules
-/test/fixtures
-/test/cases/*/expected
-/test/js
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index c897f8ee..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
- root: true,
- parser: 'babel-eslint',
- extends: ['@webpack-contrib/eslint-config-webpack', 'prettier'],
-};
diff --git a/.gitattributes b/.gitattributes
deleted file mode 100644
index c76f8a99..00000000
--- a/.gitattributes
+++ /dev/null
@@ -1,5 +0,0 @@
-package-lock.json -diff
-* text=auto
-test/cases/* eol=lf
-bin/* eol=lf
-yarn.lock -diff
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
deleted file mode 100644
index a3cedd77..00000000
--- a/.github/CODEOWNERS
+++ /dev/null
@@ -1,6 +0,0 @@
-# These are the default owners for everything in
-# webpack-contrib
-@webpack-contrib/org-maintainers
-
-# Add repository specific users / groups
-# below here for libs that are not maintained by the org.
\ No newline at end of file
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
deleted file mode 100644
index ad35b1f5..00000000
--- a/.github/CONTRIBUTING.md
+++ /dev/null
@@ -1,160 +0,0 @@
-# Contributing in @webpack-contrib
-
-We'd always love contributions to further improve the webpack / webpack-contrib ecosystem!
-Here are the guidelines we'd like you to follow:
-
-- [Questions and Problems](#question)
-- [Issues and Bugs](#issue)
-- [Feature Requests](#feature)
-- [Pull Request Submission Guidelines](#submit-pr)
-- [Commit Message Conventions](#commit)
-
-## Got a Question or Problem?
-
-Please submit support requests and questions to StackOverflow using the tag [[webpack]](http://stackoverflow.com/tags/webpack).
-StackOverflow is better suited for this kind of support though you may also inquire in [Webpack Gitter](https://gitter.im/webpack/webpack).
-The issue tracker is for bug reports and feature discussions.
-
-## Found an Issue or Bug?
-
-Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.
-
-We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we ask that you to provide a minimal reproduction scenario (github repo or failing test case). Having a live, reproducible scenario gives us a wealth of important information without going back & forth to you with additional questions like:
-
-- version of Webpack used
-- version of the loader / plugin you are creating a bug report for
-- the use-case that fails
-
-A minimal reproduce scenario allows us to quickly confirm a bug (or point out config problems) as well as confirm that we are fixing the right problem.
-
-We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
-
-Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you we are going to close an issue that doesn't have enough info to be reproduced.
-
-## Feature Requests?
-
-You can _request_ a new feature by creating an issue on Github.
-
-If you would like to _implement_ a new feature, please submit an issue with a proposal for your work `first`, to be sure that particular makes sense for the project.
-
-## Pull Request Submission Guidelines
-
-Before you submit your Pull Request (PR) consider the following guidelines:
-
-- Search Github for an open or closed PR that relates to your submission. You don't want to duplicate effort.
-- Commit your changes using a descriptive commit message that follows our [commit message conventions](#commit). Adherence to these conventions is necessary because release notes are automatically generated from these messages.
-- Fill out our `Pull Request Template`. Your pull request will not be considered if it is ignored.
-- Please sign the `Contributor License Agreement (CLA)` when a pull request is opened. We cannot accept your pull request without this. Make sure you sign with the primary email address associated with your local / github account.
-
-## Webpack Contrib Commit Conventions
-
-Each commit message consists of a **header**, a **body** and a **footer**. The header has a special
-format that includes a **type**, a **scope** and a **subject**:
-
-```
-():
-
-
-
-
-```
-
-The **header** is mandatory and the **scope** of the header is optional.
-
-Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
-to read on GitHub as well as in various git tools.
-
-The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
-
-Examples:
-
-```
-docs(readme): update install instructions
-```
-
-```
-fix: refer to the `entrypoint` instead of the first `module`
-```
-
-### Revert
-
-If the commit reverts a previous commit, it should begin with `revert:`, followed by the header of the reverted commit.
-In the body it should say: `This reverts commit .`, where the hash is the SHA of the commit being reverted.
-
-### Type
-
-Must be one of the following:
-
-- **build**: Changes that affect the build system or external dependencies (example scopes: babel, npm)
-- **chore**: Changes that fall outside of build / docs that do not effect source code (example scopes: package, defaults)
-- **ci**: Changes to our CI configuration files and scripts (example scopes: circleci, travis)
-- **docs**: Documentation only changes (example scopes: readme, changelog)
-- **feat**: A new feature
-- **fix**: A bug fix
-- **perf**: A code change that improves performance
-- **refactor**: A code change that neither fixes a bug nor adds a feature
-- **revert**: Used when reverting a committed change
-- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons)
-- **test**: Addition of or updates to Jest tests
-
-### Scope
-
-The scope is subjective & depends on the `type` see above. A good example would be a change to a particular class / module.
-
-### Subject
-
-The subject contains a succinct description of the change:
-
-- use the imperative, present tense: "change" not "changed" nor "changes"
-- don't capitalize the first letter
-- no dot (.) at the end
-
-### Body
-
-Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
-The body should include the motivation for the change and contrast this with previous behavior.
-
-### Footer
-
-The footer should contain any information about **Breaking Changes** and is also the place to
-reference GitHub issues that this commit **Closes**.
-
-**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
-
-Example
-
-```
-BREAKING CHANGE: Updates to `Chunk.mapModules`.
-
-This release is not backwards compatible with `Webpack 2.x` due to breaking changes in webpack/webpack#4764
-Migration: see webpack/webpack#5225
-
-```
-
-## Testing Your Pull Request
-
-You may have the need to test your changes in a real-world project or dependent
-module. Thankfully, Github provides a means to do this. Add a dependency to the
-`package.json` for such a project as follows:
-
-```json
-{
- "devDependencies": {
- "mini-css-extract-plugin": "webpack-contrib/mini-css-extract-plugin#{id}/head"
- }
-}
-```
-
-Where `{id}` is the # ID of your Pull Request.
-
-## Contributor License Agreement
-
-When submitting your contribution, a CLA (Contributor License Agreement) bot will come by to verify that you signed the [CLA](https://cla.js.foundation/webpack-contrib/mini-css-extract-plugin).
-If it is your first time, it will link you to the right place to sign it.
-However, if you have committed your contributions using an email that is not the same as your email used on GitHub, the CLA bot can't accept your contribution.
-
-Run `git config user.email` to see your Git email, and verify it with [your GitHub email](https://github.com/settings/emails).
-
-## Thanks
-
-For your interest, time, understanding, and for following this simple guide.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index 5e7c7b6d..00000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1 +0,0 @@
-open_collective: webpack
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
deleted file mode 100644
index f68cbd3e..00000000
--- a/.github/ISSUE_TEMPLATE.md
+++ /dev/null
@@ -1,16 +0,0 @@
-
diff --git a/.github/ISSUE_TEMPLATE/BUG.md b/.github/ISSUE_TEMPLATE/BUG.md
deleted file mode 100644
index d5c817d1..00000000
--- a/.github/ISSUE_TEMPLATE/BUG.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-name: 🐛 Bug Report
-about: Something went awry and you'd like to tell us about it.
----
-
-
-
-- Operating System:
-- Node Version:
-- NPM Version:
-- webpack Version:
-- mini-css-extract-plugin Version:
-
-### Expected Behavior
-
-
-
-### Actual Behavior
-
-
-
-### Code
-
-```js
-// webpack.config.js
-// If your code blocks are over 20 lines, please paste a link to a gist
-// (https://gist.github.com).
-```
-
-```js
-// additional code, HEY YO remove this block if you don't need it
-```
-
-### How Do We Reproduce?
-
-
diff --git a/.github/ISSUE_TEMPLATE/DOCS.md b/.github/ISSUE_TEMPLATE/DOCS.md
deleted file mode 100644
index 88d05ddd..00000000
--- a/.github/ISSUE_TEMPLATE/DOCS.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-name: 📚 Documentation
-about: Are the docs lacking or missing something? Do they need some new 🔥 hotness? Tell us here.
----
-
-
-
-Documentation Is:
-
-
-
-- [ ] Missing
-- [ ] Needed
-- [ ] Confusing
-- [ ] Not Sure?
-
-### Please Explain in Detail...
-
-### Your Proposal for Changes
diff --git a/.github/ISSUE_TEMPLATE/FEATURE.md b/.github/ISSUE_TEMPLATE/FEATURE.md
deleted file mode 100644
index d7cae649..00000000
--- a/.github/ISSUE_TEMPLATE/FEATURE.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-name: ✨ Feature Request
-about: Suggest an idea for this project
----
-
-
-
-- Operating System:
-- Node Version:
-- NPM Version:
-- webpack Version:
-- mini-css-extract-plugin Version:
-
-### Feature Proposal
-
-### Feature Use Case
diff --git a/.github/ISSUE_TEMPLATE/MODIFICATION.md b/.github/ISSUE_TEMPLATE/MODIFICATION.md
deleted file mode 100644
index f08d0929..00000000
--- a/.github/ISSUE_TEMPLATE/MODIFICATION.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-name: 🔧 Modification Request
-about: Would you like something work differently? Have an alternative approach? This is the template for you.
----
-
-
-
-- Operating System:
-- Node Version:
-- NPM Version:
-- webpack Version:
-- mini-css-extract-plugin Version:
-
-### Expected Behavior / Situation
-
-### Actual Behavior / Situation
-
-### Modification Proposal
diff --git a/.github/ISSUE_TEMPLATE/SUPPORT.md b/.github/ISSUE_TEMPLATE/SUPPORT.md
deleted file mode 100644
index 558934ac..00000000
--- a/.github/ISSUE_TEMPLATE/SUPPORT.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-name: 🆘 Support, Help, and Advice
-about: 👉🏽 Need support, help, or advice? Don't open an issue! Head to StackOverflow or https://gitter.im/webpack/webpack.
----
-
-Hey there! If you need support, help, or advice then this is not the place to ask.
-Please visit [StackOverflow](https://stackoverflow.com/questions/tagged/webpack)
-or [the Webpack Gitter](https://gitter.im/webpack/webpack) instead.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
deleted file mode 100644
index 550abc2c..00000000
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-This PR contains a:
-
-- [ ] **bugfix**
-- [ ] new **feature**
-- [ ] **code refactor**
-- [ ] **test update**
-- [ ] **typo fix**
-- [ ] **metadata update**
-
-### Motivation / Use-Case
-
-
-
-### Breaking Changes
-
-
-
-### Additional Info
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
deleted file mode 100644
index 2d349884..00000000
--- a/.github/workflows/nodejs.yml
+++ /dev/null
@@ -1,95 +0,0 @@
-name: mini-css-extract-plugin
-
-on:
- push:
- branches:
- - master
- - next
- pull_request:
- branches:
- - master
- - next
-
-jobs:
- lint:
- name: Lint - ${{ matrix.os }} - Node v${{ matrix.node-version }}
-
- env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
- strategy:
- matrix:
- os: [ubuntu-latest]
- node-version: [12.x]
-
- runs-on: ${{ matrix.os }}
-
- steps:
- - uses: actions/checkout@v2
- with:
- fetch-depth: 0
-
- - name: Use Node.js ${{ env.node-version }}
- uses: actions/setup-node@v1
- with:
- node-version: ${{ env.node-version }}
-
- - name: Use latest NPM
- run: sudo npm i -g npm
-
- - name: Install dependencies
- run: npm ci
-
- - name: Lint
- run: npm run lint
-
- - name: Security audit
- run: npm run security
-
- - name: Check commit message
- uses: wagoid/commitlint-github-action@v1
-
- test:
- name: Test - ${{ matrix.os }} - Node v${{ matrix.node-version }}, Webpack ${{ matrix.webpack-version }}
-
- strategy:
- matrix:
- os: [ubuntu-latest, windows-latest, macos-latest]
- node-version: [10.x, 12.x, 14.x]
- webpack-version: [4, latest]
-
- runs-on: ${{ matrix.os }}
-
- steps:
- - name: Setup Git
- if: matrix.os == 'windows-latest'
- run: git config --global core.autocrlf input
-
- - uses: actions/checkout@v2
-
- - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v1
- with:
- node-version: ${{ matrix.node-version }}
-
- - name: Use latest NPM on ubuntu/macos
- if: matrix.os == 'ubuntu-latest' || matrix.os == 'macos-latest'
- run: sudo npm i -g npm
-
- - name: Use latest NPM on windows
- if: matrix.os == 'windows-latest'
- run: npm i -g npm
-
- - name: Install dependencies
- run: npm i
-
- - name: Install webpack ${{ matrix.webpack-version }}
- run: npm i webpack@${{ matrix.webpack-version }}
-
- - name: Run tests for webpack version ${{ matrix.webpack-version }}
- run: npm run test:coverage -- --ci
-
- - name: Submit coverage data to codecov
- uses: codecov/codecov-action@v1
- with:
- token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index 5c45b95b..00000000
--- a/.gitignore
+++ /dev/null
@@ -1,19 +0,0 @@
-logs
-*.log
-npm-debug.log*
-.eslintcache
-/coverage
-/dist
-/test/js
-/test/outputs
-/local
-/reports
-/node_modules
-.DS_Store
-Thumbs.db
-.idea
-.vscode
-*.sublime-project
-*.sublime-workspace
-.idea
-*.iml
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 41ff7724..00000000
--- a/.prettierignore
+++ /dev/null
@@ -1,7 +0,0 @@
-/coverage
-/dist
-/node_modules
-/test/fixtures
-/test/cases/*/expected
-/test/js
-CHANGELOG.md
diff --git a/.prettierrc.js b/.prettierrc.js
deleted file mode 100644
index 4f14003f..00000000
--- a/.prettierrc.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = { singleQuote: true };
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b579799b..e4056fb7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,125 +2,6 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-### [1.2.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.2.0...v1.2.1) (2020-10-27)
-
-
-### Bug Fixes
-
-* onerror/onload memory leak ([#640](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/640)) ([2b6fcf2](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/2b6fcf260b2fb13afe2abd052cff5dea184ef398))
-
-## [1.2.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.1.2...v1.2.0) (2020-10-23)
-
-
-### Features
-
-* added the `linkType` option ([#634](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/634)) ([a89c0f9](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/a89c0f982716d1093dbe6b12de47e4e8df1543f5))
-
-
-### Bug Fixes
-
-* compatibility with webpack@4 and webpack@5 for monorepos ([#638](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/638)) ([60c3eef](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/60c3eef936245183451d63f1e080ce990553078d))
-
-### [1.1.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.1.0...v1.1.2) (2020-10-22)
-
-
-### Bug Fixes
-
-* compatibility with webpack@4 and webpack@5 for monorepos ([#636](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/636)) ([3413439](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/341343924d96f5d0076f27b98c96f9439bff6347))
-* error when reloading async chunk ([#633](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/633)) ([89e7a0a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/89e7a0acf08f36711c916a4827ea6afff7028afb))
-
-### [1.1.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.1.0...v1.1.1) (2020-10-20)
-
-
-### Bug Fixes
-
-* fix `onerror` message for async chunks ([#629](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/629)) ([883079e](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/883079e02b9d400fab4e8a955604036a3be50c48))
-
-## [1.1.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.0.0...v1.1.0) (2020-10-19)
-
-
-### Features
-
-* added the `attributes` option ([e8a2d5a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/e8a2d5a09ded967e0f4be145f1f52c1e5f7f6df1))
-* added the `insert` option ([a5f17c4](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/a5f17c48cbf0c198ebc955032d11593434ef2373))
-
-
-### Bug Fixes
-
-* ignore modules without identifier ([#627](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/627)) ([71a9ce9](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/71a9ce91b377fff892068b87445372fe1c2db142))
-* remove `normalize-url` from deps ([#623](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/623)) ([9ae47e5](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/9ae47e51f198f2e0258d0e87d6e708e57c05bf86))
-
-### [1.0.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.12.0...v1.0.0) (2020-10-09)
-
-### BREAKING CHANGE
-
-* minimum supported `Node.js` version is `10.13.0`
-* the `esModule` option is `true` by default, you need to change `const locals = require('./styles.css')`/`require('./styles.css')` on `import locals from './styles.css'`/`import './styles.css''`
-* the `moduleFilename` option was removed in favor the `filename` option
-* the `hmr` option was removed, HMR will work automatically when `HotModuleReplacement` plugin used or `webpack-dev-server` with enabled the `hot` option
-* the `reloadAll` was removed
-
-### Features
-
-- the `chunkFilename` option can be a function for webpack@5
-
-### ⚠ NOTICE
-
-To avoid problems between `mini-css-extract-plugin` and `style-loader` because of changing the `esModule` option to `true` by default we strongly recommend upgrading `style-loader` to `2.0.0` version.
-
-### [0.12.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.11.3...v0.12.0) (2020-10-07)
-
-
-### Features
-
-* opt-in to transitive only side effects (webpack@5), no more empty JS chunks
-
-### [0.11.3](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.11.2...v0.11.3) (2020-10-02)
-
-
-### Bug Fixes
-
-* better support for webpack 5 ([#595](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/595)) ([6e09a51](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/6e09a51954aee1c8db904747e0b9bc42d14e7b47))
-
-### [0.11.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.11.1...v0.11.2) (2020-09-12)
-
-
-### Bug Fixes
-
-* cache for webpack@5 ([6a27b30](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/6a27b30fea43d2d179d7df5deb260887d6b45ccc))
-
-### [0.11.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.11.0...v0.11.1) (2020-09-08)
-
-
-### Bug Fixes
-
-* added cache serializer for webpack@5 ([#581](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/581)) ([d09693e](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/d09693e7d50858c319a804736cf9609479140ad8))
-
-### [0.11.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.10.0...v0.11.0) (2020-08-27)
-
-
-### Features
-
-* named export ([1ea4b7f](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/1ea4b7fe8305fcca7915d5c1dccd6041bab2c053))
-
-
-### Bug Fixes
-
-* compatibility with webpack@5
-
-### [0.10.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.9.0...v0.10.0) (2020-08-10)
-
-
-### Features
-
-* schema validation ([#480](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/480)) ([b197757](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/b197757e26af717a302485293a2b95bc0eb6cf71))
-
-### Bug Fixes
-
-* add semicolon to avoid `Uncaught TypeError` on Webpack v5 ([#561](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/561)) ([3974210](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/3974210ec820f47cf717cd0829d4e4e3879a518a))
-* enforce esm ([#546](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/546)) ([b146549](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/b1465491b1706e0f450cf69df4cf8176799907d1))
-* partial compatibility with `webpack@5` ([#477](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/477)) ([903a56e](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/903a56ea3fa08e173cd548d23089d0cee25bafea))
-
### [0.9.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.8.2...v0.9.0) (2019-12-20)
diff --git a/README.md b/README.md
index 9c4a5094..7dc44d78 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
[![npm][npm]][npm-url]
-[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]
-[![size][size]][size-url]
-
-# mini-css-extract-plugin
This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
@@ -27,332 +24,32 @@ Compared to the extract-text-webpack-plugin:
- Easier to use
- Specific to CSS
-## Getting Started
-
-To begin, you'll need to install `mini-css-extract-plugin`:
+Install
```bash
npm install --save-dev mini-css-extract-plugin
```
-It's recommended to combine `mini-css-extract-plugin` with the [`css-loader`](https://github.com/webpack-contrib/css-loader)
-
-Then add the loader and the plugin to your `webpack` config. For example:
-
-**style.css**
-
-```css
-body {
- background: green;
-}
-```
-
-**component.js**
-
-```js
-import './style.css';
-```
-
-**webpack.config.js**
-
-```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
- plugins: [new MiniCssExtractPlugin()],
- module: {
- rules: [
- {
- test: /\.css$/i,
- use: [MiniCssExtractPlugin.loader, 'css-loader'],
- },
- ],
- },
-};
-```
-
-## Options
-
-### Plugin Options
-
-| Name | Type | Default | Description |
-| :-----------------------------------: | :------------------: | :-----------------------------------: | :--------------------------------------------------------- |
-| **[`filename`](#filename)** | `{String\|Function}` | `[name].css` | This option determines the name of each output CSS file |
-| **[`chunkFilename`](#chunkFilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
-| **[`ignoreOrder`](#ignoreOrder)** | `{Boolean}` | `false` | Remove Order Warnings |
-| **[`insert`](#insert)** | `{String\|Function}` | `document.head.appendChild(linkTag);` | Inserts ` ` at the given position |
-| **[`attributes`](#attributes)** | `{Object}` | `{}` | Adds custom attributes to tag |
-| **[`linkType`](#linkType)** | `{String\|Boolean}` | `text/css` | Allows loading asynchronous chunks with a custom link type |
-
-#### `filename`
-
-Type: `String|Function`
-Default: `[name].css`
-
-This option determines the name of each output CSS file.
-
-Works like [`output.filename`](https://webpack.js.org/configuration/output/#outputfilename)
-
-#### `chunkFilename`
-
-Type: `String|Function`
-Default: `based on filename`
-
-> i Specifying `chunkFilename` as a `function` is only available in webpack@5
-
-This option determines the name of non-entry chunk files.
-
-Works like [`output.chunkFilename`](https://webpack.js.org/configuration/output/#outputchunkfilename)
-
-#### `ignoreOrder`
-
-Type: `Boolean`
-Default: `false`
-
-Remove Order Warnings.
-See [examples](#remove-order-warnings) below for details.
-
-#### `insert`
-
-Type: `String|Function`
-Default: `document.head.appendChild(linkTag);`
-
-By default, the `extract-css-chunks-plugin` appends styles (` ` elements) to `document.head` of the current `window`.
-
-However in some circumstances it might be necessary to have finer control over the append target or even delay `link` elements instertion.
-For example this is the case when you asynchronously load styles for an application that runs inside of an iframe.
-In such cases `insert` can be configured to be a function or a custom selector.
-
-If you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure that the parent document has sufficient access rights to reach into the frame document and append elements to it.
-
-##### `String`
-
-Allows to setup custom [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).
-A new ` ` element will be inserted after the found item.
-
-**webpack.config.js**
-
-```js
-new MiniCssExtractPlugin({
- insert: '#some-element',
-});
-```
-
-A new ` ` element will be inserted after the element with id `some-element`.
-
-##### `Function`
-
-Allows to override default behavior and insert styles at any position.
-
-> ⚠ Do not forget that this code will run in the browser alongside your application. Since not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc we recommend you to use only ECMA 5 features and syntax.
-
-> > ⚠ The `insert` function is serialized to string and passed to the plugin. This means that it won't have access to the scope of the webpack configuration module.
-
-**webpack.config.js**
-
-```js
-new MiniCssExtractPlugin({
- insert: function (linkTag) {
- var reference = document.querySelector('#some-element');
- if (reference) {
- reference.parentNode.insertBefore(linkTag, reference);
- }
- },
-});
-```
-
-A new ` ` element will be inserted before the element with id `some-element`.
-
-#### `attributes`
-
-Type: `Object`
-Default: `{}`
-
-If defined, the `mini-css-extract-plugin` will attach given attributes with their values on element.
-
-**webpack.config.js**
-
-```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
- plugins: [
- new MiniCssExtractPlugin({
- attributes: {
- id: 'target',
- 'data-target': 'example',
- },
- }),
- ],
- module: {
- rules: [
- {
- test: /\.css$/i,
- use: [MiniCssExtractPlugin.loader, 'css-loader'],
- },
- ],
- },
-};
-```
-
-Note: It's only applied to dynamically loaded css chunks, if you want to modify link attributes inside html file, please using [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
+Usage
-#### `linkType`
-
-Type: `String|Boolean`
-Default: `text/css`
-
-This option allows loading asynchronous chunks with a custom link type, such as .
-
-##### `String`
-
-Possible values: `text/css`
-
-**webpack.config.js**
-
-```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
- plugins: [
- new MiniCssExtractPlugin({
- linkType: 'text/css',
- }),
- ],
- module: {
- rules: [
- {
- test: /\.css$/i,
- use: [MiniCssExtractPlugin.loader, 'css-loader'],
- },
- ],
- },
-};
-```
-
-##### `Boolean`
-
-`false` disables the link `type` attribute
-
-**webpack.config.js**
-
-```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
- plugins: [
- new MiniCssExtractPlugin({
- linkType: false,
- }),
- ],
- module: {
- rules: [
- {
- test: /\.css$/i,
- use: [MiniCssExtractPlugin.loader, 'css-loader'],
- },
- ],
- },
-};
-```
-
-### Loader Options
-
-| Name | Type | Default | Description |
-| :-----------------------------: | :------------------: | :--------------------------------: | :-------------------------------------------------------------------------------- |
-| **[`publicPath`](#publicPath)** | `{String\|Function}` | `webpackOptions.output.publicPath` | Specifies a custom public path for the external resources like images, files, etc |
-| **[`esModule`](#esModule)** | `{Boolean}` | `true` | Use ES modules syntax |
-| **[`modules`](#modules)** | `{Object}` | `undefined` | Configuration CSS Modules |
+### Configuration
#### `publicPath`
Type: `String|Function`
Default: the `publicPath` in `webpackOptions.output`
-Specifies a custom public path for the external resources like images, files, etc inside `CSS`.
-Works like [`output.publicPath`](https://webpack.js.org/configuration/output/#outputpublicpath)
-
-##### `String`
-
-**webpack.config.js**
-
-```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
- plugins: [
- new MiniCssExtractPlugin({
- // Options similar to the same options in webpackOptions.output
- // both options are optional
- filename: '[name].css',
- chunkFilename: '[id].css',
- }),
- ],
- module: {
- rules: [
- {
- test: /\.css$/,
- use: [
- {
- loader: MiniCssExtractPlugin.loader,
- options: {
- publicPath: '/public/path/to/',
- },
- },
- 'css-loader',
- ],
- },
- ],
- },
-};
-```
-
-##### `Function`
-
-**webpack.config.js**
-
-```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
- plugins: [
- new MiniCssExtractPlugin({
- // Options similar to the same options in webpackOptions.output
- // both options are optional
- filename: '[name].css',
- chunkFilename: '[id].css',
- }),
- ],
- module: {
- rules: [
- {
- test: /\.css$/,
- use: [
- {
- loader: MiniCssExtractPlugin.loader,
- options: {
- publicPath: (resourcePath, context) => {
- return path.relative(path.dirname(resourcePath), context) + '/';
- },
- },
- },
- 'css-loader',
- ],
- },
- ],
- },
-};
-```
+Specifies a custom public path for the target file(s).
#### `esModule`
Type: `Boolean`
-Default: `true`
+Default: `false`
-By default, `mini-css-extract-plugin` generates JS modules that use the ES modules syntax.
+By default, `mini-css-extract-plugin` generates JS modules that use the CommonJS modules syntax.
There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
-You can enable a CommonJS syntax using:
+You can enable a ES module syntax using:
**webpack.config.js**
@@ -368,90 +65,11 @@ module.exports = {
use: [
{
loader: MiniCssExtractPlugin.loader,
- options: {
- esModule: false,
- },
- },
- 'css-loader',
- ],
- },
- ],
- },
-};
-```
-
-#### `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]',
- },
},
},
+ 'css-loader',
],
},
],
@@ -459,9 +77,7 @@ module.exports = {
};
```
-## Examples
-
-### Minimal example
+#### Minimal example
**webpack.config.js**
@@ -489,6 +105,7 @@ module.exports = {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
+ hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
@@ -499,50 +116,12 @@ module.exports = {
};
```
-### Common use case
-
-`mini-css-extract-plugin` is more often used in `production` mode to get separate css files.
-For `development` mode (including `webpack-dev-server`) you can use `style-loader`, because it injects CSS into the DOM using multiple and works faster.
-
-> i Do not use together `style-loader` and `mini-css-extract-plugin`.
+#### `publicPath` function example
**webpack.config.js**
```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const devMode = process.env.NODE_ENV !== 'production';
-
-const plugins = [];
-if (!devMode) {
- // enable in production only
- plugins.push(new MiniCssExtractPlugin());
-}
-
-module.exports = {
- plugins,
- module: {
- rules: [
- {
- test: /\.(sa|sc|c)ss$/,
- use: [
- devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
- 'css-loader',
- 'postcss-loader',
- 'sass-loader',
- ],
- },
- ],
- },
-};
-```
-
-### The `publicPath` option as function
-
-**webpack.config.js**
-
-```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
module.exports = {
plugins: [
new MiniCssExtractPlugin({
@@ -576,45 +155,40 @@ module.exports = {
};
```
-### Advanced configuration example
+#### Advanced configuration example
-This plugin should not be used with `style-loader` in the loaders chain.
+This plugin should be used only on `production` builds without `style-loader` in the loaders chain, especially if you want to have HMR in `development`.
Here is an example to have both HMR in `development` and your styles extracted in a file for `production` builds.
(Loaders options left out for clarity, adapt accordingly to your needs.)
-You should not use `HotModuleReplacementPlugin` plugin if you are using a `webpack-dev-server`.
-`webpack-dev-server` enables / disables HMR using `hot` option.
-
**webpack.config.js**
```js
-const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
-const plugins = [
- new MiniCssExtractPlugin({
- // Options similar to the same options in webpackOptions.output
- // both options are optional
- filename: devMode ? '[name].css' : '[name].[contenthash].css',
- chunkFilename: devMode ? '[id].css' : '[id].[contenthash].css',
- }),
-];
-if (devMode) {
- // only enable hot in development
- plugins.push(new webpack.HotModuleReplacementPlugin());
-}
-
module.exports = {
- plugins,
+ plugins: [
+ new MiniCssExtractPlugin({
+ // Options similar to the same options in webpackOptions.output
+ // both options are optional
+ filename: devMode ? '[name].css' : '[name].[hash].css',
+ chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+ }),
+ ],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
- MiniCssExtractPlugin.loader,
+ {
+ loader: MiniCssExtractPlugin.loader,
+ options: {
+ hmr: process.env.NODE_ENV === 'development',
+ },
+ },
'css-loader',
'postcss-loader',
'sass-loader',
@@ -625,38 +199,25 @@ module.exports = {
};
```
-### Hot Module Reloading (HMR)
-
-Note: HMR is automatically supported in webpack 5. No need to configure it. Skip the following:
+#### Hot Module Reloading (HMR)
-The `mini-css-extract-plugin` supports hot reloading of actual css files in development.
-Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules.
-Below is an example configuration of mini-css for HMR use with CSS modules.
+extract-mini-css-plugin supports hot reloading of actual css files in development. Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules. Below is an example configuration of mini-css for HMR use with CSS modules.
-You should not use `HotModuleReplacementPlugin` plugin if you are using a `webpack-dev-server`.
-`webpack-dev-server` enables / disables HMR using `hot` option.
+While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names. `reloadAll` is an option that should only be enabled if HMR isn't working correctly. The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename.
**webpack.config.js**
```js
-const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-const plugins = [
- new MiniCssExtractPlugin({
- // Options similar to the same options in webpackOptions.output
- // both options are optional
- filename: devMode ? '[name].css' : '[name].[contenthash].css',
- chunkFilename: devMode ? '[id].css' : '[id].[contenthash].css',
- }),
-];
-if (devMode) {
- // only enable hot in development
- plugins.push(new webpack.HotModuleReplacementPlugin());
-}
-
module.exports = {
- plugins,
+ plugins: [
+ new MiniCssExtractPlugin({
+ // Options similar to the same options in webpackOptions.output
+ // both options are optional
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ }),
+ ],
module: {
rules: [
{
@@ -664,7 +225,12 @@ module.exports = {
use: [
{
loader: MiniCssExtractPlugin.loader,
- options: {},
+ options: {
+ // only enable hot in development
+ hmr: process.env.NODE_ENV === 'development',
+ // if hmr does not work, this is a forceful method.
+ reloadAll: true,
+ },
},
'css-loader',
],
@@ -676,15 +242,18 @@ module.exports = {
### Minimizing For Production
-To minify the output, use a plugin like [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin).
+To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:
**webpack.config.js**
```js
+const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
+ optimization: {
+ minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+ },
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
@@ -699,19 +268,12 @@ module.exports = {
},
],
},
- optimization: {
- minimizer: [
- // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
- // `...`
- new CssMinimizerPlugin(),
- ],
- },
};
```
-This will enable CSS optimization only in production mode. If you want to run it also in development set the `optimization.minimize` option to true.
+### Features
-### Using preloaded or inlined CSS
+#### Using preloaded or inlined CSS
The runtime code detects already added CSS via ` ` or `
-
-
- Body
-
-
-
-
-