Revert "feat(rspack): replace css by postcss and bump/remove dependencies" (#10725)

Revert "feat(rspack): replace css by postcss and bump/remove dependencies (#1…"

This reverts commit d18fb092ad.

packages/rspack/package.json

@@ -21,7 +21,10 @@
 	"dependencies": {
 		"@babel/core": "^7.26.9",
 		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+		"@rsbuild/plugin-node-polyfill": "^1.3.0",
+		"@rspack/cli": "^1.2.7",
 		"@rspack/core": "^1.2.8",
+		"@swc/helpers": "^0.5.15",
 		"@vue/compiler-sfc": "^3.5.13",
 		"acorn": "^8.14.0",
 		"acorn-stage3": "^4.0.0",
@@ -29,19 +32,21 @@
 		"babel-loader": "^8.0.0",
 		"cli-highlight": "^2.1.11",
 		"commander": "^8.3.0",
-		"css-loader": "^7.1.2",
+		"css": "^3.0.0",
+		"css-loader": "^6.11.0",
 		"dotenv-webpack": "^8.1.0",
-		"loader-utils": "^3.3.1",
+		"loader-utils": "^2.0.0 || ^3.0.0",
 		"postcss": "^8.5.3",
-		"postcss-import": "^16.1.0",
+		"postcss-import": "^14.0.0",
 		"postcss-loader": "^8.1.1",
 		"raw-loader": "^4.0.2",
 		"react-refresh": "^0.14.2",
 		"rspack-plugin-virtual-module": "^0.1.13",
-		"sass": "^1.86.0",
-		"sass-embedded": "^1.86.0",
+		"sass": "^1.0.0",
+		"sass-embedded": "^1.85.1",
 		"sass-loader": "^16.0.5",
 		"sax": "^1.4.1",
+		"source-map": "^0.7.4",
 		"swc-loader": "^0.2.6",
 		"ts-checker-rspack-plugin": "^1.1.1",
 		"ts-dedent": "^2.2.0",

packages/rspack/src/configuration/vue3.ts

@@ -15,10 +15,6 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 	// we need to patch VueLoader if we want to enable hmr
 	if (env.hmr) {
 		patchVueLoaderForHMR();
-
-		// TODO: fix hmr in child components
-		// https://github.com/web-infra-dev/rsbuild/issues/3217#issuecomment-2290946740
-		// config.devtool(false);
 	}
 
 	// resolve .vue files

packages/rspack/src/loaders/css2json-loader/index.ts

@@ -1,4 +1,4 @@
-import postcss, { Root, Rule, Declaration, AtRule } from 'postcss';
+import { parse, Import, Stylesheet } from 'css';
 import { urlToRequest } from 'loader-utils';
 import { dedent } from 'ts-dedent';
 
@@ -11,22 +11,21 @@ export default function loader(content: string, map: any) {
 	const inline = !!options.useForImports;
 	const requirePrefix = inline ? inlineLoader : '';
 
-	const ast = postcss.parse(content);
+	const ast = parse(content);
 
 	// todo: revise if this is necessary
 	// todo: perhaps use postCSS and just build imports into a single file?
 	let dependencies = [];
-
 	getAndRemoveImportRules(ast)
 		.map(extractUrlFromRule)
 		.map(createRequireUri)
-		.forEach(({ requireURI }) => {
+		.forEach(({ uri, requireURI }) => {
 			dependencies.push(`require("${requirePrefix}${requireURI}")`);
 		});
 
-	const cssCompatibleAST = transformPostcssASTtoCSS(ast);
+	const str = JSON.stringify(ast, (k, v) => (k === 'position' ? undefined : v));
 
-	const str = JSON.stringify(cssCompatibleAST);
+	// map.mappings = map.mappings.replace(/;{2,}/, '')
 
 	const code = dedent`
 	/* CSS2JSON */
@@ -34,29 +33,41 @@ export default function loader(content: string, map: any) {
 	const ___CSS2JSON_LOADER_EXPORT___ = ${str}
 	export default ___CSS2JSON_LOADER_EXPORT___
 	`;
-
-	this.callback(null, code, map);
+	this.callback(
+		null,
+		code, //`${dependencies.join('\n')}module.exports = ${str};`,
+		map,
+	);
 }
 
-/**
- * Extract @import and remove them from the AST
- */
-function getAndRemoveImportRules(ast: Root): AtRule[] {
-	const imports = ast.nodes.filter(
-		(node) => node.type === 'atrule' && node.name === 'import',
-	) as AtRule[];
-	imports.forEach((rule) => rule.remove());
+function getImportRules(ast: Stylesheet): Import[] {
+	if (!ast || (<any>ast).type !== 'stylesheet' || !ast.stylesheet) {
+		return [];
+	}
+	return <Import[]>(
+		ast.stylesheet.rules.filter(
+			(rule) => rule.type === 'import' && (<any>rule).import,
+		)
+	);
+}
+
+function getAndRemoveImportRules(ast: Stylesheet): Import[] {
+	const imports = getImportRules(ast);
+	ast.stylesheet.rules = ast.stylesheet.rules.filter(
+		(rule) => rule.type !== 'import',
+	);
+
 	return imports;
 }
 
 /**
  * Extracts the url from import rule (ex. `url("./platform.css")`)
  */
-function extractUrlFromRule(importRule: AtRule): string {
-	const params = importRule.params;
+function extractUrlFromRule(importRule: Import): string {
+	const urlValue = importRule.import;
 
-	const unpackedUrlMatch = params.match(unpackUrlPattern);
-	const unpackedValue = unpackedUrlMatch ? unpackedUrlMatch[1] : params;
+	const unpackedUrlMatch = urlValue.match(unpackUrlPattern);
+	const unpackedValue = unpackedUrlMatch ? unpackedUrlMatch[1] : urlValue;
 
 	const quotesMatch = unpackedValue.match(betweenQuotesPattern);
 	return quotesMatch ? quotesMatch[2] : unpackedValue;
@@ -64,40 +75,7 @@ function extractUrlFromRule(importRule: AtRule): string {
 
 function createRequireUri(uri): { uri: string; requireURI: string } {
 	return {
-		uri,
+		uri: uri,
 		requireURI: urlToRequest(uri),
 	};
 }
-
-/**
- * TRANSFORMING THE POSTCSS AST TO THE ORIGINAL CSS AST
- */
-function transformPostcssASTtoCSS(ast: Root) {
-	return {
-		type: 'stylesheet',
-		stylesheet: {
-			rules: ast.nodes
-				.filter((node) => node.type === 'rule') // Solo reglas CSS, no comentarios ni otros
-				.map(transformRule),
-			parsingErrors: [],
-		},
-	};
-}
-
-function transformRule(rule: Rule) {
-	return {
-		type: 'rule',
-		selectors: rule.selectors,
-		declarations: rule.nodes
-			.filter((node) => node.type === 'decl')
-			.map(transformDeclaration),
-	};
-}
-
-function transformDeclaration(decl: Declaration) {
-	return {
-		type: 'declaration',
-		property: decl.prop,
-		value: decl.value,
-	};
-}