feat: added the emit option for SSR (#732)

README.md

@@ -261,6 +261,7 @@ module.exports = {
 |              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                                                         |
 
@@ -344,6 +345,14 @@ module.exports = {
 };
 ```
 
+#### `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`

jest.config.js

@@ -3,4 +3,5 @@ module.exports = {
   transformIgnorePatterns: ['/node_modules/', '<rootDir>/dist/'],
   watchPathIgnorePatterns: ['<rootDir>/test/js'],
   setupFilesAfterEnv: ['<rootDir>/setupTest.js'],
+  snapshotResolver: './test/helpers/snapshotResolver.js',
 };

src/loader-options.json

@@ -12,6 +12,9 @@
         }
       ]
     },
+    "emit": {
+      "type": "boolean"
+    },
     "esModule": {
       "type": "boolean"
     },

src/loader.js

@@ -205,11 +205,11 @@ export function pitch(request) {
       }
 
       const identifierCountMap = new Map();
-
+      const emit = typeof options.emit !== 'undefined' ? options.emit : true;
       let lastDep;
 
       for (const dependency of dependencies) {
-        if (!dependency.identifier) {
+        if (!dependency.identifier || !emit) {
           // eslint-disable-next-line no-continue
           continue;
         }

test/__snapshots__/HMR.test.js.snap.webpack5

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HMR should handle error event 1`] = `"[HMR] css reload %s"`;
+
+exports[`HMR should handle error event 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+
+exports[`HMR should reloads with # link href 1`] = `"[HMR] css reload %s"`;
+
+exports[`HMR should reloads with # link href 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"shortcut icon\\" href=\\"#href\\">"`;
+
+exports[`HMR should reloads with absolute remove url 1`] = `"[HMR] css reload %s"`;
+
+exports[`HMR should reloads with absolute remove url 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"stylesheet\\" href=\\"http://dev.com/dist/main.css\\">"`;
+
+exports[`HMR should reloads with link without href 1`] = `"[HMR] css reload %s"`;
+
+exports[`HMR should reloads with link without href 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"shortcut icon\\">"`;
+
+exports[`HMR should reloads with locals 1`] = `"[HMR] Detected local css modules. Reload all css"`;
+
+exports[`HMR should reloads with locals 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+
+exports[`HMR should reloads with non http/https link href 1`] = `"[HMR] css reload %s"`;
+
+exports[`HMR should reloads with non http/https link href 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"shortcut icon\\" href=\\"data:;base64,=\\">"`;
+
+exports[`HMR should reloads with non-file script in the end of page 1`] = `"[HMR] Reload all css"`;
+
+exports[`HMR should reloads with non-file script in the end of page 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+
+exports[`HMR should work reload all css 1`] = `"[HMR] Reload all css"`;
+
+exports[`HMR should work reload all css 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+
+exports[`HMR should works 1`] = `"[HMR] css reload %s"`;
+
+exports[`HMR should works 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+
+exports[`HMR should works with multiple updates 1`] = `"[HMR] css reload %s"`;
+
+exports[`HMR should works with multiple updates 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+
+exports[`HMR should works with multiple updates 3`] = `"<link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200001\\">"`;

test/__snapshots__/attributes-option.test.js.snap.webpack5

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`attributes option should work with attributes option: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<link id=\\"target\\" data-target=\\"example\\" rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`attributes option should work with attributes option: errors 1`] = `Array []`;
+
+exports[`attributes option should work with attributes option: warnings 1`] = `Array []`;
+
+exports[`attributes option should work without attributes option: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`attributes option should work without attributes option: errors 1`] = `Array []`;
+
+exports[`attributes option should work without attributes option: warnings 1`] = `Array []`;

test/__snapshots__/emit-option.test.js.snap.webpack4

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`emit option should work when emit option is "false": assets 1`] = `
+Array [
+  "main.js",
+  "react.svg",
+]
+`;
+
+exports[`emit option should work when emit option is "false": errors 1`] = `Array []`;
+
+exports[`emit option should work when emit option is "false": warnings 1`] = `Array []`;
+
+exports[`emit option should work when emit option is "true": assets 1`] = `
+Array [
+  "main.css",
+  "main.js",
+  "react.svg",
+]
+`;
+
+exports[`emit option should work when emit option is "true": errors 1`] = `Array []`;
+
+exports[`emit option should work when emit option is "true": warnings 1`] = `Array []`;
+
+exports[`emit option should work with locals when emit option is "false": DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+css.foo: _1F17fUrdX_cbcyDHpFqmAD
+css.bar: _3TZVxmkrZR2cTfifKhDoZn
+css.baz: M-pzkE59YBii7EXzFyxE6
+</body></html>"
+`;
+
+exports[`emit option should work with locals when emit option is "false": errors 1`] = `Array []`;
+
+exports[`emit option should work with locals when emit option is "false": warnings 1`] = `Array []`;
+
+exports[`emit option should work without emit option: assets 1`] = `
+Array [
+  "main.bundle.js",
+  "main.css",
+  "react.svg",
+]
+`;
+
+exports[`emit option should work without emit option: errors 1`] = `Array []`;
+
+exports[`emit option should work without emit option: warnings 1`] = `Array []`;

test/__snapshots__/emit-option.test.js.snap.webpack5

@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`emit option should invalidate the cache with disabled "emit" option: assets 1`] = `
+Array [
+  "main.js",
+  "static/react.svg",
+]
+`;
+
+exports[`emit option should invalidate the cache with disabled "emit" option: assets 2`] = `
+Array [
+  "main.js",
+]
+`;
+
+exports[`emit option should invalidate the cache with disabled "emit" option: emittedAssets 1`] = `
+Array [
+  "main.js",
+  "static/react.svg",
+]
+`;
+
+exports[`emit option should invalidate the cache with disabled "emit" option: emittedAssets 2`] = `Array []`;
+
+exports[`emit option should invalidate the cache with disabled "emit" option: errors 1`] = `Array []`;
+
+exports[`emit option should invalidate the cache with disabled "emit" option: errors 2`] = `Array []`;
+
+exports[`emit option should invalidate the cache with disabled "emit" option: warnings 1`] = `Array []`;
+
+exports[`emit option should invalidate the cache with disabled "emit" option: warnings 2`] = `Array []`;
+
+exports[`emit option should work when emit option is "false": assets 1`] = `
+Array [
+  "main.js",
+  "react.svg",
+]
+`;
+
+exports[`emit option should work when emit option is "false": errors 1`] = `Array []`;
+
+exports[`emit option should work when emit option is "false": warnings 1`] = `Array []`;
+
+exports[`emit option should work when emit option is "true": assets 1`] = `
+Array [
+  "main.css",
+  "main.js",
+  "react.svg",
+]
+`;
+
+exports[`emit option should work when emit option is "true": errors 1`] = `Array []`;
+
+exports[`emit option should work when emit option is "true": warnings 1`] = `Array []`;
+
+exports[`emit option should work with locals and invalidate cache when emit option is "false": DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+css.foo: _1F17fUrdX_cbcyDHpFqmAD
+css.bar: _3TZVxmkrZR2cTfifKhDoZn
+css.baz: M-pzkE59YBii7EXzFyxE6
+</body></html>"
+`;
+
+exports[`emit option should work with locals and invalidate cache when emit option is "false": DOM 2`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+css.foo-bar: VWLDg_rByGM4Rdhz5T3Ns
+css.bar: _3TZVxmkrZR2cTfifKhDoZn
+css.baz: M-pzkE59YBii7EXzFyxE6
+</body></html>"
+`;
+
+exports[`emit option should work with locals and invalidate cache when emit option is "false": assets 1`] = `
+Array [
+  "main.js",
+]
+`;
+
+exports[`emit option should work with locals and invalidate cache when emit option is "false": assets 2`] = `
+Array [
+  "main.js",
+]
+`;
+
+exports[`emit option should work with locals and invalidate cache when emit option is "false": emittedAssets 1`] = `
+Array [
+  "main.js",
+]
+`;
+
+exports[`emit option should work with locals and invalidate cache when emit option is "false": emittedAssets 2`] = `
+Array [
+  "main.js",
+]
+`;
+
+exports[`emit option should work with locals and invalidate cache when emit option is "false": errors 1`] = `Array []`;
+
+exports[`emit option should work with locals and invalidate cache when emit option is "false": errors 2`] = `Array []`;
+
+exports[`emit option should work with locals and invalidate cache when emit option is "false": warnings 1`] = `Array []`;
+
+exports[`emit option should work with locals and invalidate cache when emit option is "false": warnings 2`] = `Array []`;
+
+exports[`emit option should work with locals when emit option is "false": DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+css.foo: _1F17fUrdX_cbcyDHpFqmAD
+css.bar: _3TZVxmkrZR2cTfifKhDoZn
+css.baz: M-pzkE59YBii7EXzFyxE6
+</body></html>"
+`;
+
+exports[`emit option should work with locals when emit option is "false": errors 1`] = `Array []`;
+
+exports[`emit option should work with locals when emit option is "false": warnings 1`] = `Array []`;
+
+exports[`emit option should work with the "memory" cache and disabled "emit" option: assets 1`] = `
+Array [
+  "main.js",
+  "static/react.svg",
+]
+`;
+
+exports[`emit option should work with the "memory" cache and disabled "emit" option: assets 2`] = `
+Array [
+  "main.js",
+  "static/react.svg",
+]
+`;
+
+exports[`emit option should work with the "memory" cache and disabled "emit" option: emittedAssets 1`] = `
+Array [
+  "main.js",
+  "static/react.svg",
+]
+`;
+
+exports[`emit option should work with the "memory" cache and disabled "emit" option: emittedAssets 2`] = `Array []`;
+
+exports[`emit option should work with the "memory" cache and disabled "emit" option: errors 1`] = `Array []`;
+
+exports[`emit option should work with the "memory" cache and disabled "emit" option: errors 2`] = `Array []`;
+
+exports[`emit option should work with the "memory" cache and disabled "emit" option: warnings 1`] = `Array []`;
+
+exports[`emit option should work with the "memory" cache and disabled "emit" option: warnings 2`] = `Array []`;
+
+exports[`emit option should work without emit option: assets 1`] = `
+Array [
+  "main.bundle.js",
+  "main.css",
+  "react.svg",
+]
+`;
+
+exports[`emit option should work without emit option: errors 1`] = `Array []`;
+
+exports[`emit option should work without emit option: warnings 1`] = `Array []`;