mini-css-extract-plugin
Advanced tools
mini-css-extract-plugin - npm Package Compare versions
Comparing version 2.2.2 to 2.3.0
@@ -309,3 +309,4 @@ "use strict"; | ||
| ignoreOrder: false, | ||
| experimentalUseImportModule: false | ||
| experimentalUseImportModule: false, | ||
| runtime: true | ||
| }, options); | ||
@@ -472,8 +473,12 @@ this.runtimeOptions = { | ||
| } | ||
| }); | ||
| }); // All the code below is dedicated to the runtime and can be skipped when the `runtime` option is `false` | ||
| if (!this.options.runtime) { | ||
| return; | ||
| } | ||
| const { | ||
| Template | ||
| } = webpack; | ||
| const { | ||
| Template, | ||
| RuntimeGlobals, | ||
| RuntimeModule, | ||
| runtime | ||
@@ -502,6 +507,2 @@ } = webpack; // eslint-disable-next-line no-shadow | ||
| const { | ||
| RuntimeModule | ||
| } = webpack; | ||
| class CssLoadingRuntimeModule extends RuntimeModule { | ||
@@ -730,3 +731,2 @@ constructor(runtimeRequirements, runtimeOptions) { | ||
| content = content.replace(new RegExp(_utils.SINGLE_DOT_PATH_SEGMENT, "g"), "."); | ||
| content = content.replace(new RegExp(_utils.DOUBLE_DOT_PATH_SEGMENT, "g"), ".."); | ||
| content = content.replace(new RegExp(_utils.AUTO_PUBLIC_PATH, "g"), undoPath); | ||
@@ -733,0 +733,0 @@ |
@@ -174,3 +174,3 @@ "use strict"; | ||
| const isAbsolutePublicPath = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/.test(publicPath); | ||
| const publicPathForExtract = isAbsolutePublicPath ? publicPath : `${_utils.ABSOLUTE_PUBLIC_PATH}${publicPath.replace(/\./g, _utils.SINGLE_DOT_PATH_SEGMENT).replace(/\.\./g, _utils.DOUBLE_DOT_PATH_SEGMENT)}`; | ||
| const publicPathForExtract = isAbsolutePublicPath ? publicPath : `${_utils.ABSOLUTE_PUBLIC_PATH}${publicPath.replace(/\./g, _utils.SINGLE_DOT_PATH_SEGMENT)}`; | ||
| this.importModule(`${this.resourcePath}.webpack[javascript/auto]!=!${request}`, { | ||
@@ -177,0 +177,0 @@ layer: options.layer, |
@@ -41,3 +41,3 @@ { | ||
| "insert": { | ||
| "description": "Inserts `<link>` at the given position.", | ||
| "description": "Inserts the `link` tag at the given position for non-initial (async) (https://webpack.js.org/concepts/under-the-hood/#chunks) CSS chunks.", | ||
| "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#insert", | ||
@@ -54,3 +54,3 @@ "anyOf": [ | ||
| "attributes": { | ||
| "description": "Adds custom attributes to tag.", | ||
| "description": "Adds custom attributes to the `link` tag for non-initial (async) (https://webpack.js.org/concepts/under-the-hood/#chunks) CSS chunks.", | ||
| "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#attributes", | ||
@@ -70,4 +70,9 @@ "type": "object" | ||
| "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#linktype" | ||
| }, | ||
| "runtime": { | ||
| "type": "boolean", | ||
| "description": "Enabled/Disables runtime generation. CSS will be still extracted and can be used for a custom loading methods.", | ||
| "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#noRuntime" | ||
| } | ||
| } | ||
| } |
@@ -11,3 +11,3 @@ "use strict"; | ||
| exports.stringifyRequest = stringifyRequest; | ||
| exports.DOUBLE_DOT_PATH_SEGMENT = exports.SINGLE_DOT_PATH_SEGMENT = exports.ABSOLUTE_PUBLIC_PATH = exports.AUTO_PUBLIC_PATH = exports.MODULE_TYPE = void 0; | ||
| exports.SINGLE_DOT_PATH_SEGMENT = exports.ABSOLUTE_PUBLIC_PATH = exports.AUTO_PUBLIC_PATH = exports.MODULE_TYPE = void 0; | ||
@@ -81,4 +81,2 @@ var _module = _interopRequireDefault(require("module")); | ||
| exports.SINGLE_DOT_PATH_SEGMENT = SINGLE_DOT_PATH_SEGMENT; | ||
| const DOUBLE_DOT_PATH_SEGMENT = "__mini_css_extract_plugin_double_dot_path_segment__"; | ||
| exports.DOUBLE_DOT_PATH_SEGMENT = DOUBLE_DOT_PATH_SEGMENT; | ||
@@ -85,0 +83,0 @@ function isAbsolutePath(str) { |
| { | ||
| "name": "mini-css-extract-plugin", | ||
| "version": "2.2.2", | ||
| "version": "2.3.0", | ||
| "description": "extracts CSS into separate files", | ||
@@ -74,2 +74,4 @@ "license": "MIT", | ||
| "prettier": "^2.3.2", | ||
| "sass": "^1.39.0", | ||
| "sass-loader": "^12.1.0", | ||
| "standard-version": "^9.3.0", | ||
@@ -76,0 +78,0 @@ "webpack": "^5.48.0", |
240
README.md
@@ -74,2 +74,6 @@ <div align="center"> | ||
| > ⚠️ Note that if you import CSS from your webpack entrypoint or import styles in the [initial](https://webpack.js.org/concepts/under-the-hood/#chunks) chunk, `mini-css-extract-plugin` will not load this CSS into the page. Please use [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) for automatic generation `link` tags or create `index.html` file with `link` tag. | ||
| > ⚠️ Source maps works only for `source-map`/`nosources-source-map`/`hidden-nosources-source-map`/`hidden-source-map` values because CSS only supports source maps with the `sourceMappingURL` comment (i.e. `//# sourceMappingURL=style.css.map`). If you need set `devtool` to another value you can enable source maps generation for extracted CSS using [`sourceMap: true`](https://github.com/webpack-contrib/css-loader#sourcemap) for `css-loader`. | ||
| ## Options | ||
@@ -79,11 +83,12 @@ | ||
| | 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 | | ||
| | 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 the `link` tag at the given position for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) CSS chunks | | ||
| | **[`attributes`](#attributes)** | `{Object}` | `{}` | Adds custom attributes to the `link` tag for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) CSS chunks | | ||
| | **[`linkType`](#linkType)** | `{String\|Boolean}` | `text/css` | Allows loading asynchronous chunks with a custom link type | | ||
| | **[`runtime`](#runtime)** | `{Boolean}` | `true` | Allows to enable/disable the runtime generation | | ||
| | **[`experimentalUseImportModule`](#experimentalUseImportModule)** | `{Boolean}` | `false` | Use an experimental webpack API to execute modules instead of child compilers | | ||
@@ -123,2 +128,4 @@ #### `filename` | ||
| > ⚠️ Only for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) chunks. | ||
| By default, the `mini-css-extract-plugin` appends styles (`<link>` elements) to `document.head` of the current `window`. | ||
@@ -175,2 +182,4 @@ | ||
| > ⚠️ Only for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) chunks. | ||
| If defined, the `mini-css-extract-plugin` will attach given attributes with their values on `<link>` element. | ||
@@ -264,2 +273,35 @@ | ||
| #### `runtime` | ||
| Type: `Boolean` | ||
| Default: `true` | ||
| Allows to enable/disable the runtime generation. | ||
| CSS will be still extracted and can be used for a custom loading methods. | ||
| For example, you can use [assets-webpack-plugin](https://github.com/ztoben/assets-webpack-plugin) to retreive them then use your own runtime code to download assets when needed. | ||
| `true` to skip. | ||
| **webpack.config.js** | ||
| ```js | ||
| const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | ||
| module.exports = { | ||
| plugins: [ | ||
| new MiniCssExtractPlugin({ | ||
| runtime: false, | ||
| }), | ||
| ], | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.css$/i, | ||
| use: [MiniCssExtractPlugin.loader, "css-loader"], | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
| ``` | ||
| #### `experimentalUseImportModule` | ||
@@ -761,4 +803,2 @@ | ||
| type: "css/mini-extract", | ||
| // For webpack@4 | ||
| // test: /\.css$/, | ||
| chunks: "all", | ||
@@ -798,20 +838,2 @@ enforce: true, | ||
| 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 = { | ||
@@ -826,15 +848,15 @@ entry: { | ||
| fooStyles: { | ||
| type: "css/mini-extract", | ||
| name: "styles_foo", | ||
| test: (m, c, entry = "foo") => | ||
| m.constructor.name === "CssModule" && | ||
| recursiveIssuer(m, c) === entry, | ||
| chunks: "all", | ||
| chunks: (chunk) => { | ||
| return chunk.name === "foo"; | ||
| }, | ||
| enforce: true, | ||
| }, | ||
| barStyles: { | ||
| type: "css/mini-extract", | ||
| name: "styles_bar", | ||
| test: (m, c, entry = "bar") => | ||
| m.constructor.name === "CssModule" && | ||
| recursiveIssuer(m, c) === entry, | ||
| chunks: "all", | ||
| chunks: (chunk) => { | ||
| return chunk.name === "bar"; | ||
| }, | ||
| enforce: true, | ||
@@ -942,2 +964,146 @@ }, | ||
| ### Multiple Themes | ||
| **webpack.config.js** | ||
| ```js | ||
| const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | ||
| module.exports = { | ||
| entry: "./src/index.js", | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.s[ac]ss$/i, | ||
| oneOf: [ | ||
| { | ||
| resourceQuery: "?dark", | ||
| use: [ | ||
| Self.loader, | ||
| "css-loader", | ||
| { | ||
| loader: "sass-loader", | ||
| options: { | ||
| additionalData: `@use 'dark-theme/vars' as vars;`, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| use: [ | ||
| Self.loader, | ||
| "css-loader", | ||
| { | ||
| loader: "sass-loader", | ||
| options: { | ||
| additionalData: `@use 'light-theme/vars' as vars;`, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| plugins: [ | ||
| new Self({ | ||
| filename: "[name].css", | ||
| attributes: { | ||
| id: "theme", | ||
| }, | ||
| }), | ||
| ], | ||
| }; | ||
| ``` | ||
| **src/index.js** | ||
| ```js | ||
| import "./style.scss"; | ||
| let theme = "light"; | ||
| const themes = {}; | ||
| themes[theme] = document.querySelector("#theme"); | ||
| async function loadTheme(newTheme) { | ||
| // eslint-disable-next-line no-console | ||
| console.log(`CHANGE THEME - ${newTheme}`); | ||
| const themeElement = document.querySelector("#theme"); | ||
| if (themeElement) { | ||
| themeElement.remove(); | ||
| } | ||
| if (themes[newTheme]) { | ||
| // eslint-disable-next-line no-console | ||
| console.log(`THEME ALREADY LOADED - ${newTheme}`); | ||
| document.head.appendChild(themes[newTheme]); | ||
| return; | ||
| } | ||
| if (newTheme === "dark") { | ||
| // eslint-disable-next-line no-console | ||
| console.log(`LOADING THEME - ${newTheme}`); | ||
| import(/* webpackChunkName: "dark" */ "./style.scss?dark").then(() => { | ||
| themes[newTheme] = document.querySelector("#theme"); | ||
| // eslint-disable-next-line no-console | ||
| console.log(`LOADED - ${newTheme}`); | ||
| }); | ||
| } | ||
| } | ||
| document.onclick = () => { | ||
| if (theme === "light") { | ||
| theme = "dark"; | ||
| } else { | ||
| theme = "light"; | ||
| } | ||
| loadTheme(theme); | ||
| }; | ||
| ``` | ||
| **src/dark-theme/\_vars.scss** | ||
| ```scss | ||
| $background: black; | ||
| ``` | ||
| **src/light-theme/\_vars.scss** | ||
| ```scss | ||
| $background: white; | ||
| ``` | ||
| **src/styles.scss** | ||
| ```scss | ||
| body { | ||
| background-color: vars.$background; | ||
| } | ||
| ``` | ||
| **public/index.html** | ||
| ```html | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <title>Document</title> | ||
| <link id="theme" rel="stylesheet" type="text/css" href="./main.css" /> | ||
| </head> | ||
| <body> | ||
| <script src="./main.js"></script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ### Media Query Plugin | ||
@@ -944,0 +1110,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.17%
87752
- Lines of code
- increased by0.15%
1297
- Number of lines in readme file
- increased by17.2%
1131
Worsened metrics
- Dev dependency count
- increased by6.9%
31
No dependency changes