Changeset e29cc2e for trip-planner-front/node_modules/mini-css-extract-plugin/README.md

Timestamp:

11/25/21 22:08:24 (3 years ago)

Author:

Ema <ema_spirova@…>

Branches:

master

Children:

8d391a1

Parents:

59329aa

Message:

primeNG components

File:

• trip-planner-front/node_modules/mini-css-extract-plugin/README.md (modified) (8 diffs)

trip-planner-front/node_modules/mini-css-extract-plugin/README.md

@@ -72 +72 @@
 ```
 
+> ⚠️ 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
 
 ### 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 |
+|                               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}`      |              `undefined`              | Use an experimental webpack API to execute modules instead of child compilers                                                             |
 
 #### `filename`
@@ -118 +123 @@
 Type: `String|Function`
 Default: `document.head.appendChild(linkTag);`
+
+> ⚠️ 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`.
@@ -170 +177 @@
 Default: `{}`
 
+> ⚠️ 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.
 
@@ -258 +267 @@
 ```
 
+#### `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`
 
-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.
+Type: `Boolean`
+Default: `undefined`
+
+Enabled by default if not explicitly enabled (i.e. `true` and `false` allow you to explicitly control this option) and new API is available (at least webpack `5.52.0` is required).
+Boolean values are available since version `5.33.2`, but you need to enable `experiments.executeModule` (not required from webpack `5.52.0`).
+
+Use a new webpack API to execute modules instead of child compilers.
+This improves performance and memory usage a lot.
 
 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({
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = {
+  plugins: [
+    new MiniCssExtractPlugin({
+      // You don't need this for `>= 5.52.0` due to the fact that this is enabled by default
+      // Required only for `>= 5.33.2 & <= 5.52.0`
+      // Not avaliable/unsafe for `<= 5.33.2`
       experimentalUseImportModule: true,
     }),
@@ -754 +802 @@
           name: "styles",
           type: "css/mini-extract",
-          // For webpack@4
-          // test: /\.css$/,
           chunks: "all",
           enforce: true,
@@ -789 +835 @@
 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 = {
@@ -817 +845 @@
       cacheGroups: {
         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,
         },
@@ -930 +958 @@
   },
 };
+```
+
+### 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>
 ```