ui
This commit is contained in:
+20
@@ -0,0 +1,20 @@
|
||||
Copyright JS Foundation and other contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
'Software'), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+983
@@ -0,0 +1,983 @@
|
||||
<div align="center">
|
||||
<img width="200" height="200" src="https://cdn.worldvectorlogo.com/logos/logo-javascript.svg">
|
||||
<a href="https://webpack.js.org/">
|
||||
<img width="200" height="200" vspace="" hspace="25" src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg">
|
||||
</a>
|
||||
<h1>mini-css-extract-plugin</h1>
|
||||
</div>
|
||||
|
||||
[![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.
|
||||
|
||||
It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.
|
||||
|
||||
Compared to the extract-text-webpack-plugin:
|
||||
|
||||
- Async loading
|
||||
- No duplicate compilation (performance)
|
||||
- Easier to use
|
||||
- Specific to CSS
|
||||
|
||||
## Getting Started
|
||||
|
||||
To begin, you'll need to install `mini-css-extract-plugin`:
|
||||
|
||||
```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 `<link>` 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 |
|
||||
| **[`experimentalUseImportModule`](#experimentalUseImportModule)** | `{Boolean}` | `false` | Use an experimental webpack API to execute modules instead of child compilers |
|
||||
|
||||
#### `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 `mini-css-extract-plugin` appends styles (`<link>` 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 insertion.
|
||||
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 `<link>` element will be inserted after the found item.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
new MiniCssExtractPlugin({
|
||||
insert: '#some-element',
|
||||
});
|
||||
```
|
||||
|
||||
A new `<link>` 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 `<link>` 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 <link> 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)
|
||||
|
||||
#### `linkType`
|
||||
|
||||
Type: `String|Boolean`
|
||||
Default: `text/css`
|
||||
|
||||
This option allows loading asynchronous chunks with a custom link type, such as <link type="text/css" ...>.
|
||||
|
||||
##### `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'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `experimentalUseImportModule`
|
||||
|
||||
Use an experimental webpack API to execute modules instead of child compilers.
|
||||
|
||||
This improves performance and memory usage a lot, but isn't as stable as the normal approach.
|
||||
|
||||
When combined with `experiments.layers`, this adds a `layer` option to the loader options to specify the layer of the css execution.
|
||||
|
||||
You need to have at least webpack 5.33.2.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
experimentalUseImportModule: true,
|
||||
}),
|
||||
],
|
||||
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 |
|
||||
| **[`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`
|
||||
|
||||
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',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `emit`
|
||||
|
||||
Type: `Boolean`
|
||||
Default: `true`
|
||||
|
||||
If true, emits a file (writes a file to the filesystem). If false, the plugin will extract the CSS but **will not** emit the file.
|
||||
It is often useful to disable this option for server-side packages.
|
||||
|
||||
#### `esModule`
|
||||
|
||||
Type: `Boolean`
|
||||
Default: `true`
|
||||
|
||||
By default, `mini-css-extract-plugin` generates JS modules that use the ES 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:
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
module.exports = {
|
||||
plugins: [new MiniCssExtractPlugin()],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
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]',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Recommend
|
||||
|
||||
For `production` builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
|
||||
This can be achieved by using the `mini-css-extract-plugin`, because it creates separate css files.
|
||||
For `development` mode (including `webpack-dev-server`) you can use [style-loader](https://github.com/webpack-contrib/style-loader), because it injects CSS into the DOM using multiple <style></style> and works faster.
|
||||
|
||||
> i Do not use together `style-loader` and `mini-css-extract-plugin`.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const devMode = process.env.NODE_ENV !== 'production';
|
||||
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(sa|sc|c)ss$/,
|
||||
use: [
|
||||
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
|
||||
'css-loader',
|
||||
'postcss-loader',
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
|
||||
};
|
||||
```
|
||||
|
||||
### Minimal example
|
||||
|
||||
**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
|
||||
// all options are optional
|
||||
filename: '[name].css',
|
||||
chunkFilename: '[id].css',
|
||||
ignoreOrder: false, // Enable to remove warnings about conflicting order
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
options: {
|
||||
// you can specify a publicPath here
|
||||
// by default it uses publicPath in webpackOptions.output
|
||||
publicPath: '../',
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### The `publicPath` option as 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) => {
|
||||
// publicPath is the relative path of the resource to the context
|
||||
// e.g. for ./css/admin/main.css the publicPath will be ../../
|
||||
// while for ./css/main.css the publicPath will be ../
|
||||
return path.relative(path.dirname(resourcePath), context) + '/';
|
||||
},
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Advanced configuration example
|
||||
|
||||
This plugin should not be used with `style-loader` in the loaders chain.
|
||||
|
||||
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,
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(sa|sc|c)ss$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
'css-loader',
|
||||
'postcss-loader',
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Hot Module Reloading (HMR)
|
||||
|
||||
Note: HMR is automatically supported in webpack 5. No need to configure it. Skip the following:
|
||||
|
||||
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.
|
||||
|
||||
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 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,
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
options: {},
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Minimizing For Production
|
||||
|
||||
To minify the output, use a plugin like [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin).
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].css',
|
||||
chunkFilename: '[id].css',
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [MiniCssExtractPlugin.loader, 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
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.
|
||||
|
||||
### Using preloaded or inlined CSS
|
||||
|
||||
The runtime code detects already added CSS via `<link>` or `<style>` tag.
|
||||
This can be useful when injecting CSS on server-side for Server-Side-Rendering.
|
||||
The `href` of the `<link>` tag has to match the URL that will be used for loading the CSS chunk.
|
||||
The `data-href` attribute can be used for `<link>` and `<style>` too.
|
||||
When inlining CSS `data-href` must be used.
|
||||
|
||||
### Extracting all CSS in a single file
|
||||
|
||||
The CSS can be extracted in one CSS file using `optimization.splitChunks.cacheGroups`.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
module.exports = {
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
cacheGroups: {
|
||||
styles: {
|
||||
name: 'styles',
|
||||
type: 'css/mini-extract',
|
||||
// For webpack@4
|
||||
// test: /\.css$/,
|
||||
chunks: 'all',
|
||||
enforce: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].css',
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [MiniCssExtractPlugin.loader, 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Note that `type` should be used instead of `test` in Webpack 5, or else an extra `.js` file can be generated besides the `.css` file. This is because `test` doesn't know which modules should be dropped (in this case, it won't detect that `.js` should be dropped).
|
||||
|
||||
### Extracting CSS based on entry
|
||||
|
||||
You may also extract the CSS based on the webpack entry name.
|
||||
This is especially useful if you import routes dynamically but want to keep your CSS bundled according to entry.
|
||||
This also prevents the CSS duplication issue one had with the ExtractTextPlugin.
|
||||
|
||||
```js
|
||||
const path = require('path');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
function recursiveIssuer(m, c) {
|
||||
const issuer = c.moduleGraph.getIssuer(m);
|
||||
// For webpack@4 issuer = m.issuer
|
||||
|
||||
if (issuer) {
|
||||
return recursiveIssuer(issuer, c);
|
||||
}
|
||||
|
||||
const chunks = c.chunkGraph.getModuleChunks(m);
|
||||
// For webpack@4 chunks = m._chunks
|
||||
|
||||
for (const chunk of chunks) {
|
||||
return chunk.name;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
foo: path.resolve(__dirname, 'src/foo'),
|
||||
bar: path.resolve(__dirname, 'src/bar'),
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
cacheGroups: {
|
||||
fooStyles: {
|
||||
name: 'styles_foo',
|
||||
test: (m, c, entry = 'foo') =>
|
||||
m.constructor.name === 'CssModule' &&
|
||||
recursiveIssuer(m, c) === entry,
|
||||
chunks: 'all',
|
||||
enforce: true,
|
||||
},
|
||||
barStyles: {
|
||||
name: 'styles_bar',
|
||||
test: (m, c, entry = 'bar') =>
|
||||
m.constructor.name === 'CssModule' &&
|
||||
recursiveIssuer(m, c) === entry,
|
||||
chunks: 'all',
|
||||
enforce: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].css',
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [MiniCssExtractPlugin.loader, 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Filename Option as function
|
||||
|
||||
With the `filename` option you can use chunk data to customize the filename.
|
||||
This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk.
|
||||
In the example below, we'll use `filename` to output the generated css into a different directory.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: ({ chunk }) => `${chunk.name.replace('/js/', '/css/')}.css`,
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [MiniCssExtractPlugin.loader, 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Long Term Caching
|
||||
|
||||
For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].[contenthash].css',
|
||||
chunkFilename: '[id].[contenthash].css',
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [MiniCssExtractPlugin.loader, 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Remove Order Warnings
|
||||
|
||||
For projects where css ordering has been mitigated through consistent use of scoping or naming conventions, the css order warnings can be disabled by setting the ignoreOrder flag to true for the plugin.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
ignoreOrder: true,
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [MiniCssExtractPlugin.loader, 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Media Query Plugin
|
||||
|
||||
If you'd like to extract the media queries from the extracted CSS (so mobile users don't need to load desktop or tablet specific CSS anymore) you should use one of the following plugins:
|
||||
|
||||
- [Media Query Plugin](https://github.com/SassNinja/media-query-plugin)
|
||||
- [Media Query Splitting Plugin](https://github.com/mike-diamond/media-query-splitting-plugin)
|
||||
|
||||
## Contributing
|
||||
|
||||
Please take a moment to read our contributing guidelines if you haven't yet done so.
|
||||
|
||||
[CONTRIBUTING](./.github/CONTRIBUTING.md)
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE)
|
||||
|
||||
[npm]: https://img.shields.io/npm/v/mini-css-extract-plugin.svg
|
||||
[npm-url]: https://npmjs.com/package/mini-css-extract-plugin
|
||||
[node]: https://img.shields.io/node/v/mini-css-extract-plugin.svg
|
||||
[node-url]: https://nodejs.org
|
||||
[deps]: https://david-dm.org/webpack-contrib/mini-css-extract-plugin.svg
|
||||
[deps-url]: https://david-dm.org/webpack-contrib/mini-css-extract-plugin
|
||||
[tests]: https://github.com/webpack-contrib/mini-css-extract-plugin/workflows/mini-css-extract-plugin/badge.svg
|
||||
[tests-url]: https://github.com/webpack-contrib/mini-css-extract-plugin/actions
|
||||
[cover]: https://codecov.io/gh/webpack-contrib/mini-css-extract-plugin/branch/master/graph/badge.svg
|
||||
[cover-url]: https://codecov.io/gh/webpack-contrib/mini-css-extract-plugin
|
||||
[chat]: https://badges.gitter.im/webpack/webpack.svg
|
||||
[chat-url]: https://gitter.im/webpack/webpack
|
||||
[size]: https://packagephobia.now.sh/badge?p=mini-css-extract-plugin
|
||||
[size-url]: https://packagephobia.now.sh/result?p=mini-css-extract-plugin
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
"use strict";
|
||||
|
||||
module.exports = require('./index').default;
|
||||
+221
@@ -0,0 +1,221 @@
|
||||
"use strict";
|
||||
|
||||
/* eslint-env browser */
|
||||
|
||||
/*
|
||||
eslint-disable
|
||||
no-console,
|
||||
func-names
|
||||
*/
|
||||
var normalizeUrl = require('./normalize-url');
|
||||
|
||||
var srcByModuleId = Object.create(null);
|
||||
var noDocument = typeof document === 'undefined';
|
||||
var forEach = Array.prototype.forEach;
|
||||
|
||||
function debounce(fn, time) {
|
||||
var timeout = 0;
|
||||
return function () {
|
||||
var self = this; // eslint-disable-next-line prefer-rest-params
|
||||
|
||||
var args = arguments;
|
||||
|
||||
var functionCall = function functionCall() {
|
||||
return fn.apply(self, args);
|
||||
};
|
||||
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(functionCall, time);
|
||||
};
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
|
||||
function getCurrentScriptUrl(moduleId) {
|
||||
var src = srcByModuleId[moduleId];
|
||||
|
||||
if (!src) {
|
||||
if (document.currentScript) {
|
||||
src = document.currentScript.src;
|
||||
} else {
|
||||
var scripts = document.getElementsByTagName('script');
|
||||
var lastScriptTag = scripts[scripts.length - 1];
|
||||
|
||||
if (lastScriptTag) {
|
||||
src = lastScriptTag.src;
|
||||
}
|
||||
}
|
||||
|
||||
srcByModuleId[moduleId] = src;
|
||||
}
|
||||
|
||||
return function (fileMap) {
|
||||
if (!src) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var splitResult = src.split(/([^\\/]+)\.js$/);
|
||||
var filename = splitResult && splitResult[1];
|
||||
|
||||
if (!filename) {
|
||||
return [src.replace('.js', '.css')];
|
||||
}
|
||||
|
||||
if (!fileMap) {
|
||||
return [src.replace('.js', '.css')];
|
||||
}
|
||||
|
||||
return fileMap.split(',').map(function (mapRule) {
|
||||
var reg = new RegExp("".concat(filename, "\\.js$"), 'g');
|
||||
return normalizeUrl(src.replace(reg, "".concat(mapRule.replace(/{fileName}/g, filename), ".css")));
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function updateCss(el, url) {
|
||||
if (!url) {
|
||||
if (!el.href) {
|
||||
return;
|
||||
} // eslint-disable-next-line
|
||||
|
||||
|
||||
url = el.href.split('?')[0];
|
||||
}
|
||||
|
||||
if (!isUrlRequest(url)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (el.isLoaded === false) {
|
||||
// We seem to be about to replace a css link that hasn't loaded yet.
|
||||
// We're probably changing the same file more than once.
|
||||
return;
|
||||
}
|
||||
|
||||
if (!url || !(url.indexOf('.css') > -1)) {
|
||||
return;
|
||||
} // eslint-disable-next-line no-param-reassign
|
||||
|
||||
|
||||
el.visited = true;
|
||||
var newEl = el.cloneNode();
|
||||
newEl.isLoaded = false;
|
||||
newEl.addEventListener('load', function () {
|
||||
if (newEl.isLoaded) {
|
||||
return;
|
||||
}
|
||||
|
||||
newEl.isLoaded = true;
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
newEl.addEventListener('error', function () {
|
||||
if (newEl.isLoaded) {
|
||||
return;
|
||||
}
|
||||
|
||||
newEl.isLoaded = true;
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
newEl.href = "".concat(url, "?").concat(Date.now());
|
||||
|
||||
if (el.nextSibling) {
|
||||
el.parentNode.insertBefore(newEl, el.nextSibling);
|
||||
} else {
|
||||
el.parentNode.appendChild(newEl);
|
||||
}
|
||||
}
|
||||
|
||||
function getReloadUrl(href, src) {
|
||||
var ret; // eslint-disable-next-line no-param-reassign
|
||||
|
||||
href = normalizeUrl(href, {
|
||||
stripWWW: false
|
||||
}); // eslint-disable-next-line array-callback-return
|
||||
|
||||
src.some(function (url) {
|
||||
if (href.indexOf(src) > -1) {
|
||||
ret = url;
|
||||
}
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
||||
function reloadStyle(src) {
|
||||
if (!src) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var elements = document.querySelectorAll('link');
|
||||
var loaded = false;
|
||||
forEach.call(elements, function (el) {
|
||||
if (!el.href) {
|
||||
return;
|
||||
}
|
||||
|
||||
var url = getReloadUrl(el.href, src);
|
||||
|
||||
if (!isUrlRequest(url)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (el.visited === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (url) {
|
||||
updateCss(el, url);
|
||||
loaded = true;
|
||||
}
|
||||
});
|
||||
return loaded;
|
||||
}
|
||||
|
||||
function reloadAll() {
|
||||
var elements = document.querySelectorAll('link');
|
||||
forEach.call(elements, function (el) {
|
||||
if (el.visited === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateCss(el);
|
||||
});
|
||||
}
|
||||
|
||||
function isUrlRequest(url) {
|
||||
// An URL is not an request if
|
||||
// It is not http or https
|
||||
if (!/^https?:/i.test(url)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
module.exports = function (moduleId, options) {
|
||||
if (noDocument) {
|
||||
console.log('no window.document found, will not HMR CSS');
|
||||
return noop;
|
||||
}
|
||||
|
||||
var getScriptSrc = getCurrentScriptUrl(moduleId);
|
||||
|
||||
function update() {
|
||||
var src = getScriptSrc(options.filename);
|
||||
var reloaded = reloadStyle(src);
|
||||
|
||||
if (options.locals) {
|
||||
console.log('[HMR] Detected local css modules. Reload all css');
|
||||
reloadAll();
|
||||
return;
|
||||
}
|
||||
|
||||
if (reloaded) {
|
||||
console.log('[HMR] css reload %s', src.join(' '));
|
||||
} else {
|
||||
console.log('[HMR] Reload all css');
|
||||
reloadAll();
|
||||
}
|
||||
}
|
||||
|
||||
return debounce(update, 50);
|
||||
};
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
"use strict";
|
||||
|
||||
/* eslint-disable */
|
||||
function normalizeUrl(pathComponents) {
|
||||
return pathComponents.reduce(function (accumulator, item) {
|
||||
switch (item) {
|
||||
case '..':
|
||||
accumulator.pop();
|
||||
break;
|
||||
|
||||
case '.':
|
||||
break;
|
||||
|
||||
default:
|
||||
accumulator.push(item);
|
||||
}
|
||||
|
||||
return accumulator;
|
||||
}, []).join('/');
|
||||
}
|
||||
|
||||
module.exports = function (urlString) {
|
||||
urlString = urlString.trim();
|
||||
|
||||
if (/^data:/i.test(urlString)) {
|
||||
return urlString;
|
||||
}
|
||||
|
||||
var protocol = urlString.indexOf('//') !== -1 ? urlString.split('//')[0] + '//' : '';
|
||||
var components = urlString.replace(new RegExp(protocol, 'i'), '').split('/');
|
||||
var host = components[0].toLowerCase().replace(/\.$/, '');
|
||||
components[0] = '';
|
||||
var path = normalizeUrl(components);
|
||||
return protocol + host + path;
|
||||
};
|
||||
+912
@@ -0,0 +1,912 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = exports.pluginSymbol = exports.pluginName = void 0;
|
||||
|
||||
var _schemaUtils = require("schema-utils");
|
||||
|
||||
var _pluginOptions = _interopRequireDefault(require("./plugin-options.json"));
|
||||
|
||||
var _utils = require("./utils");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
/* eslint-disable class-methods-use-this */
|
||||
const pluginName = 'mini-css-extract-plugin';
|
||||
exports.pluginName = pluginName;
|
||||
const pluginSymbol = Symbol(pluginName);
|
||||
exports.pluginSymbol = pluginSymbol;
|
||||
const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
|
||||
const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i;
|
||||
const REGEXP_NAME = /\[name\]/i;
|
||||
const DEFAULT_FILENAME = '[name].css';
|
||||
const TYPES = new Set([_utils.MODULE_TYPE]);
|
||||
const CODE_GENERATION_RESULT = {
|
||||
sources: new Map(),
|
||||
runtimeRequirements: new Set()
|
||||
};
|
||||
/**
|
||||
* @type WeakMap<webpack, CssModule>
|
||||
*/
|
||||
|
||||
const cssModuleCache = new WeakMap();
|
||||
/**
|
||||
* @type WeakMap<webpack, CssDependency>
|
||||
*/
|
||||
|
||||
const cssDependencyCache = new WeakMap();
|
||||
const registered = new WeakSet();
|
||||
|
||||
class MiniCssExtractPlugin {
|
||||
static getCssModule(webpack) {
|
||||
/**
|
||||
* Prevent creation of multiple CssModule classes to allow other integrations to get the current CssModule.
|
||||
*/
|
||||
if (cssModuleCache.has(webpack)) {
|
||||
return cssModuleCache.get(webpack);
|
||||
}
|
||||
|
||||
class CssModule extends webpack.Module {
|
||||
constructor({
|
||||
context,
|
||||
identifier,
|
||||
identifierIndex,
|
||||
content,
|
||||
media,
|
||||
sourceMap,
|
||||
assets,
|
||||
assetsInfo
|
||||
}) {
|
||||
super(_utils.MODULE_TYPE, context);
|
||||
this.id = '';
|
||||
this._context = context;
|
||||
this._identifier = identifier;
|
||||
this._identifierIndex = identifierIndex;
|
||||
this.content = content;
|
||||
this.media = media;
|
||||
this.sourceMap = sourceMap;
|
||||
this.assets = assets;
|
||||
this.assetsInfo = assetsInfo;
|
||||
this._needBuild = true;
|
||||
} // no source() so webpack 4 doesn't do add stuff to the bundle
|
||||
|
||||
|
||||
size() {
|
||||
return this.content.length;
|
||||
}
|
||||
|
||||
identifier() {
|
||||
return `css|${this._identifier}|${this._identifierIndex}`;
|
||||
}
|
||||
|
||||
readableIdentifier(requestShortener) {
|
||||
return `css ${requestShortener.shorten(this._identifier)}${this._identifierIndex ? ` (${this._identifierIndex})` : ''}`;
|
||||
} // eslint-disable-next-line class-methods-use-this
|
||||
|
||||
|
||||
getSourceTypes() {
|
||||
return TYPES;
|
||||
} // eslint-disable-next-line class-methods-use-this
|
||||
|
||||
|
||||
codeGeneration() {
|
||||
return CODE_GENERATION_RESULT;
|
||||
}
|
||||
|
||||
nameForCondition() {
|
||||
const resource = this._identifier.split('!').pop();
|
||||
|
||||
const idx = resource.indexOf('?');
|
||||
|
||||
if (idx >= 0) {
|
||||
return resource.substring(0, idx);
|
||||
}
|
||||
|
||||
return resource;
|
||||
}
|
||||
|
||||
updateCacheModule(module) {
|
||||
if (this.content !== module.content || this.media !== module.media || this.sourceMap !== module.sourceMap || this.assets !== module.assets || this.assetsInfo !== module.assetsInfo) {
|
||||
this._needBuild = true;
|
||||
this.content = module.content;
|
||||
this.media = module.media;
|
||||
this.sourceMap = module.sourceMap;
|
||||
this.assets = module.assets;
|
||||
this.assetsInfo = module.assetsInfo;
|
||||
}
|
||||
} // eslint-disable-next-line class-methods-use-this
|
||||
|
||||
|
||||
needRebuild() {
|
||||
return this._needBuild;
|
||||
} // eslint-disable-next-line class-methods-use-this
|
||||
|
||||
|
||||
needBuild(context, callback) {
|
||||
callback(null, this._needBuild);
|
||||
}
|
||||
|
||||
build(options, compilation, resolver, fileSystem, callback) {
|
||||
this.buildInfo = {
|
||||
assets: this.assets,
|
||||
assetsInfo: this.assetsInfo,
|
||||
cacheable: true,
|
||||
hash: this._computeHash(compilation.outputOptions.hashFunction)
|
||||
};
|
||||
this.buildMeta = {};
|
||||
this._needBuild = false;
|
||||
callback();
|
||||
}
|
||||
|
||||
_computeHash(hashFunction) {
|
||||
const hash = webpack.util.createHash(hashFunction);
|
||||
hash.update(this.content);
|
||||
hash.update(this.media || '');
|
||||
hash.update(this.sourceMap || '');
|
||||
return hash.digest('hex');
|
||||
}
|
||||
|
||||
updateHash(hash, context) {
|
||||
super.updateHash(hash, context);
|
||||
hash.update(this.buildInfo.hash);
|
||||
}
|
||||
|
||||
serialize(context) {
|
||||
const {
|
||||
write
|
||||
} = context;
|
||||
write(this._context);
|
||||
write(this._identifier);
|
||||
write(this._identifierIndex);
|
||||
write(this.content);
|
||||
write(this.media);
|
||||
write(this.sourceMap);
|
||||
write(this.assets);
|
||||
write(this.assetsInfo);
|
||||
write(this._needBuild);
|
||||
super.serialize(context);
|
||||
}
|
||||
|
||||
deserialize(context) {
|
||||
this._needBuild = context.read();
|
||||
super.deserialize(context);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
cssModuleCache.set(webpack, CssModule);
|
||||
|
||||
if (webpack.util && webpack.util.serialization && webpack.util.serialization.register) {
|
||||
webpack.util.serialization.register(CssModule, 'mini-css-extract-plugin/dist/CssModule', null, {
|
||||
serialize(instance, context) {
|
||||
instance.serialize(context);
|
||||
},
|
||||
|
||||
deserialize(context) {
|
||||
const {
|
||||
read
|
||||
} = context;
|
||||
const contextModule = read();
|
||||
const identifier = read();
|
||||
const identifierIndex = read();
|
||||
const content = read();
|
||||
const media = read();
|
||||
const sourceMap = read();
|
||||
const assets = read();
|
||||
const assetsInfo = read();
|
||||
const dep = new CssModule({
|
||||
context: contextModule,
|
||||
identifier,
|
||||
identifierIndex,
|
||||
content,
|
||||
media,
|
||||
sourceMap,
|
||||
assets,
|
||||
assetsInfo
|
||||
});
|
||||
dep.deserialize(context);
|
||||
return dep;
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
return CssModule;
|
||||
}
|
||||
|
||||
static getCssDependency(webpack) {
|
||||
/**
|
||||
* Prevent creation of multiple CssDependency classes to allow other integrations to get the current CssDependency.
|
||||
*/
|
||||
if (cssDependencyCache.has(webpack)) {
|
||||
return cssDependencyCache.get(webpack);
|
||||
} // eslint-disable-next-line no-shadow
|
||||
|
||||
|
||||
class CssDependency extends webpack.Dependency {
|
||||
constructor({
|
||||
identifier,
|
||||
content,
|
||||
media,
|
||||
sourceMap
|
||||
}, context, identifierIndex) {
|
||||
super();
|
||||
this.identifier = identifier;
|
||||
this.identifierIndex = identifierIndex;
|
||||
this.content = content;
|
||||
this.media = media;
|
||||
this.sourceMap = sourceMap;
|
||||
this.context = context; // eslint-disable-next-line no-undefined
|
||||
|
||||
this.assets = undefined; // eslint-disable-next-line no-undefined
|
||||
|
||||
this.assetsInfo = undefined;
|
||||
}
|
||||
|
||||
getResourceIdentifier() {
|
||||
return `css-module-${this.identifier}-${this.identifierIndex}`;
|
||||
} // eslint-disable-next-line class-methods-use-this
|
||||
|
||||
|
||||
getModuleEvaluationSideEffectsState() {
|
||||
return webpack.ModuleGraphConnection.TRANSITIVE_ONLY;
|
||||
}
|
||||
|
||||
serialize(context) {
|
||||
const {
|
||||
write
|
||||
} = context;
|
||||
write(this.identifier);
|
||||
write(this.content);
|
||||
write(this.media);
|
||||
write(this.sourceMap);
|
||||
write(this.context);
|
||||
write(this.identifierIndex);
|
||||
write(this.assets);
|
||||
write(this.assetsInfo);
|
||||
super.serialize(context);
|
||||
}
|
||||
|
||||
deserialize(context) {
|
||||
super.deserialize(context);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
cssDependencyCache.set(webpack, CssDependency);
|
||||
|
||||
if (webpack.util && webpack.util.serialization && webpack.util.serialization.register) {
|
||||
webpack.util.serialization.register(CssDependency, 'mini-css-extract-plugin/dist/CssDependency', null, {
|
||||
serialize(instance, context) {
|
||||
instance.serialize(context);
|
||||
},
|
||||
|
||||
deserialize(context) {
|
||||
const {
|
||||
read
|
||||
} = context;
|
||||
const dep = new CssDependency({
|
||||
identifier: read(),
|
||||
content: read(),
|
||||
media: read(),
|
||||
sourceMap: read()
|
||||
}, read(), read());
|
||||
const assets = read();
|
||||
const assetsInfo = read();
|
||||
dep.assets = assets;
|
||||
dep.assetsInfo = assetsInfo;
|
||||
dep.deserialize(context);
|
||||
return dep;
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
return CssDependency;
|
||||
}
|
||||
|
||||
constructor(options = {}) {
|
||||
(0, _schemaUtils.validate)(_pluginOptions.default, options, {
|
||||
name: 'Mini CSS Extract Plugin',
|
||||
baseDataPath: 'options'
|
||||
});
|
||||
this._sortedModulesCache = new WeakMap();
|
||||
this.options = Object.assign({
|
||||
filename: DEFAULT_FILENAME,
|
||||
ignoreOrder: false,
|
||||
experimentalUseImportModule: false
|
||||
}, options);
|
||||
this.runtimeOptions = {
|
||||
insert: options.insert,
|
||||
linkType: // Todo in next major release set default to "false"
|
||||
options.linkType === true || typeof options.linkType === 'undefined' ? 'text/css' : options.linkType,
|
||||
attributes: options.attributes
|
||||
};
|
||||
|
||||
if (!this.options.chunkFilename) {
|
||||
const {
|
||||
filename
|
||||
} = this.options;
|
||||
|
||||
if (typeof filename !== 'function') {
|
||||
const hasName = filename.includes('[name]');
|
||||
const hasId = filename.includes('[id]');
|
||||
const hasChunkHash = filename.includes('[chunkhash]');
|
||||
const hasContentHash = filename.includes('[contenthash]'); // Anything changing depending on chunk is fine
|
||||
|
||||
if (hasChunkHash || hasContentHash || hasName || hasId) {
|
||||
this.options.chunkFilename = filename;
|
||||
} else {
|
||||
// Otherwise prefix "[id]." in front of the basename to make it changing
|
||||
this.options.chunkFilename = filename.replace(/(^|\/)([^/]*(?:\?|$))/, '$1[id].$2');
|
||||
}
|
||||
} else {
|
||||
this.options.chunkFilename = '[id].css';
|
||||
}
|
||||
}
|
||||
}
|
||||
/** @param {import("webpack").Compiler} compiler */
|
||||
|
||||
|
||||
apply(compiler) {
|
||||
const webpack = compiler.webpack ? compiler.webpack : // eslint-disable-next-line global-require
|
||||
require('webpack');
|
||||
|
||||
if (this.options.experimentalUseImportModule) {
|
||||
if (!compiler.options.experiments) {
|
||||
throw new Error('experimentalUseImportModule is only support for webpack >= 5.33.2');
|
||||
}
|
||||
|
||||
if (typeof compiler.options.experiments.executeModule === 'undefined') {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
compiler.options.experiments.executeModule = true;
|
||||
}
|
||||
} // TODO bug in webpack, remove it after it will be fixed
|
||||
// webpack tries to `require` loader firstly when serializer doesn't found
|
||||
|
||||
|
||||
if (webpack.util && webpack.util.serialization && webpack.util.serialization.registerLoader && !registered.has(webpack)) {
|
||||
registered.add(webpack);
|
||||
webpack.util.serialization.registerLoader(/^mini-css-extract-plugin\//, _utils.trueFn);
|
||||
}
|
||||
|
||||
const isWebpack4 = compiler.webpack ? false : typeof compiler.resolvers !== 'undefined';
|
||||
|
||||
if (!isWebpack4) {
|
||||
const {
|
||||
splitChunks
|
||||
} = compiler.options.optimization;
|
||||
|
||||
if (splitChunks) {
|
||||
if (splitChunks.defaultSizeTypes.includes('...')) {
|
||||
splitChunks.defaultSizeTypes.push(_utils.MODULE_TYPE);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const CssModule = MiniCssExtractPlugin.getCssModule(webpack);
|
||||
const CssDependency = MiniCssExtractPlugin.getCssDependency(webpack);
|
||||
const NormalModule = compiler.webpack && compiler.webpack.NormalModule ? compiler.webpack.NormalModule : // eslint-disable-next-line global-require
|
||||
require('webpack/lib/NormalModule');
|
||||
compiler.hooks.compilation.tap(pluginName, compilation => {
|
||||
const normalModuleHook = typeof NormalModule.getCompilationHooks !== 'undefined' ? NormalModule.getCompilationHooks(compilation).loader : compilation.hooks.normalModuleLoader;
|
||||
normalModuleHook.tap(pluginName, loaderContext => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
loaderContext[pluginSymbol] = {
|
||||
experimentalUseImportModule: this.options.experimentalUseImportModule
|
||||
};
|
||||
});
|
||||
});
|
||||
compiler.hooks.thisCompilation.tap(pluginName, compilation => {
|
||||
class CssModuleFactory {
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
create({
|
||||
dependencies: [dependency]
|
||||
}, callback) {
|
||||
callback(null, new CssModule(dependency));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
compilation.dependencyFactories.set(CssDependency, new CssModuleFactory());
|
||||
|
||||
class CssDependencyTemplate {
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
apply() {}
|
||||
|
||||
}
|
||||
|
||||
compilation.dependencyTemplates.set(CssDependency, new CssDependencyTemplate());
|
||||
|
||||
if (isWebpack4) {
|
||||
compilation.mainTemplate.hooks.renderManifest.tap(pluginName, (result, {
|
||||
chunk
|
||||
}) => {
|
||||
const {
|
||||
chunkGraph
|
||||
} = compilation;
|
||||
const renderedModules = Array.from(this.getChunkModules(chunk, chunkGraph)).filter(module => module.type === _utils.MODULE_TYPE);
|
||||
const filenameTemplate = chunk.filenameTemplate || this.options.filename;
|
||||
|
||||
if (renderedModules.length > 0) {
|
||||
result.push({
|
||||
render: () => this.renderContentAsset(compiler, compilation, chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
|
||||
filenameTemplate,
|
||||
pathOptions: {
|
||||
chunk,
|
||||
contentHashType: _utils.MODULE_TYPE
|
||||
},
|
||||
identifier: `${pluginName}.${chunk.id}`,
|
||||
hash: chunk.contentHash[_utils.MODULE_TYPE]
|
||||
});
|
||||
}
|
||||
});
|
||||
compilation.chunkTemplate.hooks.renderManifest.tap(pluginName, (result, {
|
||||
chunk
|
||||
}) => {
|
||||
const {
|
||||
chunkGraph
|
||||
} = compilation;
|
||||
const renderedModules = Array.from(this.getChunkModules(chunk, chunkGraph)).filter(module => module.type === _utils.MODULE_TYPE);
|
||||
const filenameTemplate = chunk.filenameTemplate || this.options.chunkFilename;
|
||||
|
||||
if (renderedModules.length > 0) {
|
||||
result.push({
|
||||
render: () => this.renderContentAsset(compiler, compilation, chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
|
||||
filenameTemplate,
|
||||
pathOptions: {
|
||||
chunk,
|
||||
contentHashType: _utils.MODULE_TYPE
|
||||
},
|
||||
identifier: `${pluginName}.${chunk.id}`,
|
||||
hash: chunk.contentHash[_utils.MODULE_TYPE]
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
compilation.hooks.renderManifest.tap(pluginName, (result, {
|
||||
chunk
|
||||
}) => {
|
||||
const {
|
||||
chunkGraph
|
||||
} = compilation;
|
||||
const {
|
||||
HotUpdateChunk
|
||||
} = webpack; // We don't need hot update chunks for css
|
||||
// We will use the real asset instead to update
|
||||
|
||||
if (chunk instanceof HotUpdateChunk) {
|
||||
return;
|
||||
}
|
||||
|
||||
const renderedModules = Array.from(this.getChunkModules(chunk, chunkGraph)).filter(module => module.type === _utils.MODULE_TYPE);
|
||||
const filenameTemplate = chunk.canBeInitial() ? this.options.filename : this.options.chunkFilename;
|
||||
|
||||
if (renderedModules.length > 0) {
|
||||
result.push({
|
||||
render: () => this.renderContentAsset(compiler, compilation, chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
|
||||
filenameTemplate,
|
||||
pathOptions: {
|
||||
chunk,
|
||||
contentHashType: _utils.MODULE_TYPE
|
||||
},
|
||||
identifier: `${pluginName}.${chunk.id}`,
|
||||
hash: chunk.contentHash[_utils.MODULE_TYPE]
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
/*
|
||||
* For webpack 5 this will be unneeded once the logic uses a RuntimeModule
|
||||
* as the content of runtime modules is hashed and added to the chunk hash automatically
|
||||
* */
|
||||
|
||||
|
||||
if (isWebpack4) {
|
||||
compilation.mainTemplate.hooks.hashForChunk.tap(pluginName, (hash, chunk) => {
|
||||
const {
|
||||
chunkFilename
|
||||
} = this.options;
|
||||
|
||||
if (REGEXP_CHUNKHASH.test(chunkFilename)) {
|
||||
hash.update(JSON.stringify(chunk.getChunkMaps(true).hash));
|
||||
}
|
||||
|
||||
if (REGEXP_CONTENTHASH.test(chunkFilename)) {
|
||||
hash.update(JSON.stringify(chunk.getChunkMaps(true).contentHash[_utils.MODULE_TYPE] || {}));
|
||||
}
|
||||
|
||||
if (REGEXP_NAME.test(chunkFilename)) {
|
||||
hash.update(JSON.stringify(chunk.getChunkMaps(true).name));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
compilation.hooks.contentHash.tap(pluginName, chunk => {
|
||||
const {
|
||||
outputOptions,
|
||||
chunkGraph
|
||||
} = compilation;
|
||||
const modules = isWebpack4 ? Array.from(this.getChunkModules(chunk, chunkGraph)).filter(module => module.type === _utils.MODULE_TYPE) : this.sortModules(compilation, chunk, chunkGraph.getChunkModulesIterableBySourceType(chunk, _utils.MODULE_TYPE), compilation.runtimeTemplate.requestShortener);
|
||||
|
||||
if (modules) {
|
||||
const {
|
||||
hashFunction,
|
||||
hashDigest,
|
||||
hashDigestLength
|
||||
} = outputOptions;
|
||||
const createHash = compiler.webpack ? compiler.webpack.util.createHash : webpack.util.createHash;
|
||||
const hash = createHash(hashFunction);
|
||||
|
||||
if (isWebpack4) {
|
||||
for (const m of modules) {
|
||||
m.updateHash(hash);
|
||||
}
|
||||
} else {
|
||||
for (const m of modules) {
|
||||
hash.update(chunkGraph.getModuleHash(m, chunk.runtime));
|
||||
}
|
||||
} // eslint-disable-next-line no-param-reassign
|
||||
|
||||
|
||||
chunk.contentHash[_utils.MODULE_TYPE] = hash.digest(hashDigest).substring(0, hashDigestLength);
|
||||
}
|
||||
});
|
||||
const {
|
||||
Template
|
||||
} = webpack;
|
||||
const {
|
||||
mainTemplate
|
||||
} = compilation;
|
||||
|
||||
if (isWebpack4) {
|
||||
mainTemplate.hooks.localVars.tap(pluginName, (source, chunk) => {
|
||||
const chunkMap = this.getCssChunkObject(chunk, compilation);
|
||||
|
||||
if (Object.keys(chunkMap).length > 0) {
|
||||
return Template.asString([source, '', '// object to store loaded CSS chunks', 'var installedCssChunks = {', Template.indent(chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};']);
|
||||
}
|
||||
|
||||
return source;
|
||||
});
|
||||
mainTemplate.hooks.requireEnsure.tap(pluginName, (source, chunk, hash) => {
|
||||
const chunkMap = this.getCssChunkObject(chunk, compilation);
|
||||
|
||||
if (Object.keys(chunkMap).length > 0) {
|
||||
const chunkMaps = chunk.getChunkMaps();
|
||||
const {
|
||||
crossOriginLoading
|
||||
} = mainTemplate.outputOptions;
|
||||
const linkHrefPath = mainTemplate.getAssetPath(JSON.stringify(this.options.chunkFilename), {
|
||||
hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
|
||||
hashWithLength: length => `" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
|
||||
chunk: {
|
||||
id: '" + chunkId + "',
|
||||
hash: `" + ${JSON.stringify(chunkMaps.hash)}[chunkId] + "`,
|
||||
|
||||
hashWithLength(length) {
|
||||
const shortChunkHashMap = Object.create(null);
|
||||
|
||||
for (const chunkId of Object.keys(chunkMaps.hash)) {
|
||||
if (typeof chunkMaps.hash[chunkId] === 'string') {
|
||||
shortChunkHashMap[chunkId] = chunkMaps.hash[chunkId].substring(0, length);
|
||||
}
|
||||
}
|
||||
|
||||
return `" + ${JSON.stringify(shortChunkHashMap)}[chunkId] + "`;
|
||||
},
|
||||
|
||||
contentHash: {
|
||||
[_utils.MODULE_TYPE]: `" + ${JSON.stringify(chunkMaps.contentHash[_utils.MODULE_TYPE])}[chunkId] + "`
|
||||
},
|
||||
contentHashWithLength: {
|
||||
[_utils.MODULE_TYPE]: length => {
|
||||
const shortContentHashMap = {};
|
||||
const contentHash = chunkMaps.contentHash[_utils.MODULE_TYPE];
|
||||
|
||||
for (const chunkId of Object.keys(contentHash)) {
|
||||
if (typeof contentHash[chunkId] === 'string') {
|
||||
shortContentHashMap[chunkId] = contentHash[chunkId].substring(0, length);
|
||||
}
|
||||
}
|
||||
|
||||
return `" + ${JSON.stringify(shortContentHashMap)}[chunkId] + "`;
|
||||
}
|
||||
},
|
||||
name: `" + (${JSON.stringify(chunkMaps.name)}[chunkId]||chunkId) + "`
|
||||
},
|
||||
contentHashType: _utils.MODULE_TYPE
|
||||
});
|
||||
return Template.asString([source, '', `// ${pluginName} CSS loading`, `var cssChunks = ${JSON.stringify(chunkMap)};`, 'if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);', 'else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {', Template.indent(['promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {', Template.indent([`var href = ${linkHrefPath};`, `var fullhref = ${mainTemplate.requireFn}.p + href;`, 'var existingLinkTags = document.getElementsByTagName("link");', 'for(var i = 0; i < existingLinkTags.length; i++) {', Template.indent(['var tag = existingLinkTags[i];', 'var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");', 'if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();']), '}', 'var existingStyleTags = document.getElementsByTagName("style");', 'for(var i = 0; i < existingStyleTags.length; i++) {', Template.indent(['var tag = existingStyleTags[i];', 'var dataHref = tag.getAttribute("data-href");', 'if(dataHref === href || dataHref === fullhref) return resolve();']), '}', 'var linkTag = document.createElement("link");', this.runtimeOptions.attributes ? Template.asString(Object.entries(this.runtimeOptions.attributes).map(entry => {
|
||||
const [key, value] = entry;
|
||||
return `linkTag.setAttribute(${JSON.stringify(key)}, ${JSON.stringify(value)});`;
|
||||
})) : '', 'linkTag.rel = "stylesheet";', this.runtimeOptions.linkType ? `linkTag.type = ${JSON.stringify(this.runtimeOptions.linkType)};` : '', 'var onLinkComplete = function (event) {', Template.indent(['// avoid mem leaks.', 'linkTag.onerror = linkTag.onload = null;', "if (event.type === 'load') {", Template.indent(['resolve();']), '} else {', Template.indent(["var errorType = event && (event.type === 'load' ? 'missing' : event.type);", 'var realHref = event && event.target && event.target.href || fullhref;', 'var err = new Error("Loading CSS chunk " + chunkId + " failed.\\n(" + realHref + ")");', 'err.code = "CSS_CHUNK_LOAD_FAILED";', 'err.type = errorType;', 'err.request = realHref;', 'delete installedCssChunks[chunkId]', 'linkTag.parentNode.removeChild(linkTag)', 'reject(err);']), '}']), '};', 'linkTag.onerror = linkTag.onload = onLinkComplete;', 'linkTag.href = fullhref;', crossOriginLoading ? Template.asString([`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`, Template.indent(`linkTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', typeof this.runtimeOptions.insert !== 'undefined' ? typeof this.runtimeOptions.insert === 'function' ? `(${this.runtimeOptions.insert.toString()})(linkTag)` : Template.asString([`var target = document.querySelector("${this.runtimeOptions.insert}");`, `target.parentNode.insertBefore(linkTag, target.nextSibling);`]) : Template.asString(['document.head.appendChild(linkTag);'])]), '}).then(function() {', Template.indent(['installedCssChunks[chunkId] = 0;']), '}));']), '}']);
|
||||
}
|
||||
|
||||
return source;
|
||||
});
|
||||
} else {
|
||||
const {
|
||||
RuntimeGlobals,
|
||||
runtime
|
||||
} = webpack; // eslint-disable-next-line no-shadow
|
||||
|
||||
const getCssChunkObject = (mainChunk, compilation) => {
|
||||
const obj = {};
|
||||
const {
|
||||
chunkGraph
|
||||
} = compilation;
|
||||
|
||||
for (const chunk of mainChunk.getAllAsyncChunks()) {
|
||||
const modules = chunkGraph.getOrderedChunkModulesIterable(chunk, _utils.compareModulesByIdentifier);
|
||||
|
||||
for (const module of modules) {
|
||||
if (module.type === _utils.MODULE_TYPE) {
|
||||
obj[chunk.id] = 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return obj;
|
||||
};
|
||||
|
||||
const {
|
||||
RuntimeModule
|
||||
} = webpack;
|
||||
|
||||
class CssLoadingRuntimeModule extends RuntimeModule {
|
||||
constructor(runtimeRequirements, runtimeOptions) {
|
||||
super('css loading', 10);
|
||||
this.runtimeRequirements = runtimeRequirements;
|
||||
this.runtimeOptions = runtimeOptions;
|
||||
}
|
||||
|
||||
generate() {
|
||||
const {
|
||||
chunk,
|
||||
runtimeRequirements
|
||||
} = this;
|
||||
const {
|
||||
runtimeTemplate,
|
||||
outputOptions: {
|
||||
crossOriginLoading
|
||||
}
|
||||
} = this.compilation;
|
||||
const chunkMap = getCssChunkObject(chunk, this.compilation);
|
||||
const withLoading = runtimeRequirements.has(RuntimeGlobals.ensureChunkHandlers) && Object.keys(chunkMap).length > 0;
|
||||
const withHmr = runtimeRequirements.has(RuntimeGlobals.hmrDownloadUpdateHandlers);
|
||||
|
||||
if (!withLoading && !withHmr) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return Template.asString([`var createStylesheet = ${runtimeTemplate.basicFunction('chunkId, fullhref, resolve, reject', ['var linkTag = document.createElement("link");', this.runtimeOptions.attributes ? Template.asString(Object.entries(this.runtimeOptions.attributes).map(entry => {
|
||||
const [key, value] = entry;
|
||||
return `linkTag.setAttribute(${JSON.stringify(key)}, ${JSON.stringify(value)});`;
|
||||
})) : '', 'linkTag.rel = "stylesheet";', this.runtimeOptions.linkType ? `linkTag.type = ${JSON.stringify(this.runtimeOptions.linkType)};` : '', `var onLinkComplete = ${runtimeTemplate.basicFunction('event', ['// avoid mem leaks.', 'linkTag.onerror = linkTag.onload = null;', "if (event.type === 'load') {", Template.indent(['resolve();']), '} else {', Template.indent(["var errorType = event && (event.type === 'load' ? 'missing' : event.type);", 'var realHref = event && event.target && event.target.href || fullhref;', 'var err = new Error("Loading CSS chunk " + chunkId + " failed.\\n(" + realHref + ")");', 'err.code = "CSS_CHUNK_LOAD_FAILED";', 'err.type = errorType;', 'err.request = realHref;', 'linkTag.parentNode.removeChild(linkTag)', 'reject(err);']), '}'])}`, 'linkTag.onerror = linkTag.onload = onLinkComplete;', 'linkTag.href = fullhref;', crossOriginLoading ? Template.asString([`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`, Template.indent(`linkTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', typeof this.runtimeOptions.insert !== 'undefined' ? typeof this.runtimeOptions.insert === 'function' ? `(${this.runtimeOptions.insert.toString()})(linkTag)` : Template.asString([`var target = document.querySelector("${this.runtimeOptions.insert}");`, `target.parentNode.insertBefore(linkTag, target.nextSibling);`]) : Template.asString(['document.head.appendChild(linkTag);']), 'return linkTag;'])};`, `var findStylesheet = ${runtimeTemplate.basicFunction('href, fullhref', ['var existingLinkTags = document.getElementsByTagName("link");', 'for(var i = 0; i < existingLinkTags.length; i++) {', Template.indent(['var tag = existingLinkTags[i];', 'var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");', 'if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;']), '}', 'var existingStyleTags = document.getElementsByTagName("style");', 'for(var i = 0; i < existingStyleTags.length; i++) {', Template.indent(['var tag = existingStyleTags[i];', 'var dataHref = tag.getAttribute("data-href");', 'if(dataHref === href || dataHref === fullhref) return tag;']), '}'])};`, `var loadStylesheet = ${runtimeTemplate.basicFunction('chunkId', `return new Promise(${runtimeTemplate.basicFunction('resolve, reject', [`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`, `var fullhref = ${RuntimeGlobals.publicPath} + href;`, 'if(findStylesheet(href, fullhref)) return resolve();', 'createStylesheet(chunkId, fullhref, resolve, reject);'])});`)}`, withLoading ? Template.asString(['// object to store loaded CSS chunks', 'var installedCssChunks = {', Template.indent(chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};', '', `${RuntimeGlobals.ensureChunkHandlers}.miniCss = ${runtimeTemplate.basicFunction('chunkId, promises', [`var cssChunks = ${JSON.stringify(chunkMap)};`, 'if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);', 'else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {', Template.indent([`promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(${runtimeTemplate.basicFunction('', 'installedCssChunks[chunkId] = 0;')}, ${runtimeTemplate.basicFunction('e', ['delete installedCssChunks[chunkId];', 'throw e;'])}));`]), '}'])};`]) : '// no chunk loading', '', withHmr ? Template.asString(['var oldTags = [];', 'var newTags = [];', `var applyHandler = ${runtimeTemplate.basicFunction('options', [`return { dispose: ${runtimeTemplate.basicFunction('', ['for(var i = 0; i < oldTags.length; i++) {', Template.indent(['var oldTag = oldTags[i];', 'if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);']), '}', 'oldTags.length = 0;'])}, apply: ${runtimeTemplate.basicFunction('', ['for(var i = 0; i < newTags.length; i++) newTags[i].rel = "stylesheet";', 'newTags.length = 0;'])} };`])}`, `${RuntimeGlobals.hmrDownloadUpdateHandlers}.miniCss = ${runtimeTemplate.basicFunction('chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList', ['applyHandlers.push(applyHandler);', `chunkIds.forEach(${runtimeTemplate.basicFunction('chunkId', [`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`, `var fullhref = ${RuntimeGlobals.publicPath} + href;`, 'var oldTag = findStylesheet(href, fullhref);', 'if(!oldTag) return;', `promises.push(new Promise(${runtimeTemplate.basicFunction('resolve, reject', [`var tag = createStylesheet(chunkId, fullhref, ${runtimeTemplate.basicFunction('', ['tag.as = "style";', 'tag.rel = "preload";', 'resolve();'])}, reject);`, 'oldTags.push(oldTag);', 'newTags.push(tag);'])}));`])});`])}`]) : '// no hmr']);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const enabledChunks = new WeakSet();
|
||||
|
||||
const handler = (chunk, set) => {
|
||||
if (enabledChunks.has(chunk)) {
|
||||
return;
|
||||
}
|
||||
|
||||
enabledChunks.add(chunk);
|
||||
|
||||
if (typeof this.options.chunkFilename === 'string' && /\[(full)?hash(:\d+)?\]/.test(this.options.chunkFilename)) {
|
||||
set.add(RuntimeGlobals.getFullHash);
|
||||
}
|
||||
|
||||
set.add(RuntimeGlobals.publicPath);
|
||||
compilation.addRuntimeModule(chunk, new runtime.GetChunkFilenameRuntimeModule(_utils.MODULE_TYPE, 'mini-css', `${RuntimeGlobals.require}.miniCssF`, referencedChunk => {
|
||||
if (!referencedChunk.contentHash[_utils.MODULE_TYPE]) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return referencedChunk.canBeInitial() ? this.options.filename : this.options.chunkFilename;
|
||||
}, true));
|
||||
compilation.addRuntimeModule(chunk, new CssLoadingRuntimeModule(set, this.runtimeOptions));
|
||||
};
|
||||
|
||||
compilation.hooks.runtimeRequirementInTree.for(RuntimeGlobals.ensureChunkHandlers).tap(pluginName, handler);
|
||||
compilation.hooks.runtimeRequirementInTree.for(RuntimeGlobals.hmrDownloadUpdateHandlers).tap(pluginName, handler);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getChunkModules(chunk, chunkGraph) {
|
||||
return typeof chunkGraph !== 'undefined' ? chunkGraph.getOrderedChunkModulesIterable(chunk, _utils.compareModulesByIdentifier) : chunk.modulesIterable;
|
||||
}
|
||||
|
||||
getCssChunkObject(mainChunk, compilation) {
|
||||
const obj = {};
|
||||
const {
|
||||
chunkGraph
|
||||
} = compilation;
|
||||
|
||||
for (const chunk of mainChunk.getAllAsyncChunks()) {
|
||||
for (const module of this.getChunkModules(chunk, chunkGraph)) {
|
||||
if (module.type === _utils.MODULE_TYPE) {
|
||||
obj[chunk.id] = 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
sortModules(compilation, chunk, modules, requestShortener) {
|
||||
let usedModules = this._sortedModulesCache.get(chunk);
|
||||
|
||||
if (usedModules || !modules) {
|
||||
return usedModules;
|
||||
}
|
||||
|
||||
const modulesList = [...modules];
|
||||
const [chunkGroup] = chunk.groupsIterable;
|
||||
const moduleIndexFunctionName = typeof compilation.chunkGraph !== 'undefined' ? 'getModulePostOrderIndex' : 'getModuleIndex2';
|
||||
|
||||
if (typeof chunkGroup[moduleIndexFunctionName] === 'function') {
|
||||
// Store dependencies for modules
|
||||
const moduleDependencies = new Map(modulesList.map(m => [m, new Set()]));
|
||||
const moduleDependenciesReasons = new Map(modulesList.map(m => [m, new Map()])); // Get ordered list of modules per chunk group
|
||||
// This loop also gathers dependencies from the ordered lists
|
||||
// Lists are in reverse order to allow to use Array.pop()
|
||||
|
||||
const modulesByChunkGroup = Array.from(chunk.groupsIterable, cg => {
|
||||
const sortedModules = modulesList.map(m => {
|
||||
return {
|
||||
module: m,
|
||||
index: cg[moduleIndexFunctionName](m)
|
||||
};
|
||||
}) // eslint-disable-next-line no-undefined
|
||||
.filter(item => item.index !== undefined).sort((a, b) => b.index - a.index).map(item => item.module);
|
||||
|
||||
for (let i = 0; i < sortedModules.length; i++) {
|
||||
const set = moduleDependencies.get(sortedModules[i]);
|
||||
const reasons = moduleDependenciesReasons.get(sortedModules[i]);
|
||||
|
||||
for (let j = i + 1; j < sortedModules.length; j++) {
|
||||
const module = sortedModules[j];
|
||||
set.add(module);
|
||||
const reason = reasons.get(module) || new Set();
|
||||
reason.add(cg);
|
||||
reasons.set(module, reason);
|
||||
}
|
||||
}
|
||||
|
||||
return sortedModules;
|
||||
}); // set with already included modules in correct order
|
||||
|
||||
usedModules = new Set();
|
||||
|
||||
const unusedModulesFilter = m => !usedModules.has(m);
|
||||
|
||||
while (usedModules.size < modulesList.length) {
|
||||
let success = false;
|
||||
let bestMatch;
|
||||
let bestMatchDeps; // get first module where dependencies are fulfilled
|
||||
|
||||
for (const list of modulesByChunkGroup) {
|
||||
// skip and remove already added modules
|
||||
while (list.length > 0 && usedModules.has(list[list.length - 1])) {
|
||||
list.pop();
|
||||
} // skip empty lists
|
||||
|
||||
|
||||
if (list.length !== 0) {
|
||||
const module = list[list.length - 1];
|
||||
const deps = moduleDependencies.get(module); // determine dependencies that are not yet included
|
||||
|
||||
const failedDeps = Array.from(deps).filter(unusedModulesFilter); // store best match for fallback behavior
|
||||
|
||||
if (!bestMatchDeps || bestMatchDeps.length > failedDeps.length) {
|
||||
bestMatch = list;
|
||||
bestMatchDeps = failedDeps;
|
||||
}
|
||||
|
||||
if (failedDeps.length === 0) {
|
||||
// use this module and remove it from list
|
||||
usedModules.add(list.pop());
|
||||
success = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!success) {
|
||||
// no module found => there is a conflict
|
||||
// use list with fewest failed deps
|
||||
// and emit a warning
|
||||
const fallbackModule = bestMatch.pop();
|
||||
|
||||
if (!this.options.ignoreOrder) {
|
||||
const reasons = moduleDependenciesReasons.get(fallbackModule);
|
||||
compilation.warnings.push(new Error([`chunk ${chunk.name || chunk.id} [${pluginName}]`, 'Conflicting order. Following module has been added:', ` * ${fallbackModule.readableIdentifier(requestShortener)}`, 'despite it was not able to fulfill desired ordering with these modules:', ...bestMatchDeps.map(m => {
|
||||
const goodReasonsMap = moduleDependenciesReasons.get(m);
|
||||
const goodReasons = goodReasonsMap && goodReasonsMap.get(fallbackModule);
|
||||
const failedChunkGroups = Array.from(reasons.get(m), cg => cg.name).join(', ');
|
||||
const goodChunkGroups = goodReasons && Array.from(goodReasons, cg => cg.name).join(', ');
|
||||
return [` * ${m.readableIdentifier(requestShortener)}`, ` - couldn't fulfill desired order of chunk group(s) ${failedChunkGroups}`, goodChunkGroups && ` - while fulfilling desired order of chunk group(s) ${goodChunkGroups}`].filter(Boolean).join('\n');
|
||||
})].join('\n')));
|
||||
}
|
||||
|
||||
usedModules.add(fallbackModule);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// fallback for older webpack versions
|
||||
// (to avoid a breaking change)
|
||||
// TODO remove this in next major version
|
||||
// and increase minimum webpack version to 4.12.0
|
||||
modulesList.sort((a, b) => a.index2 - b.index2);
|
||||
usedModules = modulesList;
|
||||
}
|
||||
|
||||
this._sortedModulesCache.set(chunk, usedModules);
|
||||
|
||||
return usedModules;
|
||||
}
|
||||
|
||||
renderContentAsset(compiler, compilation, chunk, modules, requestShortener) {
|
||||
const usedModules = this.sortModules(compilation, chunk, modules, requestShortener); // TODO remove after drop webpack v4
|
||||
|
||||
const {
|
||||
ConcatSource,
|
||||
SourceMapSource,
|
||||
RawSource
|
||||
} = compiler.webpack ? compiler.webpack.sources : // eslint-disable-next-line global-require
|
||||
require('webpack-sources');
|
||||
const source = new ConcatSource();
|
||||
const externalsSource = new ConcatSource();
|
||||
|
||||
for (const m of usedModules) {
|
||||
let content = m.content.toString();
|
||||
|
||||
if (/^@import url/.test(content)) {
|
||||
// HACK for IE
|
||||
// http://stackoverflow.com/a/14676665/1458162
|
||||
if (m.media) {
|
||||
// insert media into the @import
|
||||
// this is rar
|
||||
// TODO improve this and parse the CSS to support multiple medias
|
||||
content = content.replace(/;|\s*$/, m.media);
|
||||
}
|
||||
|
||||
externalsSource.add(content);
|
||||
externalsSource.add('\n');
|
||||
} else {
|
||||
if (m.media) {
|
||||
source.add(`@media ${m.media} {\n`);
|
||||
}
|
||||
|
||||
if (m.sourceMap) {
|
||||
source.add(new SourceMapSource(content, m.readableIdentifier(requestShortener), m.sourceMap.toString()));
|
||||
} else {
|
||||
source.add(new RawSource(content, m.readableIdentifier(requestShortener)));
|
||||
}
|
||||
|
||||
source.add('\n');
|
||||
|
||||
if (m.media) {
|
||||
source.add('}\n');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return new ConcatSource(externalsSource, source);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MiniCssExtractPlugin.loader = require.resolve('./loader');
|
||||
var _default = MiniCssExtractPlugin;
|
||||
exports.default = _default;
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"publicPath": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
},
|
||||
"emit": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"esModule": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"layer": {
|
||||
"type": "string"
|
||||
},
|
||||
"modules": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"namedExport": {
|
||||
"description": "Enables/disables ES modules named export for locals (https://webpack.js.org/plugins/mini-css-extract-plugin/#namedexport).",
|
||||
"type": "boolean"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+327
@@ -0,0 +1,327 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.pitch = pitch;
|
||||
exports.default = _default;
|
||||
|
||||
var _path = _interopRequireDefault(require("path"));
|
||||
|
||||
var _loaderUtils = _interopRequireDefault(require("loader-utils"));
|
||||
|
||||
var _schemaUtils = require("schema-utils");
|
||||
|
||||
var _utils = require("./utils");
|
||||
|
||||
var _loaderOptions = _interopRequireDefault(require("./loader-options.json"));
|
||||
|
||||
var _index = _interopRequireWildcard(require("./index"));
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function hotLoader(content, context) {
|
||||
const accept = context.locals ? '' : 'module.hot.accept(undefined, cssReload);';
|
||||
return `${content}
|
||||
if(module.hot) {
|
||||
// ${Date.now()}
|
||||
var cssReload = require(${_loaderUtils.default.stringifyRequest(context.context, _path.default.join(__dirname, 'hmr/hotModuleReplacement.js'))})(module.id, ${JSON.stringify({ ...context.options,
|
||||
locals: !!context.locals
|
||||
})});
|
||||
module.hot.dispose(cssReload);
|
||||
${accept}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
function pitch(request) {
|
||||
const options = _loaderUtils.default.getOptions(this) || {};
|
||||
(0, _schemaUtils.validate)(_loaderOptions.default, options, {
|
||||
name: 'Mini CSS Extract Plugin Loader',
|
||||
baseDataPath: 'options'
|
||||
});
|
||||
const callback = this.async();
|
||||
const optionsFromPlugin = this[_index.pluginSymbol];
|
||||
|
||||
if (!optionsFromPlugin) {
|
||||
callback(new Error("You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started"));
|
||||
return;
|
||||
} // TODO simplify after drop webpack v4
|
||||
// eslint-disable-next-line global-require
|
||||
|
||||
|
||||
const webpack = this._compiler.webpack || require('webpack');
|
||||
|
||||
const handleExports = (originalExports, compilation, assets, assetsInfo) => {
|
||||
let locals;
|
||||
const esModule = typeof options.esModule !== 'undefined' ? options.esModule : true;
|
||||
const namedExport = esModule && options.modules && options.modules.namedExport;
|
||||
|
||||
const addDependencies = dependencies => {
|
||||
if (!Array.isArray(dependencies) && dependencies != null) {
|
||||
throw new Error(`Exported value was not extracted as an array: ${JSON.stringify(dependencies)}`);
|
||||
}
|
||||
|
||||
const identifierCountMap = new Map();
|
||||
const emit = typeof options.emit !== 'undefined' ? options.emit : true;
|
||||
let lastDep;
|
||||
|
||||
for (const dependency of dependencies) {
|
||||
if (!dependency.identifier || !emit) {
|
||||
// eslint-disable-next-line no-continue
|
||||
continue;
|
||||
}
|
||||
|
||||
const count = identifierCountMap.get(dependency.identifier) || 0;
|
||||
|
||||
const CssDependency = _index.default.getCssDependency(webpack);
|
||||
|
||||
this._module.addDependency(lastDep = new CssDependency(dependency, dependency.context, count));
|
||||
|
||||
identifierCountMap.set(dependency.identifier, count + 1);
|
||||
}
|
||||
|
||||
if (lastDep && assets) {
|
||||
lastDep.assets = assets;
|
||||
lastDep.assetsInfo = assetsInfo;
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
const exports = originalExports.__esModule ? originalExports.default : originalExports;
|
||||
|
||||
if (namedExport) {
|
||||
Object.keys(originalExports).forEach(key => {
|
||||
if (key !== 'default') {
|
||||
if (!locals) {
|
||||
locals = {};
|
||||
}
|
||||
|
||||
locals[key] = originalExports[key];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
locals = exports && exports.locals;
|
||||
}
|
||||
|
||||
let dependencies;
|
||||
|
||||
if (!Array.isArray(exports)) {
|
||||
dependencies = [[null, exports]];
|
||||
} else {
|
||||
dependencies = exports.map(([id, content, media, sourceMap]) => {
|
||||
let identifier = id;
|
||||
let context;
|
||||
|
||||
if (compilation) {
|
||||
const module = (0, _utils.findModuleById)(compilation, id);
|
||||
identifier = module.identifier();
|
||||
({
|
||||
context
|
||||
} = module);
|
||||
} else {
|
||||
// TODO check if this context is used somewhere
|
||||
context = this.rootContext;
|
||||
}
|
||||
|
||||
return {
|
||||
identifier,
|
||||
context,
|
||||
content: Buffer.from(content),
|
||||
media,
|
||||
sourceMap: sourceMap ? Buffer.from(JSON.stringify(sourceMap)) : // eslint-disable-next-line no-undefined
|
||||
undefined
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
addDependencies(dependencies);
|
||||
} catch (e) {
|
||||
return callback(e);
|
||||
}
|
||||
|
||||
const result = locals ? namedExport ? Object.keys(locals).map(key => `\nexport var ${key} = ${JSON.stringify(locals[key])};`).join('') : `\n${esModule ? 'export default' : 'module.exports ='} ${JSON.stringify(locals)};` : esModule ? `\nexport {};` : '';
|
||||
let resultSource = `// extracted by ${_index.pluginName}`;
|
||||
resultSource += this.hot ? hotLoader(result, {
|
||||
context: this.context,
|
||||
options,
|
||||
locals
|
||||
}) : result;
|
||||
return callback(null, resultSource);
|
||||
};
|
||||
|
||||
const publicPath = typeof options.publicPath === 'string' ? options.publicPath === 'auto' ? '' : options.publicPath === '' || options.publicPath.endsWith('/') ? options.publicPath : `${options.publicPath}/` : typeof options.publicPath === 'function' ? options.publicPath(this.resourcePath, this.rootContext) : this._compilation.outputOptions.publicPath === 'auto' ? '' : this._compilation.outputOptions.publicPath;
|
||||
|
||||
if (optionsFromPlugin.experimentalUseImportModule) {
|
||||
if (!this.importModule) {
|
||||
callback(new Error("You are using experimentalUseImportModule but 'this.importModule' is not available in loader context. You need to have at least webpack 5.33.2."));
|
||||
return;
|
||||
}
|
||||
|
||||
this.importModule(`${this.resourcePath}.webpack[javascript/auto]!=!${request}`, {
|
||||
layer: options.layer,
|
||||
publicPath
|
||||
}, (err, exports) => {
|
||||
if (err) {
|
||||
callback(err);
|
||||
return;
|
||||
}
|
||||
|
||||
handleExports(exports);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const loaders = this.loaders.slice(this.loaderIndex + 1);
|
||||
this.addDependency(this.resourcePath);
|
||||
const childFilename = '*';
|
||||
const outputOptions = {
|
||||
filename: childFilename,
|
||||
publicPath
|
||||
};
|
||||
|
||||
const childCompiler = this._compilation.createChildCompiler(`${_index.pluginName} ${request}`, outputOptions); // The templates are compiled and executed by NodeJS - similar to server side rendering
|
||||
// Unfortunately this causes issues as some loaders require an absolute URL to support ES Modules
|
||||
// The following config enables relative URL support for the child compiler
|
||||
|
||||
|
||||
childCompiler.options.module = { ...childCompiler.options.module
|
||||
};
|
||||
childCompiler.options.module.parser = { ...childCompiler.options.module.parser
|
||||
};
|
||||
childCompiler.options.module.parser.javascript = { ...childCompiler.options.module.parser.javascript,
|
||||
url: 'relative'
|
||||
};
|
||||
const {
|
||||
NodeTemplatePlugin
|
||||
} = webpack.node;
|
||||
const NodeTargetPlugin = webpack.node.NodeTargetPlugin ? webpack.node.NodeTargetPlugin : // eslint-disable-next-line global-require
|
||||
require('webpack/lib/node/NodeTargetPlugin');
|
||||
new NodeTemplatePlugin(outputOptions).apply(childCompiler);
|
||||
new NodeTargetPlugin().apply(childCompiler);
|
||||
const {
|
||||
EntryOptionPlugin
|
||||
} = webpack;
|
||||
|
||||
if (EntryOptionPlugin) {
|
||||
const {
|
||||
library: {
|
||||
EnableLibraryPlugin
|
||||
}
|
||||
} = webpack;
|
||||
new EnableLibraryPlugin('commonjs2').apply(childCompiler);
|
||||
EntryOptionPlugin.applyEntryOption(childCompiler, this.context, {
|
||||
child: {
|
||||
library: {
|
||||
type: 'commonjs2'
|
||||
},
|
||||
import: [`!!${request}`]
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const {
|
||||
LibraryTemplatePlugin,
|
||||
SingleEntryPlugin
|
||||
} = webpack;
|
||||
new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler);
|
||||
new SingleEntryPlugin(this.context, `!!${request}`, _index.pluginName).apply(childCompiler);
|
||||
}
|
||||
|
||||
const {
|
||||
LimitChunkCountPlugin
|
||||
} = webpack.optimize;
|
||||
new LimitChunkCountPlugin({
|
||||
maxChunks: 1
|
||||
}).apply(childCompiler);
|
||||
const NormalModule = webpack.NormalModule ? webpack.NormalModule : // eslint-disable-next-line global-require
|
||||
require('webpack/lib/NormalModule');
|
||||
childCompiler.hooks.thisCompilation.tap(`${_index.pluginName} loader`, compilation => {
|
||||
const normalModuleHook = typeof NormalModule.getCompilationHooks !== 'undefined' ? NormalModule.getCompilationHooks(compilation).loader : compilation.hooks.normalModuleLoader;
|
||||
normalModuleHook.tap(`${_index.pluginName} loader`, (loaderContext, module) => {
|
||||
if (module.request === request) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
module.loaders = loaders.map(loader => {
|
||||
return {
|
||||
loader: loader.path,
|
||||
options: loader.options,
|
||||
ident: loader.ident
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
let source;
|
||||
const isWebpack4 = childCompiler.webpack ? false : typeof childCompiler.resolvers !== 'undefined';
|
||||
|
||||
if (isWebpack4) {
|
||||
childCompiler.hooks.afterCompile.tap(_index.pluginName, compilation => {
|
||||
source = compilation.assets[childFilename] && compilation.assets[childFilename].source(); // Remove all chunk assets
|
||||
|
||||
compilation.chunks.forEach(chunk => {
|
||||
chunk.files.forEach(file => {
|
||||
delete compilation.assets[file]; // eslint-disable-line no-param-reassign
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
childCompiler.hooks.compilation.tap(_index.pluginName, compilation => {
|
||||
compilation.hooks.processAssets.tap(_index.pluginName, () => {
|
||||
source = compilation.assets[childFilename] && compilation.assets[childFilename].source(); // console.log(source);
|
||||
// Remove all chunk assets
|
||||
|
||||
compilation.chunks.forEach(chunk => {
|
||||
chunk.files.forEach(file => {
|
||||
compilation.deleteAsset(file);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
childCompiler.runAsChild((error, entries, compilation) => {
|
||||
const assets = Object.create(null);
|
||||
const assetsInfo = new Map();
|
||||
|
||||
for (const asset of compilation.getAssets()) {
|
||||
assets[asset.name] = asset.source;
|
||||
assetsInfo.set(asset.name, asset.info);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return callback(error);
|
||||
}
|
||||
|
||||
if (compilation.errors.length > 0) {
|
||||
return callback(compilation.errors[0]);
|
||||
}
|
||||
|
||||
compilation.fileDependencies.forEach(dep => {
|
||||
this.addDependency(dep);
|
||||
}, this);
|
||||
compilation.contextDependencies.forEach(dep => {
|
||||
this.addContextDependency(dep);
|
||||
}, this);
|
||||
|
||||
if (!source) {
|
||||
return callback(new Error("Didn't get a result from child compiler"));
|
||||
}
|
||||
|
||||
let originalExports;
|
||||
|
||||
try {
|
||||
originalExports = (0, _utils.evalModuleCode)(this, source, request);
|
||||
} catch (e) {
|
||||
return callback(e);
|
||||
}
|
||||
|
||||
return handleExports(originalExports, compilation, assets, assetsInfo);
|
||||
});
|
||||
} // eslint-disable-next-line func-names
|
||||
|
||||
|
||||
function _default() {}
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"filename": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
},
|
||||
"chunkFilename": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
},
|
||||
"experimentalUseImportModule": {
|
||||
"description": "Enable the experimental importModule approach instead of using child compilers. This uses less memory and is faster.",
|
||||
"type": "boolean"
|
||||
},
|
||||
"ignoreOrder": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"insert": {
|
||||
"description": "Inserts `<link>` at the given position (https://github.com/webpack-contrib/mini-css-extract-plugin#insert).",
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
},
|
||||
"attributes": {
|
||||
"description": "Adds custom attributes to tag (https://github.com/webpack-contrib/mini-css-extract-plugin#attributes).",
|
||||
"type": "object"
|
||||
},
|
||||
"linkType": {
|
||||
"anyOf": [
|
||||
{
|
||||
"enum": ["text/css"]
|
||||
},
|
||||
{
|
||||
"type": "boolean"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.trueFn = trueFn;
|
||||
exports.findModuleById = findModuleById;
|
||||
exports.evalModuleCode = evalModuleCode;
|
||||
exports.compareModulesByIdentifier = compareModulesByIdentifier;
|
||||
exports.MODULE_TYPE = void 0;
|
||||
|
||||
var _module = _interopRequireDefault(require("module"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function trueFn() {
|
||||
return true;
|
||||
}
|
||||
|
||||
function findModuleById(compilation, id) {
|
||||
const {
|
||||
modules,
|
||||
chunkGraph
|
||||
} = compilation;
|
||||
|
||||
for (const module of modules) {
|
||||
const moduleId = typeof chunkGraph !== 'undefined' ? chunkGraph.getModuleId(module) : module.id;
|
||||
|
||||
if (moduleId === id) {
|
||||
return module;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function evalModuleCode(loaderContext, code, filename) {
|
||||
const module = new _module.default(filename, loaderContext);
|
||||
module.paths = _module.default._nodeModulePaths(loaderContext.context); // eslint-disable-line no-underscore-dangle
|
||||
|
||||
module.filename = filename;
|
||||
|
||||
module._compile(code, filename); // eslint-disable-line no-underscore-dangle
|
||||
|
||||
|
||||
return module.exports;
|
||||
}
|
||||
|
||||
function compareIds(a, b) {
|
||||
if (typeof a !== typeof b) {
|
||||
return typeof a < typeof b ? -1 : 1;
|
||||
}
|
||||
|
||||
if (a < b) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (a > b) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
function compareModulesByIdentifier(a, b) {
|
||||
return compareIds(a.identifier(), b.identifier());
|
||||
}
|
||||
|
||||
const MODULE_TYPE = 'css/mini-extract';
|
||||
exports.MODULE_TYPE = MODULE_TYPE;
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
Copyright JS Foundation and other contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
'Software'), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
Generated
Vendored
+290
@@ -0,0 +1,290 @@
|
||||
<div align="center">
|
||||
<a href="http://json-schema.org">
|
||||
<img width="160" height="160"
|
||||
src="https://raw.githubusercontent.com/webpack-contrib/schema-utils/master/.github/assets/logo.png">
|
||||
</a>
|
||||
<a href="https://github.com/webpack/webpack">
|
||||
<img width="200" height="200"
|
||||
src="https://webpack.js.org/assets/icon-square-big.svg">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
[![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]
|
||||
|
||||
# schema-utils
|
||||
|
||||
Package for validate options in loaders and plugins.
|
||||
|
||||
## Getting Started
|
||||
|
||||
To begin, you'll need to install `schema-utils`:
|
||||
|
||||
```console
|
||||
npm install schema-utils
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
**schema.json**
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"option": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
import schema from "./path/to/schema.json";
|
||||
import { validate } from "schema-utils";
|
||||
|
||||
const options = { option: true };
|
||||
const configuration = { name: "Loader Name/Plugin Name/Name" };
|
||||
|
||||
validate(schema, options, configuration);
|
||||
```
|
||||
|
||||
### `schema`
|
||||
|
||||
Type: `String`
|
||||
|
||||
JSON schema.
|
||||
|
||||
Simple example of schema:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"description": "This is description of option.",
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
}
|
||||
```
|
||||
|
||||
### `options`
|
||||
|
||||
Type: `Object`
|
||||
|
||||
Object with options.
|
||||
|
||||
```js
|
||||
import schema from "./path/to/schema.json";
|
||||
import { validate } from "schema-utils";
|
||||
|
||||
const options = { foo: "bar" };
|
||||
|
||||
validate(schema, { name: 123 }, { name: "MyPlugin" });
|
||||
```
|
||||
|
||||
### `configuration`
|
||||
|
||||
Allow to configure validator.
|
||||
|
||||
There is an alternative method to configure the `name` and`baseDataPath` options via the `title` property in the schema.
|
||||
For example:
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "My Loader options",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"description": "This is description of option.",
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
}
|
||||
```
|
||||
|
||||
The last word used for the `baseDataPath` option, other words used for the `name` option.
|
||||
Based on the example above the `name` option equals `My Loader`, the `baseDataPath` option equals `options`.
|
||||
|
||||
#### `name`
|
||||
|
||||
Type: `Object`
|
||||
Default: `"Object"`
|
||||
|
||||
Allow to setup name in validation errors.
|
||||
|
||||
```js
|
||||
import schema from "./path/to/schema.json";
|
||||
import { validate } from "schema-utils";
|
||||
|
||||
const options = { foo: "bar" };
|
||||
|
||||
validate(schema, options, { name: "MyPlugin" });
|
||||
```
|
||||
|
||||
```shell
|
||||
Invalid configuration object. MyPlugin has been initialised using a configuration object that does not match the API schema.
|
||||
- configuration.optionName should be a integer.
|
||||
```
|
||||
|
||||
#### `baseDataPath`
|
||||
|
||||
Type: `String`
|
||||
Default: `"configuration"`
|
||||
|
||||
Allow to setup base data path in validation errors.
|
||||
|
||||
```js
|
||||
import schema from "./path/to/schema.json";
|
||||
import { validate } from "schema-utils";
|
||||
|
||||
const options = { foo: "bar" };
|
||||
|
||||
validate(schema, options, { name: "MyPlugin", baseDataPath: "options" });
|
||||
```
|
||||
|
||||
```shell
|
||||
Invalid options object. MyPlugin has been initialised using an options object that does not match the API schema.
|
||||
- options.optionName should be a integer.
|
||||
```
|
||||
|
||||
#### `postFormatter`
|
||||
|
||||
Type: `Function`
|
||||
Default: `undefined`
|
||||
|
||||
Allow to reformat errors.
|
||||
|
||||
```js
|
||||
import schema from "./path/to/schema.json";
|
||||
import { validate } from "schema-utils";
|
||||
|
||||
const options = { foo: "bar" };
|
||||
|
||||
validate(schema, options, {
|
||||
name: "MyPlugin",
|
||||
postFormatter: (formattedError, error) => {
|
||||
if (error.keyword === "type") {
|
||||
return `${formattedError}\nAdditional Information.`;
|
||||
}
|
||||
|
||||
return formattedError;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
```shell
|
||||
Invalid options object. MyPlugin has been initialized using an options object that does not match the API schema.
|
||||
- options.optionName should be a integer.
|
||||
Additional Information.
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
**schema.json**
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string"
|
||||
},
|
||||
"test": {
|
||||
"anyOf": [
|
||||
{ "type": "array" },
|
||||
{ "type": "string" },
|
||||
{ "instanceof": "RegExp" }
|
||||
]
|
||||
},
|
||||
"transform": {
|
||||
"instanceof": "Function"
|
||||
},
|
||||
"sourceMap": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
}
|
||||
```
|
||||
|
||||
### `Loader`
|
||||
|
||||
```js
|
||||
import { getOptions } from "loader-utils";
|
||||
import { validate } from "schema-utils";
|
||||
|
||||
import schema from "path/to/schema.json";
|
||||
|
||||
function loader(src, map) {
|
||||
const options = getOptions(this);
|
||||
|
||||
validate(schema, options, {
|
||||
name: "Loader Name",
|
||||
baseDataPath: "options",
|
||||
});
|
||||
|
||||
// Code...
|
||||
}
|
||||
|
||||
export default loader;
|
||||
```
|
||||
|
||||
### `Plugin`
|
||||
|
||||
```js
|
||||
import { validate } from "schema-utils";
|
||||
|
||||
import schema from "path/to/schema.json";
|
||||
|
||||
class Plugin {
|
||||
constructor(options) {
|
||||
validate(schema, options, {
|
||||
name: "Plugin Name",
|
||||
baseDataPath: "options",
|
||||
});
|
||||
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
apply(compiler) {
|
||||
// Code...
|
||||
}
|
||||
}
|
||||
|
||||
export default Plugin;
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
Please take a moment to read our contributing guidelines if you haven't yet done so.
|
||||
|
||||
[CONTRIBUTING](./.github/CONTRIBUTING.md)
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE)
|
||||
|
||||
[npm]: https://img.shields.io/npm/v/schema-utils.svg
|
||||
[npm-url]: https://npmjs.com/package/schema-utils
|
||||
[node]: https://img.shields.io/node/v/schema-utils.svg
|
||||
[node-url]: https://nodejs.org
|
||||
[deps]: https://david-dm.org/webpack/schema-utils.svg
|
||||
[deps-url]: https://david-dm.org/webpack/schema-utils
|
||||
[tests]: https://github.com/webpack/schema-utils/workflows/schema-utils/badge.svg
|
||||
[tests-url]: https://github.com/webpack/schema-utils/actions
|
||||
[cover]: https://codecov.io/gh/webpack/schema-utils/branch/master/graph/badge.svg
|
||||
[cover-url]: https://codecov.io/gh/webpack/schema-utils
|
||||
[chat]: https://badges.gitter.im/webpack/webpack.svg
|
||||
[chat-url]: https://gitter.im/webpack/webpack
|
||||
[size]: https://packagephobia.com/badge?p=schema-utils
|
||||
[size-url]: https://packagephobia.com/result?p=schema-utils
|
||||
Generated
Vendored
+74
@@ -0,0 +1,74 @@
|
||||
export default ValidationError;
|
||||
export type JSONSchema6 = import("json-schema").JSONSchema6;
|
||||
export type JSONSchema7 = import("json-schema").JSONSchema7;
|
||||
export type Schema = import("./validate").Schema;
|
||||
export type ValidationErrorConfiguration =
|
||||
import("./validate").ValidationErrorConfiguration;
|
||||
export type PostFormatter = import("./validate").PostFormatter;
|
||||
export type SchemaUtilErrorObject = import("./validate").SchemaUtilErrorObject;
|
||||
declare class ValidationError extends Error {
|
||||
/**
|
||||
* @param {Array<SchemaUtilErrorObject>} errors
|
||||
* @param {Schema} schema
|
||||
* @param {ValidationErrorConfiguration} configuration
|
||||
*/
|
||||
constructor(
|
||||
errors: Array<SchemaUtilErrorObject>,
|
||||
schema: Schema,
|
||||
configuration?: ValidationErrorConfiguration
|
||||
);
|
||||
/** @type {Array<SchemaUtilErrorObject>} */
|
||||
errors: Array<SchemaUtilErrorObject>;
|
||||
/** @type {Schema} */
|
||||
schema: Schema;
|
||||
/** @type {string} */
|
||||
headerName: string;
|
||||
/** @type {string} */
|
||||
baseDataPath: string;
|
||||
/** @type {PostFormatter | null} */
|
||||
postFormatter: PostFormatter | null;
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {Schema}
|
||||
*/
|
||||
getSchemaPart(path: string): Schema;
|
||||
/**
|
||||
* @param {Schema} schema
|
||||
* @param {boolean} logic
|
||||
* @param {Array<Object>} prevSchemas
|
||||
* @returns {string}
|
||||
*/
|
||||
formatSchema(
|
||||
schema: Schema,
|
||||
logic?: boolean,
|
||||
prevSchemas?: Array<Object>
|
||||
): string;
|
||||
/**
|
||||
* @param {Schema=} schemaPart
|
||||
* @param {(boolean | Array<string>)=} additionalPath
|
||||
* @param {boolean=} needDot
|
||||
* @param {boolean=} logic
|
||||
* @returns {string}
|
||||
*/
|
||||
getSchemaPartText(
|
||||
schemaPart?: Schema | undefined,
|
||||
additionalPath?: (boolean | Array<string>) | undefined,
|
||||
needDot?: boolean | undefined,
|
||||
logic?: boolean | undefined
|
||||
): string;
|
||||
/**
|
||||
* @param {Schema=} schemaPart
|
||||
* @returns {string}
|
||||
*/
|
||||
getSchemaPartDescription(schemaPart?: Schema | undefined): string;
|
||||
/**
|
||||
* @param {SchemaUtilErrorObject} error
|
||||
* @returns {string}
|
||||
*/
|
||||
formatValidationError(error: SchemaUtilErrorObject): string;
|
||||
/**
|
||||
* @param {Array<SchemaUtilErrorObject>} errors
|
||||
* @returns {string}
|
||||
*/
|
||||
formatValidationErrors(errors: Array<SchemaUtilErrorObject>): string;
|
||||
}
|
||||
Generated
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
import { validate } from "./validate";
|
||||
import { ValidationError } from "./validate";
|
||||
export { validate, ValidationError };
|
||||
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
export default addAbsolutePathKeyword;
|
||||
export type Ajv = import("ajv").Ajv;
|
||||
export type ValidateFunction = import("ajv").ValidateFunction;
|
||||
export type SchemaUtilErrorObject = import("../validate").SchemaUtilErrorObject;
|
||||
/**
|
||||
*
|
||||
* @param {Ajv} ajv
|
||||
* @returns {Ajv}
|
||||
*/
|
||||
declare function addAbsolutePathKeyword(ajv: Ajv): Ajv;
|
||||
app/code/node_modules/mini-css-extract-plugin/node_modules/schema-utils/declarations/util/Range.d.ts
Generated
Vendored
+79
@@ -0,0 +1,79 @@
|
||||
export = Range;
|
||||
/**
|
||||
* @typedef {[number, boolean]} RangeValue
|
||||
*/
|
||||
/**
|
||||
* @callback RangeValueCallback
|
||||
* @param {RangeValue} rangeValue
|
||||
* @returns {boolean}
|
||||
*/
|
||||
declare class Range {
|
||||
/**
|
||||
* @param {"left" | "right"} side
|
||||
* @param {boolean} exclusive
|
||||
* @returns {">" | ">=" | "<" | "<="}
|
||||
*/
|
||||
static getOperator(
|
||||
side: "left" | "right",
|
||||
exclusive: boolean
|
||||
): ">" | ">=" | "<" | "<=";
|
||||
/**
|
||||
* @param {number} value
|
||||
* @param {boolean} logic is not logic applied
|
||||
* @param {boolean} exclusive is range exclusive
|
||||
* @returns {string}
|
||||
*/
|
||||
static formatRight(value: number, logic: boolean, exclusive: boolean): string;
|
||||
/**
|
||||
* @param {number} value
|
||||
* @param {boolean} logic is not logic applied
|
||||
* @param {boolean} exclusive is range exclusive
|
||||
* @returns {string}
|
||||
*/
|
||||
static formatLeft(value: number, logic: boolean, exclusive: boolean): string;
|
||||
/**
|
||||
* @param {number} start left side value
|
||||
* @param {number} end right side value
|
||||
* @param {boolean} startExclusive is range exclusive from left side
|
||||
* @param {boolean} endExclusive is range exclusive from right side
|
||||
* @param {boolean} logic is not logic applied
|
||||
* @returns {string}
|
||||
*/
|
||||
static formatRange(
|
||||
start: number,
|
||||
end: number,
|
||||
startExclusive: boolean,
|
||||
endExclusive: boolean,
|
||||
logic: boolean
|
||||
): string;
|
||||
/**
|
||||
* @param {Array<RangeValue>} values
|
||||
* @param {boolean} logic is not logic applied
|
||||
* @return {RangeValue} computed value and it's exclusive flag
|
||||
*/
|
||||
static getRangeValue(values: Array<RangeValue>, logic: boolean): RangeValue;
|
||||
/** @type {Array<RangeValue>} */
|
||||
_left: Array<RangeValue>;
|
||||
/** @type {Array<RangeValue>} */
|
||||
_right: Array<RangeValue>;
|
||||
/**
|
||||
* @param {number} value
|
||||
* @param {boolean=} exclusive
|
||||
*/
|
||||
left(value: number, exclusive?: boolean | undefined): void;
|
||||
/**
|
||||
* @param {number} value
|
||||
* @param {boolean=} exclusive
|
||||
*/
|
||||
right(value: number, exclusive?: boolean | undefined): void;
|
||||
/**
|
||||
* @param {boolean} logic is not logic applied
|
||||
* @return {string} "smart" range string representation
|
||||
*/
|
||||
format(logic?: boolean): string;
|
||||
}
|
||||
declare namespace Range {
|
||||
export { RangeValue, RangeValueCallback };
|
||||
}
|
||||
type RangeValue = [number, boolean];
|
||||
type RangeValueCallback = (rangeValue: RangeValue) => boolean;
|
||||
app/code/node_modules/mini-css-extract-plugin/node_modules/schema-utils/declarations/util/hints.d.ts
Generated
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
export function stringHints(schema: Schema, logic: boolean): string[];
|
||||
export function numberHints(schema: Schema, logic: boolean): string[];
|
||||
export type Schema = import("../validate").Schema;
|
||||
Generated
Vendored
+37
@@ -0,0 +1,37 @@
|
||||
export type JSONSchema4 = import("json-schema").JSONSchema4;
|
||||
export type JSONSchema6 = import("json-schema").JSONSchema6;
|
||||
export type JSONSchema7 = import("json-schema").JSONSchema7;
|
||||
export type ErrorObject = import("ajv").ErrorObject;
|
||||
export type Extend = {
|
||||
formatMinimum?: number | undefined;
|
||||
formatMaximum?: number | undefined;
|
||||
formatExclusiveMinimum?: boolean | undefined;
|
||||
formatExclusiveMaximum?: boolean | undefined;
|
||||
link?: string | undefined;
|
||||
};
|
||||
export type Schema = (JSONSchema4 | JSONSchema6 | JSONSchema7) & Extend;
|
||||
export type SchemaUtilErrorObject = ErrorObject & {
|
||||
children?: Array<ErrorObject>;
|
||||
};
|
||||
export type PostFormatter = (
|
||||
formattedError: string,
|
||||
error: SchemaUtilErrorObject
|
||||
) => string;
|
||||
export type ValidationErrorConfiguration = {
|
||||
name?: string | undefined;
|
||||
baseDataPath?: string | undefined;
|
||||
postFormatter?: PostFormatter | undefined;
|
||||
};
|
||||
/**
|
||||
* @param {Schema} schema
|
||||
* @param {Array<object> | object} options
|
||||
* @param {ValidationErrorConfiguration=} configuration
|
||||
* @returns {void}
|
||||
*/
|
||||
export function validate(
|
||||
schema: Schema,
|
||||
options: Array<object> | object,
|
||||
configuration?: ValidationErrorConfiguration | undefined
|
||||
): void;
|
||||
import ValidationError from "./ValidationError";
|
||||
export { ValidationError };
|
||||
Generated
Vendored
+1271
File diff suppressed because it is too large
Load Diff
Generated
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
"use strict";
|
||||
|
||||
const {
|
||||
validate,
|
||||
ValidationError
|
||||
} = require("./validate");
|
||||
|
||||
module.exports = {
|
||||
validate,
|
||||
ValidationError
|
||||
};
|
||||
Generated
Vendored
+93
@@ -0,0 +1,93 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
/** @typedef {import("ajv").Ajv} Ajv */
|
||||
|
||||
/** @typedef {import("ajv").ValidateFunction} ValidateFunction */
|
||||
|
||||
/** @typedef {import("../validate").SchemaUtilErrorObject} SchemaUtilErrorObject */
|
||||
|
||||
/**
|
||||
* @param {string} message
|
||||
* @param {object} schema
|
||||
* @param {string} data
|
||||
* @returns {SchemaUtilErrorObject}
|
||||
*/
|
||||
function errorMessage(message, schema, data) {
|
||||
return {
|
||||
// @ts-ignore
|
||||
// eslint-disable-next-line no-undefined
|
||||
dataPath: undefined,
|
||||
// @ts-ignore
|
||||
// eslint-disable-next-line no-undefined
|
||||
schemaPath: undefined,
|
||||
keyword: "absolutePath",
|
||||
params: {
|
||||
absolutePath: data
|
||||
},
|
||||
message,
|
||||
parentSchema: schema
|
||||
};
|
||||
}
|
||||
/**
|
||||
* @param {boolean} shouldBeAbsolute
|
||||
* @param {object} schema
|
||||
* @param {string} data
|
||||
* @returns {SchemaUtilErrorObject}
|
||||
*/
|
||||
|
||||
|
||||
function getErrorFor(shouldBeAbsolute, schema, data) {
|
||||
const message = shouldBeAbsolute ? `The provided value ${JSON.stringify(data)} is not an absolute path!` : `A relative path is expected. However, the provided value ${JSON.stringify(data)} is an absolute path!`;
|
||||
return errorMessage(message, schema, data);
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @param {Ajv} ajv
|
||||
* @returns {Ajv}
|
||||
*/
|
||||
|
||||
|
||||
function addAbsolutePathKeyword(ajv) {
|
||||
ajv.addKeyword("absolutePath", {
|
||||
errors: true,
|
||||
type: "string",
|
||||
|
||||
compile(schema, parentSchema) {
|
||||
/** @type {ValidateFunction} */
|
||||
const callback = data => {
|
||||
let passes = true;
|
||||
const isExclamationMarkPresent = data.includes("!");
|
||||
|
||||
if (isExclamationMarkPresent) {
|
||||
callback.errors = [errorMessage(`The provided value ${JSON.stringify(data)} contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.`, parentSchema, data)];
|
||||
passes = false;
|
||||
} // ?:[A-Za-z]:\\ - Windows absolute path
|
||||
// \\\\ - Windows network absolute path
|
||||
// \/ - Unix-like OS absolute path
|
||||
|
||||
|
||||
const isCorrectAbsolutePath = schema === /^(?:[A-Za-z]:(\\|\/)|\\\\|\/)/.test(data);
|
||||
|
||||
if (!isCorrectAbsolutePath) {
|
||||
callback.errors = [getErrorFor(schema, parentSchema, data)];
|
||||
passes = false;
|
||||
}
|
||||
|
||||
return passes;
|
||||
};
|
||||
|
||||
callback.errors = [];
|
||||
return callback;
|
||||
}
|
||||
|
||||
});
|
||||
return ajv;
|
||||
}
|
||||
|
||||
var _default = addAbsolutePathKeyword;
|
||||
exports.default = _default;
|
||||
Generated
Vendored
+163
@@ -0,0 +1,163 @@
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* @typedef {[number, boolean]} RangeValue
|
||||
*/
|
||||
|
||||
/**
|
||||
* @callback RangeValueCallback
|
||||
* @param {RangeValue} rangeValue
|
||||
* @returns {boolean}
|
||||
*/
|
||||
class Range {
|
||||
/**
|
||||
* @param {"left" | "right"} side
|
||||
* @param {boolean} exclusive
|
||||
* @returns {">" | ">=" | "<" | "<="}
|
||||
*/
|
||||
static getOperator(side, exclusive) {
|
||||
if (side === "left") {
|
||||
return exclusive ? ">" : ">=";
|
||||
}
|
||||
|
||||
return exclusive ? "<" : "<=";
|
||||
}
|
||||
/**
|
||||
* @param {number} value
|
||||
* @param {boolean} logic is not logic applied
|
||||
* @param {boolean} exclusive is range exclusive
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
|
||||
static formatRight(value, logic, exclusive) {
|
||||
if (logic === false) {
|
||||
return Range.formatLeft(value, !logic, !exclusive);
|
||||
}
|
||||
|
||||
return `should be ${Range.getOperator("right", exclusive)} ${value}`;
|
||||
}
|
||||
/**
|
||||
* @param {number} value
|
||||
* @param {boolean} logic is not logic applied
|
||||
* @param {boolean} exclusive is range exclusive
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
|
||||
static formatLeft(value, logic, exclusive) {
|
||||
if (logic === false) {
|
||||
return Range.formatRight(value, !logic, !exclusive);
|
||||
}
|
||||
|
||||
return `should be ${Range.getOperator("left", exclusive)} ${value}`;
|
||||
}
|
||||
/**
|
||||
* @param {number} start left side value
|
||||
* @param {number} end right side value
|
||||
* @param {boolean} startExclusive is range exclusive from left side
|
||||
* @param {boolean} endExclusive is range exclusive from right side
|
||||
* @param {boolean} logic is not logic applied
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
|
||||
static formatRange(start, end, startExclusive, endExclusive, logic) {
|
||||
let result = "should be";
|
||||
result += ` ${Range.getOperator(logic ? "left" : "right", logic ? startExclusive : !startExclusive)} ${start} `;
|
||||
result += logic ? "and" : "or";
|
||||
result += ` ${Range.getOperator(logic ? "right" : "left", logic ? endExclusive : !endExclusive)} ${end}`;
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* @param {Array<RangeValue>} values
|
||||
* @param {boolean} logic is not logic applied
|
||||
* @return {RangeValue} computed value and it's exclusive flag
|
||||
*/
|
||||
|
||||
|
||||
static getRangeValue(values, logic) {
|
||||
let minMax = logic ? Infinity : -Infinity;
|
||||
let j = -1;
|
||||
const predicate = logic ?
|
||||
/** @type {RangeValueCallback} */
|
||||
([value]) => value <= minMax :
|
||||
/** @type {RangeValueCallback} */
|
||||
([value]) => value >= minMax;
|
||||
|
||||
for (let i = 0; i < values.length; i++) {
|
||||
if (predicate(values[i])) {
|
||||
[minMax] = values[i];
|
||||
j = i;
|
||||
}
|
||||
}
|
||||
|
||||
if (j > -1) {
|
||||
return values[j];
|
||||
}
|
||||
|
||||
return [Infinity, true];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
/** @type {Array<RangeValue>} */
|
||||
this._left = [];
|
||||
/** @type {Array<RangeValue>} */
|
||||
|
||||
this._right = [];
|
||||
}
|
||||
/**
|
||||
* @param {number} value
|
||||
* @param {boolean=} exclusive
|
||||
*/
|
||||
|
||||
|
||||
left(value, exclusive = false) {
|
||||
this._left.push([value, exclusive]);
|
||||
}
|
||||
/**
|
||||
* @param {number} value
|
||||
* @param {boolean=} exclusive
|
||||
*/
|
||||
|
||||
|
||||
right(value, exclusive = false) {
|
||||
this._right.push([value, exclusive]);
|
||||
}
|
||||
/**
|
||||
* @param {boolean} logic is not logic applied
|
||||
* @return {string} "smart" range string representation
|
||||
*/
|
||||
|
||||
|
||||
format(logic = true) {
|
||||
const [start, leftExclusive] = Range.getRangeValue(this._left, logic);
|
||||
const [end, rightExclusive] = Range.getRangeValue(this._right, !logic);
|
||||
|
||||
if (!Number.isFinite(start) && !Number.isFinite(end)) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const realStart = leftExclusive ? start + 1 : start;
|
||||
const realEnd = rightExclusive ? end - 1 : end; // e.g. 5 < x < 7, 5 < x <= 6, 6 <= x <= 6
|
||||
|
||||
if (realStart === realEnd) {
|
||||
return `should be ${logic ? "" : "!"}= ${realStart}`;
|
||||
} // e.g. 4 < x < ∞
|
||||
|
||||
|
||||
if (Number.isFinite(start) && !Number.isFinite(end)) {
|
||||
return Range.formatLeft(start, logic, leftExclusive);
|
||||
} // e.g. ∞ < x < 4
|
||||
|
||||
|
||||
if (!Number.isFinite(start) && Number.isFinite(end)) {
|
||||
return Range.formatRight(end, logic, rightExclusive);
|
||||
}
|
||||
|
||||
return Range.formatRange(start, end, leftExclusive, rightExclusive, logic);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
module.exports = Range;
|
||||
Generated
Vendored
+105
@@ -0,0 +1,105 @@
|
||||
"use strict";
|
||||
|
||||
const Range = require("./Range");
|
||||
/** @typedef {import("../validate").Schema} Schema */
|
||||
|
||||
/**
|
||||
* @param {Schema} schema
|
||||
* @param {boolean} logic
|
||||
* @return {string[]}
|
||||
*/
|
||||
|
||||
|
||||
module.exports.stringHints = function stringHints(schema, logic) {
|
||||
const hints = [];
|
||||
let type = "string";
|
||||
const currentSchema = { ...schema
|
||||
};
|
||||
|
||||
if (!logic) {
|
||||
const tmpLength = currentSchema.minLength;
|
||||
const tmpFormat = currentSchema.formatMinimum;
|
||||
const tmpExclusive = currentSchema.formatExclusiveMaximum;
|
||||
currentSchema.minLength = currentSchema.maxLength;
|
||||
currentSchema.maxLength = tmpLength;
|
||||
currentSchema.formatMinimum = currentSchema.formatMaximum;
|
||||
currentSchema.formatMaximum = tmpFormat;
|
||||
currentSchema.formatExclusiveMaximum = !currentSchema.formatExclusiveMinimum;
|
||||
currentSchema.formatExclusiveMinimum = !tmpExclusive;
|
||||
}
|
||||
|
||||
if (typeof currentSchema.minLength === "number") {
|
||||
if (currentSchema.minLength === 1) {
|
||||
type = "non-empty string";
|
||||
} else {
|
||||
const length = Math.max(currentSchema.minLength - 1, 0);
|
||||
hints.push(`should be longer than ${length} character${length > 1 ? "s" : ""}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof currentSchema.maxLength === "number") {
|
||||
if (currentSchema.maxLength === 0) {
|
||||
type = "empty string";
|
||||
} else {
|
||||
const length = currentSchema.maxLength + 1;
|
||||
hints.push(`should be shorter than ${length} character${length > 1 ? "s" : ""}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (currentSchema.pattern) {
|
||||
hints.push(`should${logic ? "" : " not"} match pattern ${JSON.stringify(currentSchema.pattern)}`);
|
||||
}
|
||||
|
||||
if (currentSchema.format) {
|
||||
hints.push(`should${logic ? "" : " not"} match format ${JSON.stringify(currentSchema.format)}`);
|
||||
}
|
||||
|
||||
if (currentSchema.formatMinimum) {
|
||||
hints.push(`should be ${currentSchema.formatExclusiveMinimum ? ">" : ">="} ${JSON.stringify(currentSchema.formatMinimum)}`);
|
||||
}
|
||||
|
||||
if (currentSchema.formatMaximum) {
|
||||
hints.push(`should be ${currentSchema.formatExclusiveMaximum ? "<" : "<="} ${JSON.stringify(currentSchema.formatMaximum)}`);
|
||||
}
|
||||
|
||||
return [type].concat(hints);
|
||||
};
|
||||
/**
|
||||
* @param {Schema} schema
|
||||
* @param {boolean} logic
|
||||
* @return {string[]}
|
||||
*/
|
||||
|
||||
|
||||
module.exports.numberHints = function numberHints(schema, logic) {
|
||||
const hints = [schema.type === "integer" ? "integer" : "number"];
|
||||
const range = new Range();
|
||||
|
||||
if (typeof schema.minimum === "number") {
|
||||
range.left(schema.minimum);
|
||||
}
|
||||
|
||||
if (typeof schema.exclusiveMinimum === "number") {
|
||||
range.left(schema.exclusiveMinimum, true);
|
||||
}
|
||||
|
||||
if (typeof schema.maximum === "number") {
|
||||
range.right(schema.maximum);
|
||||
}
|
||||
|
||||
if (typeof schema.exclusiveMaximum === "number") {
|
||||
range.right(schema.exclusiveMaximum, true);
|
||||
}
|
||||
|
||||
const rangeFormat = range.format(logic);
|
||||
|
||||
if (rangeFormat) {
|
||||
hints.push(rangeFormat);
|
||||
}
|
||||
|
||||
if (typeof schema.multipleOf === "number") {
|
||||
hints.push(`should${logic ? "" : " not"} be multiple of ${schema.multipleOf}`);
|
||||
}
|
||||
|
||||
return hints;
|
||||
};
|
||||
Generated
Vendored
+163
@@ -0,0 +1,163 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.validate = validate;
|
||||
Object.defineProperty(exports, "ValidationError", {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _ValidationError.default;
|
||||
}
|
||||
});
|
||||
|
||||
var _absolutePath = _interopRequireDefault(require("./keywords/absolutePath"));
|
||||
|
||||
var _ValidationError = _interopRequireDefault(require("./ValidationError"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
// Use CommonJS require for ajv libs so TypeScript consumers aren't locked into esModuleInterop (see #110).
|
||||
const Ajv = require("ajv");
|
||||
|
||||
const ajvKeywords = require("ajv-keywords");
|
||||
/** @typedef {import("json-schema").JSONSchema4} JSONSchema4 */
|
||||
|
||||
/** @typedef {import("json-schema").JSONSchema6} JSONSchema6 */
|
||||
|
||||
/** @typedef {import("json-schema").JSONSchema7} JSONSchema7 */
|
||||
|
||||
/** @typedef {import("ajv").ErrorObject} ErrorObject */
|
||||
|
||||
/**
|
||||
* @typedef {Object} Extend
|
||||
* @property {number=} formatMinimum
|
||||
* @property {number=} formatMaximum
|
||||
* @property {boolean=} formatExclusiveMinimum
|
||||
* @property {boolean=} formatExclusiveMaximum
|
||||
* @property {string=} link
|
||||
*/
|
||||
|
||||
/** @typedef {(JSONSchema4 | JSONSchema6 | JSONSchema7) & Extend} Schema */
|
||||
|
||||
/** @typedef {ErrorObject & { children?: Array<ErrorObject>}} SchemaUtilErrorObject */
|
||||
|
||||
/**
|
||||
* @callback PostFormatter
|
||||
* @param {string} formattedError
|
||||
* @param {SchemaUtilErrorObject} error
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} ValidationErrorConfiguration
|
||||
* @property {string=} name
|
||||
* @property {string=} baseDataPath
|
||||
* @property {PostFormatter=} postFormatter
|
||||
*/
|
||||
|
||||
|
||||
const ajv = new Ajv({
|
||||
allErrors: true,
|
||||
verbose: true,
|
||||
$data: true
|
||||
});
|
||||
ajvKeywords(ajv, ["instanceof", "formatMinimum", "formatMaximum", "patternRequired"]); // Custom keywords
|
||||
|
||||
(0, _absolutePath.default)(ajv);
|
||||
/**
|
||||
* @param {Schema} schema
|
||||
* @param {Array<object> | object} options
|
||||
* @param {ValidationErrorConfiguration=} configuration
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
function validate(schema, options, configuration) {
|
||||
let errors = [];
|
||||
|
||||
if (Array.isArray(options)) {
|
||||
errors = Array.from(options, nestedOptions => validateObject(schema, nestedOptions));
|
||||
errors.forEach((list, idx) => {
|
||||
const applyPrefix =
|
||||
/**
|
||||
* @param {SchemaUtilErrorObject} error
|
||||
*/
|
||||
error => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
error.dataPath = `[${idx}]${error.dataPath}`;
|
||||
|
||||
if (error.children) {
|
||||
error.children.forEach(applyPrefix);
|
||||
}
|
||||
};
|
||||
|
||||
list.forEach(applyPrefix);
|
||||
});
|
||||
errors = errors.reduce((arr, items) => {
|
||||
arr.push(...items);
|
||||
return arr;
|
||||
}, []);
|
||||
} else {
|
||||
errors = validateObject(schema, options);
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
throw new _ValidationError.default(errors, schema, configuration);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @param {Schema} schema
|
||||
* @param {Array<object> | object} options
|
||||
* @returns {Array<SchemaUtilErrorObject>}
|
||||
*/
|
||||
|
||||
|
||||
function validateObject(schema, options) {
|
||||
const compiledSchema = ajv.compile(schema);
|
||||
const valid = compiledSchema(options);
|
||||
if (valid) return [];
|
||||
return compiledSchema.errors ? filterErrors(compiledSchema.errors) : [];
|
||||
}
|
||||
/**
|
||||
* @param {Array<ErrorObject>} errors
|
||||
* @returns {Array<SchemaUtilErrorObject>}
|
||||
*/
|
||||
|
||||
|
||||
function filterErrors(errors) {
|
||||
/** @type {Array<SchemaUtilErrorObject>} */
|
||||
let newErrors = [];
|
||||
|
||||
for (const error of
|
||||
/** @type {Array<SchemaUtilErrorObject>} */
|
||||
errors) {
|
||||
const {
|
||||
dataPath
|
||||
} = error;
|
||||
/** @type {Array<SchemaUtilErrorObject>} */
|
||||
|
||||
let children = [];
|
||||
newErrors = newErrors.filter(oldError => {
|
||||
if (oldError.dataPath.includes(dataPath)) {
|
||||
if (oldError.children) {
|
||||
children = children.concat(oldError.children.slice(0));
|
||||
} // eslint-disable-next-line no-undefined, no-param-reassign
|
||||
|
||||
|
||||
oldError.children = undefined;
|
||||
children.push(oldError);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
if (children.length) {
|
||||
error.children = children;
|
||||
}
|
||||
|
||||
newErrors.push(error);
|
||||
}
|
||||
|
||||
return newErrors;
|
||||
}
|
||||
Generated
Vendored
+78
@@ -0,0 +1,78 @@
|
||||
{
|
||||
"name": "schema-utils",
|
||||
"version": "3.1.1",
|
||||
"description": "webpack Validation Utils",
|
||||
"license": "MIT",
|
||||
"repository": "webpack/schema-utils",
|
||||
"author": "webpack Contrib (https://github.com/webpack-contrib)",
|
||||
"homepage": "https://github.com/webpack/schema-utils",
|
||||
"bugs": "https://github.com/webpack/schema-utils/issues",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"types": "declarations/index.d.ts",
|
||||
"engines": {
|
||||
"node": ">= 10.13.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npm run build -- -w",
|
||||
"clean": "del-cli dist declarations",
|
||||
"prebuild": "npm run clean",
|
||||
"build:types": "tsc --declaration --emitDeclarationOnly --outDir declarations && prettier \"declarations/**/*.ts\" --write",
|
||||
"build:code": "cross-env NODE_ENV=production babel src -d dist --copy-files",
|
||||
"build": "npm-run-all -p \"build:**\"",
|
||||
"commitlint": "commitlint --from=master",
|
||||
"security": "npm audit --production",
|
||||
"fmt:check": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
|
||||
"lint:js": "eslint --cache .",
|
||||
"lint:types": "tsc --pretty --noEmit",
|
||||
"lint": "npm-run-all lint:js lint:types fmt:check",
|
||||
"fmt": "npm run fmt:check -- --write",
|
||||
"fix:js": "npm run lint:js -- --fix",
|
||||
"fix": "npm-run-all fix:js fmt",
|
||||
"test:only": "cross-env NODE_ENV=test jest",
|
||||
"test:watch": "npm run test:only -- --watch",
|
||||
"test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
|
||||
"pretest": "npm run lint",
|
||||
"test": "npm run test:coverage",
|
||||
"prepare": "npm run build && husky install",
|
||||
"release": "standard-version"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"declarations"
|
||||
],
|
||||
"dependencies": {
|
||||
"@types/json-schema": "^7.0.8",
|
||||
"ajv": "^6.12.5",
|
||||
"ajv-keywords": "^3.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.14.3",
|
||||
"@babel/core": "^7.14.6",
|
||||
"@babel/preset-env": "^7.14.7",
|
||||
"@commitlint/cli": "^12.1.4",
|
||||
"@commitlint/config-conventional": "^12.1.4",
|
||||
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
|
||||
"babel-jest": "^27.0.6",
|
||||
"cross-env": "^7.0.3",
|
||||
"del": "^6.0.0",
|
||||
"del-cli": "^3.0.1",
|
||||
"eslint": "^7.31.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-import": "^2.23.4",
|
||||
"husky": "^6.0.0",
|
||||
"jest": "^27.0.6",
|
||||
"lint-staged": "^11.0.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.3.2",
|
||||
"standard-version": "^9.3.1",
|
||||
"typescript": "^4.3.5",
|
||||
"webpack": "^5.45.1"
|
||||
},
|
||||
"keywords": [
|
||||
"webpack"
|
||||
]
|
||||
}
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
{
|
||||
"name": "mini-css-extract-plugin",
|
||||
"version": "1.6.2",
|
||||
"description": "extracts CSS into separate files",
|
||||
"license": "MIT",
|
||||
"repository": "webpack-contrib/mini-css-extract-plugin",
|
||||
"author": "Tobias Koppers @sokra",
|
||||
"homepage": "https://github.com/webpack-contrib/mini-css-extract-plugin",
|
||||
"bugs": "https://github.com/webpack-contrib/mini-css-extract-plugin/issues",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"main": "dist/cjs.js",
|
||||
"engines": {
|
||||
"node": ">= 10.13.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npm run build -- -w",
|
||||
"prebuild": "npm run clean",
|
||||
"build": "cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files",
|
||||
"postbuild": "es-check es5 dist/hmr/hotModuleReplacement.js",
|
||||
"clean": "del-cli dist",
|
||||
"commitlint": "commitlint --from=master",
|
||||
"lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
|
||||
"lint:js": "eslint --cache .",
|
||||
"lint": "npm-run-all -l -p \"lint:**\"",
|
||||
"prepare": "husky install && npm run build",
|
||||
"release": "standard-version",
|
||||
"security": "npm audit --production",
|
||||
"test:only": "cross-env NODE_ENV=test jest",
|
||||
"test:watch": "npm run test:only -- --watch",
|
||||
"test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
|
||||
"test:manual": "npm run build && webpack serve ./test/manual/src/index.js --open --config ./test/manual/webpack.config.js",
|
||||
"pretest": "npm run lint",
|
||||
"test": "cross-env NODE_ENV=test npm run test:coverage"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.4.0 || ^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"loader-utils": "^2.0.0",
|
||||
"schema-utils": "^3.0.0",
|
||||
"webpack-sources": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.14.5",
|
||||
"@babel/core": "^7.14.6",
|
||||
"@babel/preset-env": "^7.14.5",
|
||||
"@commitlint/cli": "^12.1.4",
|
||||
"@commitlint/config-conventional": "^12.1.4",
|
||||
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-jest": "^27.0.2",
|
||||
"bootstrap": "^4.6.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^5.2.6",
|
||||
"del": "^6.0.0",
|
||||
"del-cli": "^3.0.1",
|
||||
"es-check": "5.2.3",
|
||||
"eslint": "^7.28.0",
|
||||
"eslint-config-prettier": "^8.1.0",
|
||||
"eslint-plugin-import": "^2.23.4",
|
||||
"file-loader": "^6.2.0",
|
||||
"husky": "^5.2.0",
|
||||
"jest": "^27.0.4",
|
||||
"jsdom": "^16.5.1",
|
||||
"lint-staged": "^10.5.4",
|
||||
"memfs": "^3.0.2",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.3.1",
|
||||
"standard-version": "^9.1.0",
|
||||
"webpack": "^5.40.0",
|
||||
"webpack-cli": "^4.7.2",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
},
|
||||
"keywords": [
|
||||
"webpack",
|
||||
"css",
|
||||
"extract",
|
||||
"hmr"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user