Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat emit option #732

Merged
merged 2 commits into from Mar 26, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions README.md
Expand Up @@ -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 |

Expand Down Expand Up @@ -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`
Expand Down
1 change: 1 addition & 0 deletions jest.config.js
Expand Up @@ -3,4 +3,5 @@ module.exports = {
transformIgnorePatterns: ['/node_modules/', '<rootDir>/dist/'],
watchPathIgnorePatterns: ['<rootDir>/test/js'],
setupFilesAfterEnv: ['<rootDir>/setupTest.js'],
snapshotResolver: './test/helpers/snapshotResolver.js',
};
3 changes: 3 additions & 0 deletions src/loader-options.json
Expand Up @@ -12,6 +12,9 @@
}
]
},
"emit": {
"type": "boolean"
},
"esModule": {
"type": "boolean"
},
Expand Down
4 changes: 2 additions & 2 deletions src/loader.js
Expand Up @@ -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;
}
Expand Down
43 changes: 43 additions & 0 deletions 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\\">"`;
37 changes: 37 additions & 0 deletions 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 []`;
52 changes: 52 additions & 0 deletions 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 []`;
169 changes: 169 additions & 0 deletions 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 []`;