get rid of postcss (core)

manuel3108 · manuel3108 · commit aecd8b163980 · 2025-12-07T09:44:05.000+01:00
diff --git a/packages/sv/lib/core/tests/css/common/add-at-rule/output.css b/packages/sv/lib/core/tests/css/common/add-at-rule/output.css
@@ -1,5 +1,7 @@
 @tailwind 'lib/path/file.ext';
+
 .foo {
 	color: red;
 }
+
 @tailwind 'lib/path/file1.ext';
diff --git a/packages/sv/lib/core/tests/css/common/add-at-rule/run.ts b/packages/sv/lib/core/tests/css/common/add-at-rule/run.ts
@@ -1,6 +1,7 @@
-import { addAtRule, type CssAst } from '../../../../tooling/css/index.ts';
+import { addAtRule } from '../../../../tooling/css/index.ts';
+import { type SvelteAst } from '../../../../tooling/index.ts';
 
-export function run(ast: CssAst): void {
+export function run(ast: SvelteAst.CSS.StyleSheet): void {
 	addAtRule(ast, { name: 'tailwind', params: "'lib/path/file.ext'", append: false });
 	addAtRule(ast, { name: 'tailwind', params: "'lib/path/file1.ext'", append: true });
 }
diff --git a/packages/sv/lib/core/tests/css/common/add-comment/input.css b/packages/sv/lib/core/tests/css/common/add-comment/input.css
diff --git a/packages/sv/lib/core/tests/css/common/add-comment/output.css b/packages/sv/lib/core/tests/css/common/add-comment/output.css
diff --git a/packages/sv/lib/core/tests/css/common/add-comment/run.ts b/packages/sv/lib/core/tests/css/common/add-comment/run.ts
diff --git a/packages/sv/lib/core/tests/css/common/add-imports/output.css b/packages/sv/lib/core/tests/css/common/add-imports/output.css
@@ -1,4 +1,5 @@
 @import 'lib/path/file.css';
+
 .foo {
 	color: red;
 }
diff --git a/packages/sv/lib/core/tests/css/common/add-imports/run.ts b/packages/sv/lib/core/tests/css/common/add-imports/run.ts
@@ -1,6 +1,7 @@
-import { addImports, type CssAst } from '../../../../tooling/css/index.ts';
+import { addImports } from '../../../../tooling/css/index.ts';
+import { type SvelteAst } from '../../../../tooling/index.ts';
 
-export function run(ast: CssAst): void {
+export function run(ast: SvelteAst.CSS.StyleSheet): void {
 	addImports(ast, {
 		imports: ["'lib/path/file.css'"]
 	});
diff --git a/packages/sv/lib/core/tests/css/common/add-rule/output.css b/packages/sv/lib/core/tests/css/common/add-rule/output.css
@@ -1,6 +1,7 @@
 .foo {
 	color: red;
 }
+
 .bar {
 	color: blue;
 }
diff --git a/packages/sv/lib/core/tests/css/common/add-rule/run.ts b/packages/sv/lib/core/tests/css/common/add-rule/run.ts
@@ -1,8 +1,9 @@
-import { addDeclaration, addRule, type CssAst } from '../../../../tooling/css/index.ts';
+import { addDeclaration, addRule } from '../../../../tooling/css/index.ts';
+import { type SvelteAst } from '../../../../tooling/index.ts';
 
-export function run(ast: CssAst): void {
+export function run(ast: SvelteAst.CSS.StyleSheet): void {
 	const barSelectorRule = addRule(ast, {
-		selector: '.bar'
+		selector: 'bar'
 	});
 	addDeclaration(barSelectorRule, {
 		property: 'color',
diff --git a/packages/sv/lib/core/tooling/css/index.ts b/packages/sv/lib/core/tooling/css/index.ts
@@ -1,76 +1,142 @@
-import { Declaration, Rule, AtRule, Comment, type CssAst, type CssChildNode } from '../index.ts';
-
-export type { CssAst };
-
-export function addRule(node: CssAst, options: { selector: string }): Rule {
-	const rules = node.nodes.filter((x): x is Rule => x.type === 'rule');
-	let rule = rules.find((x) => x.selector === options.selector);
+import type { SvelteAst } from '../index.ts';
+
+export function addRule(
+	node: SvelteAst.CSS.StyleSheet,
+	options: { selector: string }
+): SvelteAst.CSS.Rule {
+	// we do not check for existing rules here, as the selector AST from svelte is really complex
+	const rules = node.children.filter((x) => x.type === 'Rule');
+	let rule = rules.find((x) => {
+		const selector = x.prelude.children[0].children[0].selectors[0];
+		return selector.type === 'ClassSelector' && selector.name === options.selector;
+	});
 
 	if (!rule) {
-		rule = new Rule();
-		rule.selector = options.selector;
-		node.nodes.push(rule);
+		rule = {
+			type: 'Rule',
+			prelude: {
+				type: 'SelectorList',
+				children: [
+					{
+						type: 'ComplexSelector',
+						children: [
+							{
+								type: 'RelativeSelector',
+								selectors: [
+									{
+										type: 'ClassSelector',
+										name: options.selector,
+										start: 0,
+										end: 0
+									}
+								],
+								combinator: null,
+								start: 0,
+								end: 0
+							}
+						],
+						start: 0,
+						end: 0
+					}
+				],
+				start: 0,
+				end: 0
+			},
+			block: { type: 'Block', children: [], start: 0, end: 0 },
+			start: 0,
+			end: 0
+		};
+		node.children.push(rule);
 	}
 
 	return rule;
 }
 
 export function addDeclaration(
-	node: Rule | CssAst,
+	node: SvelteAst.CSS.Rule,
 	options: { property: string; value: string }
 ): void {
-	const declarations = node.nodes.filter((x): x is Declaration => x.type === 'decl');
-	let declaration = declarations.find((x) => x.prop === options.property);
+	const declarations = node.block.children.filter((x) => x.type === 'Declaration');
+	let declaration = declarations.find((x) => x.property === options.property);
 
 	if (!declaration) {
-		declaration = new Declaration({ prop: options.property, value: options.value });
-		node.append(declaration);
+		declaration = {
+			type: 'Declaration',
+			property: options.property,
+			value: options.value,
+			start: 0,
+			end: 0
+		};
+		node.block.children.push(declaration);
 	} else {
 		declaration.value = options.value;
 	}
 }
 
-export function addImports(node: Rule | CssAst, options: { imports: string[] }): CssChildNode[] {
-	let prev: CssChildNode | undefined;
-	const nodes = options.imports.map((param) => {
-		const found = node.nodes.find(
-			(x) => x.type === 'atrule' && x.name === 'import' && x.params === param
-		);
-
-		if (found) return (prev = found);
+export function addImports(node: SvelteAst.CSS.StyleSheet, options: { imports: string[] }): void {
+	let lastImportIndex = -1;
 
-		const rule = new AtRule({ name: 'import', params: param });
-		if (prev) node.insertAfter(prev, rule);
-		else node.prepend(rule);
+	// Find the last existing @import to insert after it
+	for (let i = 0; i < node.children.length; i++) {
+		const child = node.children[i];
+		if (child.type === 'Atrule' && child.name === 'import') {
+			lastImportIndex = i;
+		}
+	}
 
-		return (prev = rule);
-	});
+	for (const param of options.imports) {
+		const found = node.children.find(
+			(x) => x.type === 'Atrule' && x.name === 'import' && x.prelude === param
+		);
 
-	return nodes;
+		if (found) continue;
+
+		const atRule: SvelteAst.CSS.Atrule = {
+			type: 'Atrule',
+			name: 'import',
+			prelude: param,
+			block: null,
+			start: 0,
+			end: 0
+		};
+
+		if (lastImportIndex >= 0) {
+			// Insert after the last @import
+			lastImportIndex++;
+			node.children.splice(lastImportIndex, 0, atRule);
+		} else {
+			// No existing imports, prepend at the start
+			node.children.unshift(atRule);
+			lastImportIndex = 0;
+		}
+	}
 }
 
 export function addAtRule(
-	node: CssAst,
+	node: SvelteAst.CSS.StyleSheet,
 	options: { name: string; params: string; append: boolean }
-): AtRule {
-	const atRules = node.nodes.filter((x): x is AtRule => x.type === 'atrule');
-	let atRule = atRules.find((x) => x.name === options.name && x.params === options.params);
+): SvelteAst.CSS.Atrule {
+	const atRules = node.children.filter((x) => x.type === 'Atrule');
+	let atRule = atRules.find((x) => x.name === options.name && x.prelude === options.params);
 
 	if (atRule) {
 		return atRule;
 	}
 
-	atRule = new AtRule({ name: options.name, params: options.params });
+	atRule = {
+		type: 'Atrule',
+		name: options.name,
+		prelude: options.params,
+		block: null,
+		start: 0,
+		end: 0
+	};
+
 	if (!options.append) {
-		node.prepend(atRule);
+		node.children.unshift(atRule);
 	} else {
-		node.append(atRule);
+		node.children.push(atRule);
 	}
 
 	return atRule;
 }
-
-export function addComment(node: CssAst, options: { value: string }): void {
-	const comment = new Comment({ text: options.value });
-	node.append(comment);
-}
diff --git a/packages/sv/lib/core/tooling/index.ts b/packages/sv/lib/core/tooling/index.ts
@@ -3,15 +3,6 @@ import type { TsEstree } from './js/ts-estree.ts';
 import { Document, Element, type ChildNode } from 'domhandler';
 import { ElementType, parseDocument } from 'htmlparser2';
 import serializeDom from 'dom-serializer';
-import {
-	Root as CssAst,
-	Declaration,
-	Rule,
-	AtRule,
-	Comment,
-	parse as postcssParse,
-	type ChildNode as CssChildNode
-} from 'postcss';
 import * as fleece from 'silver-fleece';
 import { print as esrapPrint } from 'esrap';
 import ts from 'esrap/languages/ts';
@@ -27,13 +18,6 @@ export {
 	Element as HtmlElement,
 	ElementType as HtmlElementType,
 
-	// css
-	CssAst,
-	Declaration,
-	Rule,
-	AtRule,
-	Comment,
-
 	// ast walker
 	Walker
 };
@@ -44,10 +28,7 @@ export type {
 	SvelteAst,
 
 	// js
-	TsEstree as AstTypes,
-
-	//css
-	CssChildNode
+	TsEstree as AstTypes
 };
 
 /**
@@ -115,12 +96,25 @@ export function serializeScript(
 	return code;
 }
 
-export function parseCss(content: string): CssAst {
-	return postcssParse(content);
+export function parseCss(content: string): SvelteAst.CSS.StyleSheet {
+	const ast = parseSvelte(`<style>${content}</style>`);
+	return ast.css!;
 }
 
-export function serializeCss(ast: CssAst): string {
-	return ast.toString();
+export function serializeCss(ast: SvelteAst.CSS.StyleSheet): string {
+	// `svelte` can print the stylesheet directly. But this adds the style tags (<style>) that we do not want here.
+	// `svelte` is unable to print an array of rules (ast.children) directly, therefore we concatenate the printed rules manually.
+
+	let result = '';
+
+	for (let i = 0; i < ast.children.length; i++) {
+		const child = ast.children[i];
+		result += sveltePrint(child).code;
+
+		if (i < ast.children.length - 1) result += '\n\n';
+	}
+
+	return result;
 }
 
 export function parseHtml(content: string): Document {
diff --git a/packages/sv/lib/core/tooling/parsers.ts b/packages/sv/lib/core/tooling/parsers.ts
@@ -15,9 +15,9 @@ export function parseScript(source: string): {
 	return { ast, comments, source, generateCode };
 }
 
-export function parseCss(source: string): { ast: utils.CssAst } & ParseBase {
+export function parseCss(source: string): { ast: utils.SvelteAst.CSS.StyleSheet } & ParseBase {
 	const ast = utils.parseCss(source);
-	const generateCode = () => ast.toString();
+	const generateCode = () => utils.serializeCss(ast);
 
 	return { ast, source, generateCode };
 }
diff --git a/packages/sv/package.json b/packages/sv/package.json
@@ -55,7 +55,6 @@
 		"magic-string": "^0.30.21",
 		"package-manager-detector": "^0.2.11",
 		"picocolors": "^1.1.1",
-		"postcss": "^8.5.6",
 		"ps-tree": "^1.2.0",
 		"silver-fleece": "^1.2.1",
 		"sucrase": "^3.35.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`@tailwind 'lib/path/file.ext';`
	`2`	`+`
`2`	`3`	`.foo {`
`3`	`4`	`color: red;`
`4`	`5`	`}`
	`6`	`+`
`5`	`7`	`@tailwind 'lib/path/file1.ext';`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`		`-import { addAtRule, type CssAst } from '../../../../tooling/css/index.ts';`
	`1`	`+import { addAtRule } from '../../../../tooling/css/index.ts';`
	`2`	`+import { type SvelteAst } from '../../../../tooling/index.ts';`
`2`	`3`
`3`		`-export function run(ast: CssAst): void {`
	`4`	`+export function run(ast: SvelteAst.CSS.StyleSheet): void {`
`4`	`5`	`addAtRule(ast, { name: 'tailwind', params: "'lib/path/file.ext'", append: false });`
`5`	`6`	`addAtRule(ast, { name: 'tailwind', params: "'lib/path/file1.ext'", append: true });`
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@import 'lib/path/file.css';`
	`2`	`+`
`2`	`3`	`.foo {`
`3`	`4`	`color: red;`
`4`	`5`	`}`