diff --git a/package-lock.json b/package-lock.json index d2930570..b8d406b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,8 @@ "requires": true, "packages": { "": { - "version": "1.5.0", + "name": "mini-css-extract-plugin", + "version": "1.5.1", "license": "MIT", "dependencies": { "loader-utils": "^2.0.0", @@ -39,7 +40,7 @@ "npm-run-all": "^4.1.5", "prettier": "^2.2.1", "standard-version": "^9.1.0", - "webpack": "^5.33.2", + "webpack": "^5.36.1", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.7.2" }, @@ -17799,9 +17800,9 @@ } }, "node_modules/webpack": { - "version": "5.36.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.36.0.tgz", - "integrity": "sha512-HdOhLXClUEwTnzQnzpSG9iL00ej23ojvfnGpF49ba0MkuAT2q+WhQilHFFJHOIVRBqbzakQ1vCWQV2K+QLX0Qw==", + "version": "5.36.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.36.1.tgz", + "integrity": "sha512-2u25a82T+6quAxSlzEpN/R/RICwt20ONU3z3Ko05S8KVH9FXILcBYb2hD/rQtZT5y7lRAIsIIs05pdndY7ourQ==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.0", @@ -32759,9 +32760,9 @@ "dev": true }, "webpack": { - "version": "5.36.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.36.0.tgz", - "integrity": "sha512-HdOhLXClUEwTnzQnzpSG9iL00ej23ojvfnGpF49ba0MkuAT2q+WhQilHFFJHOIVRBqbzakQ1vCWQV2K+QLX0Qw==", + "version": "5.36.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.36.1.tgz", + "integrity": "sha512-2u25a82T+6quAxSlzEpN/R/RICwt20ONU3z3Ko05S8KVH9FXILcBYb2hD/rQtZT5y7lRAIsIIs05pdndY7ourQ==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", diff --git a/package.json b/package.json index 6dee7e02..81c78472 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "npm-run-all": "^4.1.5", "prettier": "^2.2.1", "standard-version": "^9.1.0", - "webpack": "^5.33.2", + "webpack": "^5.36.1", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.7.2" }, diff --git a/src/loader.js b/src/loader.js index 458217c0..7da01bdb 100644 --- a/src/loader.js +++ b/src/loader.js @@ -196,6 +196,7 @@ export function pitch(request) { ); return; } + this.importModule( `${this.resourcePath}.webpack[javascript/auto]!=!${request}`, { @@ -230,6 +231,18 @@ export function pitch(request) { outputOptions ); + // The templates are compiled and executed by NodeJS - similar to server side rendering + // Unfortunately this causes issues as some loaders require an absolute URL to support ES Modules + // The following config enables relative URL support for the child compiler + childCompiler.options.module = { ...childCompiler.options.module }; + childCompiler.options.module.parser = { + ...childCompiler.options.module.parser, + }; + childCompiler.options.module.parser.javascript = { + ...childCompiler.options.module.parser.javascript, + url: 'relative', + }; + const { NodeTemplatePlugin } = webpack.node; const NodeTargetPlugin = webpack.node.NodeTargetPlugin ? webpack.node.NodeTargetPlugin diff --git a/test/TestCases.test.js b/test/TestCases.test.js index 691f39da..374c434c 100644 --- a/test/TestCases.test.js +++ b/test/TestCases.test.js @@ -106,6 +106,7 @@ describe('TestCases', () => { directoryForCase, 'webpack.config.js' )); + const { context } = webpackConfig; for (const config of [].concat(webpackConfig)) { Object.assign( @@ -132,7 +133,8 @@ describe('TestCases', () => { } return p; }), - } + }, + context ? { context } : {} ); } diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.acd0bc1ae24d05fdac73.css b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.619e4b98882ea3a2aba3.css similarity index 100% rename from test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.acd0bc1ae24d05fdac73.css rename to test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.619e4b98882ea3a2aba3.css diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/acd0bc1ae24d05fdac73.css b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/619e4b98882ea3a2aba3.css similarity index 100% rename from test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/acd0bc1ae24d05fdac73.css rename to test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/619e4b98882ea3a2aba3.css diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js index ae56615a..1eba8e1c 100644 --- a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js +++ b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js @@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__); /******/ /******/ /* webpack/runtime/getFullHash */ /******/ (() => { -/******/ __webpack_require__.h = () => ("acd0bc1ae24d05fdac73") +/******/ __webpack_require__.h = () => ("619e4b98882ea3a2aba3") /******/ })(); /******/ /******/ /* webpack/runtime/global */ diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/0.4ecab8e2ff0fe228a728.css b/test/cases/chunkFilename-fullhash/expected/webpack-5/0.962555dd7355e6c261df.css similarity index 100% rename from test/cases/chunkFilename-fullhash/expected/webpack-5/0.4ecab8e2ff0fe228a728.css rename to test/cases/chunkFilename-fullhash/expected/webpack-5/0.962555dd7355e6c261df.css diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/4ecab8e2ff0fe228a728.css b/test/cases/chunkFilename-fullhash/expected/webpack-5/962555dd7355e6c261df.css similarity index 100% rename from test/cases/chunkFilename-fullhash/expected/webpack-5/4ecab8e2ff0fe228a728.css rename to test/cases/chunkFilename-fullhash/expected/webpack-5/962555dd7355e6c261df.css diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js b/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js index 878d4ecc..703a8d6c 100644 --- a/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js +++ b/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js @@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__); /******/ /******/ /* webpack/runtime/getFullHash */ /******/ (() => { -/******/ __webpack_require__.h = () => ("4ecab8e2ff0fe228a728") +/******/ __webpack_require__.h = () => ("962555dd7355e6c261df") /******/ })(); /******/ /******/ /* webpack/runtime/global */ diff --git a/test/cases/new-url-with-public-path-auto/app/img.png b/test/cases/new-url-with-public-path-auto/app/img.png new file mode 100644 index 00000000..b74b839e Binary files /dev/null and b/test/cases/new-url-with-public-path-auto/app/img.png differ diff --git a/test/cases/new-url-with-public-path-auto/app/index.js b/test/cases/new-url-with-public-path-auto/app/index.js new file mode 100644 index 00000000..aa3357bf --- /dev/null +++ b/test/cases/new-url-with-public-path-auto/app/index.js @@ -0,0 +1 @@ +import './style.css'; diff --git a/test/cases/new-url-with-public-path-auto/app/mockLoader.js b/test/cases/new-url-with-public-path-auto/app/mockLoader.js new file mode 100644 index 00000000..9cc8acfd --- /dev/null +++ b/test/cases/new-url-with-public-path-auto/app/mockLoader.js @@ -0,0 +1,12 @@ +export default function loader() { + const callback = this.async(); + + callback( + null, + `export default [ + [0, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""], + [1, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""], + [2, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""] + ]` + ); +} diff --git a/test/cases/new-url-with-public-path-auto/app/nested/nested-img.png b/test/cases/new-url-with-public-path-auto/app/nested/nested-img.png new file mode 100644 index 00000000..b74b839e Binary files /dev/null and b/test/cases/new-url-with-public-path-auto/app/nested/nested-img.png differ diff --git a/test/cases/new-url-with-public-path-auto/app/style.css b/test/cases/new-url-with-public-path-auto/app/style.css new file mode 100644 index 00000000..f6cbd40f --- /dev/null +++ b/test/cases/new-url-with-public-path-auto/app/style.css @@ -0,0 +1,3 @@ +.class { + background: red; +} diff --git a/test/cases/new-url-with-public-path-auto/expected/main.css b/test/cases/new-url-with-public-path-auto/expected/main.css new file mode 100644 index 00000000..3d87a6ed --- /dev/null +++ b/test/cases/new-url-with-public-path-auto/expected/main.css @@ -0,0 +1,3 @@ +.foo {background: url(img.png)} +.bar {background: url(../outer-img.png)} +.baz {background: url(nested/nested-img.png)} diff --git a/test/cases/new-url-with-public-path-auto/outer-img.png b/test/cases/new-url-with-public-path-auto/outer-img.png new file mode 100644 index 00000000..b74b839e Binary files /dev/null and b/test/cases/new-url-with-public-path-auto/outer-img.png differ diff --git a/test/cases/new-url-with-public-path-auto/test.filter.js b/test/cases/new-url-with-public-path-auto/test.filter.js new file mode 100644 index 00000000..20341d78 --- /dev/null +++ b/test/cases/new-url-with-public-path-auto/test.filter.js @@ -0,0 +1,4 @@ +const webpack = require('webpack'); + +module.exports = () => + webpack.version[0] !== '4' && !process.env.EXPERIMENTAL_USE_IMPORT_MODULE; diff --git a/test/cases/new-url-with-public-path-auto/webpack.config.js b/test/cases/new-url-with-public-path-auto/webpack.config.js new file mode 100644 index 00000000..1a1c7a41 --- /dev/null +++ b/test/cases/new-url-with-public-path-auto/webpack.config.js @@ -0,0 +1,36 @@ +import path from 'path'; + +import Self from '../../../src'; + +module.exports = { + entry: './index.js', + context: path.resolve(__dirname, 'app'), + module: { + rules: [ + { + test: /\.css$/, + use: [ + { + loader: Self.loader, + options: { + publicPath: 'auto', + }, + }, + './mockLoader', + ], + }, + { + test: /\.png$/, + type: 'asset/resource', + generator: { + filename: '[path][name][ext]', + }, + }, + ], + }, + plugins: [ + new Self({ + filename: '[name].css', + }), + ], +}; diff --git a/test/cases/new-url-with-public-path/app/img.png b/test/cases/new-url-with-public-path/app/img.png new file mode 100644 index 00000000..b74b839e Binary files /dev/null and b/test/cases/new-url-with-public-path/app/img.png differ diff --git a/test/cases/new-url-with-public-path/app/index.js b/test/cases/new-url-with-public-path/app/index.js new file mode 100644 index 00000000..aa3357bf --- /dev/null +++ b/test/cases/new-url-with-public-path/app/index.js @@ -0,0 +1 @@ +import './style.css'; diff --git a/test/cases/new-url-with-public-path/app/mockLoader.js b/test/cases/new-url-with-public-path/app/mockLoader.js new file mode 100644 index 00000000..9cc8acfd --- /dev/null +++ b/test/cases/new-url-with-public-path/app/mockLoader.js @@ -0,0 +1,12 @@ +export default function loader() { + const callback = this.async(); + + callback( + null, + `export default [ + [0, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""], + [1, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""], + [2, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""] + ]` + ); +} diff --git a/test/cases/new-url-with-public-path/app/nested/nested-img.png b/test/cases/new-url-with-public-path/app/nested/nested-img.png new file mode 100644 index 00000000..b74b839e Binary files /dev/null and b/test/cases/new-url-with-public-path/app/nested/nested-img.png differ diff --git a/test/cases/new-url-with-public-path/app/style.css b/test/cases/new-url-with-public-path/app/style.css new file mode 100644 index 00000000..f6cbd40f --- /dev/null +++ b/test/cases/new-url-with-public-path/app/style.css @@ -0,0 +1,3 @@ +.class { + background: red; +} diff --git a/test/cases/new-url-with-public-path/expected/main.css b/test/cases/new-url-with-public-path/expected/main.css new file mode 100644 index 00000000..292bfd37 --- /dev/null +++ b/test/cases/new-url-with-public-path/expected/main.css @@ -0,0 +1,3 @@ +.foo {background: url(public/img.png)} +.bar {background: url(public/../outer-img.png)} +.baz {background: url(public/nested/nested-img.png)} diff --git a/test/cases/new-url-with-public-path/outer-img.png b/test/cases/new-url-with-public-path/outer-img.png new file mode 100644 index 00000000..b74b839e Binary files /dev/null and b/test/cases/new-url-with-public-path/outer-img.png differ diff --git a/test/cases/new-url-with-public-path/test.filter.js b/test/cases/new-url-with-public-path/test.filter.js new file mode 100644 index 00000000..20341d78 --- /dev/null +++ b/test/cases/new-url-with-public-path/test.filter.js @@ -0,0 +1,4 @@ +const webpack = require('webpack'); + +module.exports = () => + webpack.version[0] !== '4' && !process.env.EXPERIMENTAL_USE_IMPORT_MODULE; diff --git a/test/cases/new-url-with-public-path/webpack.config.js b/test/cases/new-url-with-public-path/webpack.config.js new file mode 100644 index 00000000..1d7453d9 --- /dev/null +++ b/test/cases/new-url-with-public-path/webpack.config.js @@ -0,0 +1,36 @@ +import path from 'path'; + +import Self from '../../../src'; + +module.exports = { + entry: './index.js', + context: path.resolve(__dirname, 'app'), + module: { + rules: [ + { + test: /\.css$/, + use: [ + { + loader: Self.loader, + options: { + publicPath: 'public', + }, + }, + './mockLoader', + ], + }, + { + test: /\.png$/, + type: 'asset/resource', + generator: { + filename: '[path][name][ext]', + }, + }, + ], + }, + plugins: [ + new Self({ + filename: '[name].css', + }), + ], +};