diff --git a/package-lock.json b/package-lock.json index 7511f7d..5245d6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "babel-jest": "^28.1.3", "cross-env": "^7.0.3", "cspell": "^6.31.1", - "css-loader": "^6.7.3", + "css-loader": "^6.7.4", "del": "^6.1.1", "del-cli": "^4.0.1", "es-check": "^7.1.1", @@ -38,7 +38,7 @@ "sass-loader": "^12.4.0", "semver": "^7.5.0", "standard-version": "^9.5.0", - "webpack": "^5.81.0", + "webpack": "^5.83.1", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.13.3" }, @@ -6392,15 +6392,15 @@ } }, "node_modules/css-loader": { - "version": "6.7.3", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz", - "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==", + "version": "6.7.4", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.4.tgz", + "integrity": "sha512-0Y5uHtK5BswfaGJ+jrO+4pPg1msFBc0pwPIE1VqfpmVn6YbDfYfXMj8rfd7nt+4goAhJueO+H/I40VWJfcP1mQ==", "dev": true, "dependencies": { "icss-utils": "^5.1.0", - "postcss": "^8.4.19", + "postcss": "^8.4.21", "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-local-by-default": "^4.0.1", "postcss-modules-scope": "^3.0.0", "postcss-modules-values": "^4.0.0", "postcss-value-parser": "^4.2.0", @@ -7097,9 +7097,9 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.13.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.13.0.tgz", - "integrity": "sha512-eyV8f0y1+bzyfh8xAwW/WTSZpLbjhqc4ne9eGSH4Zo2ejdyiNG9pU6mf9DG8a7+Auk6MFTlNOT4Y2y/9k8GKVg==", + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.0.tgz", + "integrity": "sha512-+DCows0XNwLDcUhbFJPdlQEVnT2zXlCv7hPxemTz86/O+B/hCQ+mb7ydkPKiflpVraqLPCAfu7lDy+hBXueojw==", "dev": true, "dependencies": { "graceful-fs": "^4.2.4", @@ -12394,10 +12394,16 @@ } }, "node_modules/nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -12985,9 +12991,9 @@ } }, "node_modules/postcss": { - "version": "8.4.19", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", - "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", + "version": "8.4.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz", + "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==", "dev": true, "funding": [ { @@ -12997,10 +13003,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -13021,9 +13031,9 @@ } }, "node_modules/postcss-modules-local-by-default": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", - "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.1.tgz", + "integrity": "sha512-Zr/dB+IlXaEqdoslLHhhqecwj73vc3rDmOpsBNBEVk7P2aqAlz+Ijy0fFbU5Ie9PtreDOIgGa9MsLWakVGl+fA==", "dev": true, "dependencies": { "icss-utils": "^5.0.0", @@ -15348,9 +15358,9 @@ } }, "node_modules/webpack": { - "version": "5.81.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz", - "integrity": "sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==", + "version": "5.83.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.83.1.tgz", + "integrity": "sha512-TNsG9jDScbNuB+Lb/3+vYolPplCS3bbEaJf+Bj0Gw4DhP3ioAflBb1flcRt9zsWITyvOhM96wMQNRWlSX52DgA==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.3", @@ -15362,7 +15372,7 @@ "acorn-import-assertions": "^1.7.6", "browserslist": "^4.14.5", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.13.0", + "enhanced-resolve": "^5.14.0", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", @@ -21015,15 +21025,15 @@ } }, "css-loader": { - "version": "6.7.3", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz", - "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==", + "version": "6.7.4", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.4.tgz", + "integrity": "sha512-0Y5uHtK5BswfaGJ+jrO+4pPg1msFBc0pwPIE1VqfpmVn6YbDfYfXMj8rfd7nt+4goAhJueO+H/I40VWJfcP1mQ==", "dev": true, "requires": { "icss-utils": "^5.1.0", - "postcss": "^8.4.19", + "postcss": "^8.4.21", "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-local-by-default": "^4.0.1", "postcss-modules-scope": "^3.0.0", "postcss-modules-values": "^4.0.0", "postcss-value-parser": "^4.2.0", @@ -21513,9 +21523,9 @@ "dev": true }, "enhanced-resolve": { - "version": "5.13.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.13.0.tgz", - "integrity": "sha512-eyV8f0y1+bzyfh8xAwW/WTSZpLbjhqc4ne9eGSH4Zo2ejdyiNG9pU6mf9DG8a7+Auk6MFTlNOT4Y2y/9k8GKVg==", + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.0.tgz", + "integrity": "sha512-+DCows0XNwLDcUhbFJPdlQEVnT2zXlCv7hPxemTz86/O+B/hCQ+mb7ydkPKiflpVraqLPCAfu7lDy+hBXueojw==", "dev": true, "requires": { "graceful-fs": "^4.2.4", @@ -25463,9 +25473,9 @@ } }, "nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", "dev": true }, "natural-compare": { @@ -25895,12 +25905,12 @@ "dev": true }, "postcss": { - "version": "8.4.19", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", - "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", + "version": "8.4.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz", + "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==", "dev": true, "requires": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } @@ -25913,9 +25923,9 @@ "requires": {} }, "postcss-modules-local-by-default": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", - "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.1.tgz", + "integrity": "sha512-Zr/dB+IlXaEqdoslLHhhqecwj73vc3rDmOpsBNBEVk7P2aqAlz+Ijy0fFbU5Ie9PtreDOIgGa9MsLWakVGl+fA==", "dev": true, "requires": { "icss-utils": "^5.0.0", @@ -27668,9 +27678,9 @@ "dev": true }, "webpack": { - "version": "5.81.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz", - "integrity": "sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==", + "version": "5.83.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.83.1.tgz", + "integrity": "sha512-TNsG9jDScbNuB+Lb/3+vYolPplCS3bbEaJf+Bj0Gw4DhP3ioAflBb1flcRt9zsWITyvOhM96wMQNRWlSX52DgA==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.3", @@ -27682,7 +27692,7 @@ "acorn-import-assertions": "^1.7.6", "browserslist": "^4.14.5", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.13.0", + "enhanced-resolve": "^5.14.0", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", diff --git a/package.json b/package.json index 66310d1..65202f7 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "babel-jest": "^28.1.3", "cross-env": "^7.0.3", "cspell": "^6.31.1", - "css-loader": "^6.7.3", + "css-loader": "^6.7.4", "del": "^6.1.1", "del-cli": "^4.0.1", "es-check": "^7.1.1", @@ -76,7 +76,7 @@ "sass-loader": "^12.4.0", "semver": "^7.5.0", "standard-version": "^9.5.0", - "webpack": "^5.81.0", + "webpack": "^5.83.1", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.13.3" }, diff --git a/src/index.js b/src/index.js index 04cbcb5..b79e683 100644 --- a/src/index.js +++ b/src/index.js @@ -22,9 +22,37 @@ import { import schema from "./options.json"; -const loaderAPI = () => {}; +// eslint-disable-next-line consistent-return +const loader = function loader(content) { + if ( + this._compiler && + this._compiler.options && + this._compiler.options.experiments && + this._compiler.options.experiments.css && + this._module && + this._module.type === "css" + ) { + return content; + } +}; + +loader.pitch = function pitch(request) { + if ( + this._compiler && + this._compiler.options && + this._compiler.options.experiments && + this._compiler.options.experiments.css && + this._module && + this._module.type === "css" + ) { + this.emitWarning( + new Error( + 'You can\'t use `experiments.css` (`experiments.futureDefaults` enable built-in CSS support by default) and `style-loader` together, please set `experiments.css` to `false` or set `{ type: "javascript/auto" }` for rules with `style-loader` in your webpack config (now `style-loader` does nothing).' + ) + ); + return; + } -loaderAPI.pitch = function loader(request) { const options = this.getOptions(schema); const injectType = options.injectType || "styleTag"; const esModule = @@ -57,6 +85,7 @@ loaderAPI.pitch = function loader(request) { case "linkTag": { const hmrCode = this.hot ? getLinkHmrCode(esModule, this, request) : ""; + // eslint-disable-next-line consistent-return return ` ${getImportLinkAPICode(esModule, this)} ${getImportInsertBySelectorCode(esModule, this, insertType, options)} @@ -87,6 +116,7 @@ ${esModule ? "export default {}" : ""}`; ? getStyleHmrCode(esModule, this, request, true) : ""; + // eslint-disable-next-line consistent-return return ` var exported = {}; @@ -157,6 +187,7 @@ ${getExportLazyStyleCode(esModule, this, request)} ? getStyleHmrCode(esModule, this, request, false) : ""; + // eslint-disable-next-line consistent-return return ` ${getImportStyleAPICode(esModule, this)} ${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)} @@ -196,4 +227,4 @@ ${getExportStyleCode(esModule, this, request)} } }; -export default loaderAPI; +export default loader; diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index e112ad2..9ededff 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -1,5 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`loader should do nothing with built-in CSS support: errors 1`] = `Array []`; + +exports[`loader should do nothing with built-in CSS support: warnings 1`] = ` +Array [ + "ModuleWarning: Module Warning (from ../../node_modules/css-loader/dist/cjs.js): +You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-in CSS support by default) and \`css-loader\` together, please set \`experiments.css\` to \`false\` or set \`{ type: \\"javascript/auto\\" }\` for rules with \`css-loader\` in your webpack config (now css-loader does nothing).", + "ModuleWarning: Module Warning (from ../../src/cjs.js): +You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-in CSS support by default) and \`style-loader\` together, please set \`experiments.css\` to \`false\` or set \`{ type: \\"javascript/auto\\" }\` for rules with \`style-loader\` in your webpack config (now \`style-loader\` does nothing).", + "ModuleWarning: Module Warning (from ../../node_modules/css-loader/dist/cjs.js): +You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-in CSS support by default) and \`css-loader\` together, please set \`experiments.css\` to \`false\` or set \`{ type: \\"javascript/auto\\" }\` for rules with \`css-loader\` in your webpack config (now css-loader does nothing).", + "ModuleWarning: Module Warning (from ../../src/cjs.js): +You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-in CSS support by default) and \`style-loader\` together, please set \`experiments.css\` to \`false\` or set \`{ type: \\"javascript/auto\\" }\` for rules with \`style-loader\` in your webpack config (now \`style-loader\` does nothing).", +] +`; + exports[`loader should inject hmr code with HotModuleReplacementPlugin when the "injectType" option is "autoStyleTag": errors 1`] = `Array []`; exports[`loader should inject hmr code with HotModuleReplacementPlugin when the "injectType" option is "autoStyleTag": warnings 1`] = `Array []`; diff --git a/test/loader.test.js b/test/loader.test.js index 9e8e30f..f2f236a 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -39,6 +39,22 @@ describe("loader", () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); + it("should do nothing with built-in CSS support", async () => { + const compiler = getCompiler( + "./simple.js", + {}, + { + experiments: { + css: true, + }, + } + ); + const stats = await compile(compiler); + + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); + injectTypes.forEach((injectType) => { it(`should work when the "injectType" option is "${injectType}"`, async () => { expect.assertions(3);