feat: fix nested css by swapping css-tree for @eslint/css-tree

index.ts

@@ -16,7 +16,7 @@
 	type Declaration,
 	type Value,
 	type Operator,
-} from 'css-tree'
+} from '@eslint/css-tree'
 
 const SPACE = ' '
 const EMPTY_STRING = ''
@@ -67,7 +67,7 @@
 	let comments: number[] = []
 
 	function on_comment(_: string, position: CssLocation) {
 		comments.push(position.start.offset, position.end.offset)
 	}
 
 	let ast = parse(css, {
@@ -75,7 +75,7 @@
 		parseAtrulePrelude: false,
 		parseCustomProperty: true,
 		parseValue: true,
 		onComment: on_comment,
 	}) as StyleSheet
 
 	const NEWLINE = minify ? EMPTY_STRING : '\n'
@@ -193,7 +193,10 @@
 				}
 				case 'Combinator': {
 					// putting spaces around `child.name` (+ > ~ or ' '), unless the combinator is ' '
-					buffer += SPACE
+					// and the combinator is not the first in a nested selectorlist
+					if (child !== children.first) {
+						buffer += SPACE
+					}
 
 					if (child.name !== ' ') {
 						buffer += child.name + SPACE

package.json

@@ -30,7 +30,6 @@
   },
   "devDependencies": {
     "@codecov/vite-plugin": "^1.9.1",
-    "@types/css-tree": "^2.3.11",
     "@vitest/coverage-v8": "^4.0.3",
     "c8": "^10.1.3",
     "oxlint": "^1.24.0",
@@ -41,9 +40,6 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.3"
   },
-  "dependencies": {
-    "css-tree": "^3.1.0"
-  },
   "files": [
     "dist"
   ],
@@ -62,5 +58,8 @@
     "useTabs": true,
     "printWidth": 140,
     "singleQuote": true
+  },
+  "dependencies": {
+    "@eslint/css-tree": "^3.6.6"
   }
 }

test/rules.test.ts

@@ -182,19 +182,21 @@ test('formats unknown stuff in curly braces', () => {
 	expect(actual).toEqual(expected)
 })
 
-test('[check broken test] Relaxed nesting: formats nested rules with a selector with a &', () => {
+test('Relaxed nesting: formats nested rules with a selector with a &', () => {
 	let actual = format(`
 		selector {
 			a & { color:red }
 		}
 	`)
 	let expected = `selector {
-	a & { color:red }
+	a & {
+		color: red;
+	}
 }`
 	expect(actual).toEqual(expected)
 })
 
-test.skip('Relaxed nesting: formats nested rules with a selector with a &', () => {
+test('Relaxed nesting: formats nested rules with a selector with a &', () => {
 	let actual = format(`
 		selector {
 			a & { color:red }
@@ -208,19 +210,21 @@ test.skip('Relaxed nesting: formats nested rules with a selector with a &', () =
 	expect(actual).toEqual(expected)
 })
 
-test('[check broken test] Relaxed nesting: formats nested rules with a selector without a &', () => {
+test('Relaxed nesting: formats nested rules with a selector without a &', () => {
 	let actual = format(`
 		selector {
 			a { color:red }
 		}
 	`)
 	let expected = `selector {
-	a { color:red }
+	a {
+		color: red;
+	}
 }`
 	expect(actual).toEqual(expected)
 })
 
-test.skip('Relaxed nesting: formats nested rules with a selector without a &', () => {
+test('Relaxed nesting: formats nested rules with a selector without a &', () => {
 	let actual = format(`
 		selector {
 			a { color:red }
@@ -234,23 +238,7 @@ test.skip('Relaxed nesting: formats nested rules with a selector without a &', (
 	expect(actual).toEqual(expected)
 })
 
-test('[check broken test] Relaxed nesting: formats nested rules with a selector starting with a selector combinator', () => {
-	let actual = format(`
-		selector {
-			> a { color:red }
-			~ a { color:red }
-			+ a { color:red }
-		}
-	`)
-	let expected = `selector {
-	> a { color:red }
-			~ a { color:red }
-			+ a { color:red }
-}`
-	expect(actual).toEqual(expected)
-})
-
-test.skip('Relaxed nesting: formats nested rules with a selector starting with a selector combinator', () => {
+test('Relaxed nesting: formats nested rules with a selector starting with a selector combinator', () => {
 	let actual = format(`
 		selector {
 			> a { color:red }
@@ -285,3 +273,26 @@ test('handles syntax errors: premature closed block', () => {
 	let expected = 'a {\n\tmumblejumble: ;\n}'
 	expect(actual).toEqual(expected)
 })
+test('Relaxed nesting: formats nested rules with a selector starting with a selector combinator and &', () => {
+	let actual = format(`
+		selector {
+			& > a { color:red }
+			& ~ a { color:red }
+			& + a { color:red }
+		}
+	`)
+	let expected = `selector {
+	& > a {
+		color: red;
+	}
+
+	& ~ a {
+		color: red;
+	}
+
+	& + a {
+		color: red;
+	}
+}`
+	expect(actual).toEqual(expected)
+})

vite.config.js

@@ -13,7 +13,7 @@ export default defineConfig({
 		rollupOptions: {
 			// make sure to externalize deps that shouldn't be bundled
 			// into your library
-			external: ['css-tree'],
+			external: ['@eslint/css-tree'],
 		},
 	},
 	plugins: [