chore: migrate css extract test (#6360)

* chore: migrate css extract cases

* chore: migrate css extract cases

* chore: migrate css extract cases

* chore: migrate css extract cases

* chore: migrate css extract cases

.eslintignore

@@ -12,3 +12,4 @@ examples
 diffcases
 scripts/test/diff.cjs
 scripts/test/binary-path.cjs
+plugin-test

.gitignore

@@ -192,7 +192,6 @@ esbuild.cpuprofile
 
 # this node_modules is used for tree-shaking snapshot
 !packages/rspack-test-tools/tests/treeShakingCases/node_modules
-!packages/rspack/tests/cssExtract/cases/**/node_modules
 
 # Binding artifacts
 artifacts
@@ -223,6 +222,9 @@ justfile
 !/webpack-test/**/target
 !/webpack-test/cases/**/node_modules
 
+/plugin-test/css-extract/js
+!/plugin-test/css-extract/**/node_modules
+
 /webpack-examples/**/dist
 
 smoke-example

.prettierignore

@@ -19,6 +19,8 @@ packages/rspack/tests/cases/parsing/issue-5120-binding/fail.js
 packages/rspack/tests/diagnostics/module-parse-failed/lexically_name_error/index.js
 packages/rspack-plugin-mini-css-extract/test/cases/**/*
 
+plugin-test/**/*
+
 benchcases/**/*
 crates/**/*
 target/**/*

README.md

@@ -84,6 +84,7 @@ Thanks to:
 - The [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) project created by [@jantimon](https://github.com/jantimon), `@rspack/html-plugin` is a fork of [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) to avoid some webpack API usage not supported in Rspack.
 - The [Turbopack](https://github.com/vercel/turbo) project which inspired the AST path logic of Rspack.
 - The [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) created by [@pmmmwh](https://github.com/pmmmwh), which inspires implement react refresh.
+- The [mini-css-extract-plugin] project created by [@sokra](https://github.com/sokra) which inspired implement css extract plugin.
 
 ## License
 

package.json

@@ -33,7 +33,8 @@
     "test:hot": "pnpm --filter \"@rspack/*\" test:hot",
     "test:unit": "pnpm --filter \"@rspack/*\" test",
     "test:e2e": "pnpm --filter \"@rspack-e2e/*\" test",
-    "test:ci": "cross-env NODE_OPTIONS=--max_old_space_size=8192 pnpm run build:js && pnpm run test:unit && pnpm test:webpack",
+    "test:ci": "cross-env NODE_OPTIONS=--max_old_space_size=8192 pnpm run build:js && pnpm run test:unit && npm run test:plugin && pnpm test:webpack",
+    "test:plugin": "pnpm --filter \"plugin-test\" test",
     "test:webpack": "pnpm --filter \"webpack-test\" test:metric",
     "api-extractor:local": "pnpm --filter '@rspack/*' api-extractor --local",
     "api-extractor:ci": "pnpm --filter '@rspack/*' api-extractor:ci"

plugin-test/README.md

@@ -0,0 +1,8 @@
+>**Note**
+> This package is heavily based on [mini-css-extract-plugin/test](https://github.com/webpack-contrib/mini-css-extract-plugin/tree/master/test)
+
+## Credits
+
+Thanks to:
+
+* The [mini-css-extract-plugin] project created by [@sokra](https://github.com/sokra)

packages/rspack/tests/cssExtract/HMR.test.js → plugin-test/css-extract/HMR.test.js

@@ -4,7 +4,7 @@
 /* eslint-env browser */
 /* eslint-disable no-console */
 
-const hotModuleReplacement = require("../../dist/builtin-plugin/css-extract/hmr/hotModuleReplacement");
+const hotModuleReplacement = require("../../packages/rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement");
 
 function getLoadEvent() {
 	const event = document.createEvent("Event");
@@ -26,7 +26,7 @@ describe("HMR", () => {
 	let consoleMock = null;
 
 	beforeEach(() => {
-		consoleMock = jest.spyOn(console, "log").mockImplementation(() => () => {});
+		consoleMock = jest.spyOn(console, "log").mockImplementation(() => () => { });
 
 		jest.spyOn(Date, "now").mockImplementation(() => 1479427200000);
 

plugin-test/css-extract/README.md

@@ -0,0 +1,9 @@
+/**
+ * The test code is modified based on
+ * https://github.com/webpack-contrib/mini-css-extract-plugin/tree/master/test
+ *
+ * MIT Licensed
+ * Author Tobias Koppers @sokra
+ * Copyright JS Foundation and other contributors
+ * https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/LICENSE
+ */

packages/rspack/tests/cssExtract/TestCache.test.js → plugin-test/css-extract/TestCache.test.js

@@ -3,7 +3,7 @@
  */
 
 const path = require("path");
-const webpack = require("../../");
+const webpack = require("@rspack/core");
 const del = require("del");
 
 describe("TestCache", () => {

packages/rspack/tests/cssExtract/TestCases.test.js → plugin-test/css-extract/TestCases.test.js

@@ -4,11 +4,11 @@
 
 const fs = require("fs");
 const path = require("path");
-const webpack = require("../../");
+const webpack = require("@rspack/core");
 const yn = require("./helpers/yn");
 
 const { CssExtractRspackPlugin } = webpack;
-const UPDATE_TEST = process.env.CSS_CASE_UPDATE;
+const UPDATE_TEST = global.updateSnapshot;
 
 function clearDirectory(dirPath) {
 	let files;
@@ -92,7 +92,7 @@ function compareDirectory(actual, expected) {
 				if (UPDATE_TEST) {
 					fs.writeFileSync(path.resolve(expected, file), actualContent);
 				} else {
-					expect(actualContent).toEqual(content);
+					expect(actualContent.replace(/\r\n/g, "\n").trim()).toEqual(content.replace(/\r\n/g, "\n").trim());
 				}
 			}
 		}
@@ -109,7 +109,7 @@ describe("TestCases", () => {
 		// eslint-disable-next-line global-require, import/no-dynamic-require
 		if (fs.existsSync(filterPath) && !require(filterPath)()) {
 			describe.skip(test, () => {
-				it("filtered", () => {});
+				it("filtered", () => { });
 			});
 
 			return false;
@@ -137,28 +137,28 @@ describe("TestCases", () => {
 				));
 				const webpackConfig = Array.isArray(config)
 					? config.map(config => {
-							return {
-								...config,
-								optimization: { chunkIds: "named", ...config.optimization },
-								experiments: {
-									css: false,
-									rspackFuture: {
-										newTreeshaking: true
-									},
-									...config.experiments
-								}
-							};
-					  })
-					: {
+						return {
 							...config,
+							optimization: { chunkIds: "named", ...config.optimization },
 							experiments: {
 								css: false,
 								rspackFuture: {
 									newTreeshaking: true
 								},
 								...config.experiments
 							}
-					  };
+						};
+					})
+					: {
+						...config,
+						experiments: {
+							css: false,
+							rspackFuture: {
+								newTreeshaking: true
+							},
+							...config.experiments
+						}
+					};
 				const { context } = webpackConfig;
 
 				for (const config of [].concat(webpackConfig)) {
@@ -249,8 +249,7 @@ describe("TestCases", () => {
 					const expectedDirectory = path.resolve(directoryForCase, "expected");
 					const expectedDirectoryByVersion = path.join(
 						expectedDirectory,
-						`webpack-${webpack.version[0]}${
-							yn(process.env.OLD_API) ? "" : "-importModule"
+						`webpack-${webpack.version[0]}${yn(process.env.OLD_API) ? "" : "-importModule"
 						}`
 					);
 
@@ -267,7 +266,6 @@ describe("TestCases", () => {
 						const matchAll = res.match(
 							/__webpack_require__\.h = function \(\) {\n.*return ("[\d\w].*");\n.*};/i
 						);
-						console.log(matchAll[1]);
 						const replacer = new Array(matchAll[1].length);
 
 						res = res.replace(
@@ -301,7 +299,6 @@ describe("TestCases", () => {
 						});
 						// eslint-disable-next-line global-require, import/no-dynamic-require
 						const expectedWarnings = require(warningsFile);
-						console.log(actualWarnings);
 						expect(
 							actualWarnings
 								.trim()

packages/rspack/tests/cssExtract/TestMemoryFS.test.js → plugin-test/css-extract/TestMemoryFS.test.js

@@ -1,6 +1,6 @@
 const path = require("path");
 const { createFsFromVolume, Volume } = require("memfs");
-const webpack = require("../../");
+const webpack = require("@rspack/core");
 
 const assetsNames = assets => assets.map(asset => asset.name);
 

packages/rspack/tests/cssExtract/attributesOption.test.js → plugin-test/css-extract/attributesOption.test.js

@@ -1,7 +1,7 @@
 /* eslint-env browser */
 const path = require("path");
 
-const { CssExtractRspackPlugin: MiniCssExtractPlugin } = require("../../dist");
+const { CssExtractRspackPlugin: MiniCssExtractPlugin } = require("@rspack/core");
 
 const {
 	compile,

packages/rspack/tests/cssExtract/cases/asset-modules/webpack.config.js → plugin-test/css-extract/cases/asset-modules/webpack.config.js

@@ -1,4 +1,4 @@
-const { CssExtractRspackPlugin } = require("../../../../");
+const { CssExtractRspackPlugin } = require("@rspack/core");
 
 module.exports = {
 	entry: "./index.js",

packages/rspack/tests/cssExtract/cases/at-import-layer/webpack.config.js → plugin-test/css-extract/cases/at-charset/webpack.config.js

@@ -1,4 +1,4 @@
-const { CssExtractRspackPlugin } = require("../../../../");
+const { CssExtractRspackPlugin } = require("@rspack/core");
 
 module.exports = {
 	entry: "./index.js",

packages/rspack/tests/cssExtract/cases/at-import-in-the-entry/webpack.config.js → plugin-test/css-extract/cases/at-import-in-the-entry/webpack.config.js

@@ -1,4 +1,4 @@
-const { CssExtractRspackPlugin } = require("../../../../");
+const { CssExtractRspackPlugin } = require("@rspack/core");
 
 module.exports = {
 	mode: "development",

packages/rspack/tests/cssExtract/cases/at-import-in-the-middle/webpack.config.js → plugin-test/css-extract/cases/at-import-in-the-middle/webpack.config.js

@@ -1,4 +1,4 @@
-const { CssExtractRspackPlugin } = require("../../../../");
+const { CssExtractRspackPlugin } = require("@rspack/core");
 
 module.exports = {
 	entry: "./index.css",

packages/rspack/tests/cssExtract/cases/at-charset/webpack.config.js → plugin-test/css-extract/cases/at-import-layer/webpack.config.js

@@ -1,4 +1,4 @@
-const { CssExtractRspackPlugin } = require("../../../../");
+const { CssExtractRspackPlugin } = require("@rspack/core");
 
 module.exports = {
 	entry: "./index.js",

packages/rspack/tests/cssExtract/cases/at-import-supports/webpack.config.js → plugin-test/css-extract/cases/at-import-supports/webpack.config.js

@@ -1,4 +1,4 @@
-const { CssExtractRspackPlugin } = require("../../../../");
+const { CssExtractRspackPlugin } = require("@rspack/core");
 
 module.exports = {
 	entry: "./index.js",

packages/rspack/tests/cssExtract/cases/at-import/webpack.config.js → plugin-test/css-extract/cases/at-import/webpack.config.js

@@ -1,4 +1,4 @@
-const { CssExtractRspackPlugin } = require("../../../../");
+const { CssExtractRspackPlugin } = require("@rspack/core");
 
 module.exports = {
 	entry: "./index.js",

packages/rspack/tests/cssExtract/cases/at-media/webpack.config.js → plugin-test/css-extract/cases/at-media/webpack.config.js

@@ -1,4 +1,4 @@
-const { CssExtractRspackPlugin } = require("../../../../");
+const { CssExtractRspackPlugin } = require("@rspack/core");
 
 module.exports = {
 	entry: "./index.js",