additional tests for combinators and exotic syntax

test/selectors.test.js

@@ -1,14 +1,14 @@
-import { suite } from "uvu";
-import * as assert from "uvu/assert";
-import { format } from "../index.js";
+import { suite } from "uvu"
+import * as assert from "uvu/assert"
+import { format } from "../index.js"
 
-let test = suite("Selectors");
+let test = suite("Selectors")
 
 test("A single selector is rendered without a trailing comma", () => {
-	let actual = format("a {}");
+	let actual = format("a {}")
 	let expected = "a {}";
-	assert.is(actual, expected);
-});
+	assert.is(actual, expected)
+})
 
 test(
 	"Multiple selectors are placed on a new line, separated by commas",
@@ -22,40 +22,42 @@ test(
 
 		selector3 {
 		}
-	`);
+	`)
 		let expected = `selector1,
 selector1a,
 selector1b,
 selector1aa,
 selector2,
 selector3 {}`;
 
-		assert.equal(actual, expected);
+		assert.equal(actual, expected)
 	}
-);
+)
 
 test("formats multiline selectors on a single line", () => {
 	let actual = format(`
 a.b
  .c .d
    .e .f {
 color: green }
-	`);
+	`)
 	let expected = `a.b .c .d .e .f {
 	color: green;
 }`;
-	assert.equal(actual, expected);
-});
+	assert.equal(actual, expected)
+})
 
 test("formats simple selector combinators", () => {
 	let actual = format(`
 		a>b,
-		a>b~c  d {}
-	`);
+		a>b~c  d,
+		.article-content ol li>* {}
+	`)
 	let expected = `a > b,
-a > b ~ c d {}`;
-	assert.equal(actual, expected);
-});
+a > b ~ c d,
+.article-content ol li > * {}`;
+	assert.equal(actual, expected)
+})
 
 test("formats nested selector combinators", () => {
 	let fixtures = [
@@ -66,10 +68,10 @@ test("formats nested selector combinators", () => {
 	];
 
 	for (let [css, expected] of fixtures) {
-		let actual = format(css);
-		assert.equal(actual, expected);
+		let actual = format(css)
+		assert.equal(actual, expected)
 	}
-});
+})
 
 test("formats selectors with Nth", () => {
 	let fixtures = [
@@ -89,9 +91,9 @@ test("formats selectors with Nth", () => {
 	];
 
 	for (let [css, expected] of fixtures) {
-		let actual = format(css);
-		assert.equal(actual, expected);
+		let actual = format(css)
+		assert.equal(actual, expected)
 	}
-});
+})
 
-test.run();
+test.run()

test/test.js

@@ -1,13 +1,13 @@
-import { suite } from "uvu";
-import * as assert from "uvu/assert";
-import { format } from "../index.js";
+import { suite } from "uvu"
+import * as assert from "uvu/assert"
+import { format } from "../index.js"
 
-let test = suite("Stylesheet");
+let test = suite("Stylesheet")
 
 test("empty input", () => {
-	let actual = format(``);
-	let expected = ``;
-	assert.equal(actual, expected);
+	let actual = format(``)
+	let expected = ``
+	assert.equal(actual, expected)
 });
 
 test('handles invalid input', () => {
@@ -17,4 +17,47 @@ test('handles invalid input', () => {
 	assert.equal(actual, expected)
 })
 
-test.run();
+test('Vadim Makeevs example works', () => {
+	let actual = format(`
+	@layer what {
+		@container (width > 0) {
+			ul:has(:nth-child(1 of li)) {
+				@media (height > 0) {
+					&:hover {
+						--is: this;
+					}
+				}
+			}
+		}
+	}
+	`)
+	let expected = `@layer what {
+	@container (width > 0) {
+		ul:has(:nth-child(1 of li)) {
+			@media (height > 0) {
+				&:hover {
+					--is: this;
+				}
+			}
+		}
+	}
+}`
+	assert.equal(actual, expected)
+})
+
+test('minified Vadims example', () => {
+	let actual = format(`@layer what{@container (width>0){@media (min-height:.001px){ul:has(:nth-child(1 of li)):hover{--is:this}}}}`)
+
+	let expected = `@layer what {
+	@container (width > 0) {
+		@media (min-height: .001px) {
+			ul:has(:nth-child(1 of li)):hover {
+				--is: this;
+			}
+		}
+	}
+}`
+	assert.equal(actual, expected)
+})
+
+test.run()