Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tests for preserving CSS comments #29

Merged
merged 2 commits into from
Feb 11, 2024
+178 −124
Merged

Add tests for preserving CSS comments #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fc39ee9
rm some unneeded code
Feb 11, 2024
2dfdf41
add tests for preserving comments
Feb 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions test/atrules.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { suite } from 'uvu'
import * as assert from 'uvu/assert'
import { format } from '../index.js'

let Atrules = suite('Atrules')
let test = suite('Atrules')

Atrules('AtRules start on a new line', () => {
test('AtRules start on a new line', () => {
let actual = format(`
@media (min-width: 1000px) {
selector { property: value; }
Expand All @@ -28,7 +28,7 @@ Atrules('AtRules start on a new line', () => {
assert.equal(actual, expected)
})

Atrules('Atrule blocks are surrounded by {} with correct spacing and indentation', () => {
test('Atrule blocks are surrounded by {} with correct spacing and indentation', () => {
let actual = format(`
@media (min-width:1000px){selector{property:value1}}

Expand All @@ -54,7 +54,7 @@ Atrules('Atrule blocks are surrounded by {} with correct spacing and indentation
assert.equal(actual, expected)
})

Atrules('AtRule prelude formatting', () => {
test('AtRule prelude formatting', () => {
let fixtures = [
[`@media all{}`, `@media all {}`],
[`@media all and print{}`, `@media all and print {}`],
Expand All @@ -77,7 +77,7 @@ Atrules('AtRule prelude formatting', () => {
}
})

Atrules('single empty line after a rule, before atrule', () => {
test('single empty line after a rule, before atrule', () => {
let actual = format(`
rule1 { property: value }
@media (min-width: 1000px) {
Expand All @@ -96,7 +96,7 @@ Atrules('single empty line after a rule, before atrule', () => {
assert.equal(actual, expected)
})

Atrules('single empty line in between atrules', () => {
test('single empty line in between atrules', () => {
let actual = format(`
@layer test1;
@media (min-width: 1000px) {
Expand All @@ -113,7 +113,7 @@ Atrules('single empty line in between atrules', () => {
assert.equal(actual, expected)
})

Atrules('newline between last declaration and nested atrule', () => {
test('newline between last declaration and nested atrule', () => {
let actual = format(`
test {
property1: value1;
Expand All @@ -132,19 +132,19 @@ Atrules('newline between last declaration and nested atrule', () => {
assert.equal(actual, expected)
})

Atrules('lowercases the atrule name', () => {
test('lowercases the atrule name', () => {
let actual = format(`@LAYER test {}`)
let expected = `@layer test {}`
assert.is(actual, expected)
})

Atrules('does not lowercase the atrule value', () => {
test('does not lowercase the atrule value', () => {
let actual = format('@keyframes TEST {}')
let expected = '@keyframes TEST {}'
assert.is(actual, expected)
})

Atrules('Atrules w/o Block are terminated with a semicolon', () => {
test('Atrules w/o Block are terminated with a semicolon', () => {
let actual = format(`
@layer test;
@import url('test');
Expand All @@ -155,7 +155,7 @@ Atrules('Atrules w/o Block are terminated with a semicolon', () => {
assert.is(actual, expected)
})

Atrules('Empty atrule braces are placed on the same line', () => {
test('Empty atrule braces are placed on the same line', () => {
let actual = format(`@media all {

}
Expand All @@ -167,7 +167,7 @@ Atrules('Empty atrule braces are placed on the same line', () => {
assert.is(actual, expected)
})

Atrules('new-fangled comparators (width > 1000px)', () => {
test('new-fangled comparators (width > 1000px)', () => {
let actual = format(`
@container (width>1000px) {}
@media (width>1000px) {}
Expand All @@ -187,7 +187,7 @@ Atrules('new-fangled comparators (width > 1000px)', () => {
assert.is(actual, expected)
})

Atrules.skip('preserves comments', () => {
test.skip('preserves comments', () => {
let actual = format(`
@media /* comment */ all {}
@media all /* comment */ {}
Expand All @@ -208,4 +208,4 @@ Atrules.skip('preserves comments', () => {
assert.is(actual, expected)
})

Atrules.run();
test.run();
117 changes: 117 additions & 0 deletions test/comments.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import { suite } from "uvu"
import * as assert from "uvu/assert"
import { format } from "../index.js"

let test = suite("Comments")

test.skip('regular comment before rule', () => {
let actual = format(`
/* comment */
selector {}
`)
let expected = `/* comment */

selector {}`
assert.is(actual, expected)
})

test('bang comment before rule', () => {
let actual = format(`
/*! comment */
selector {}
`)
let expected = `/*! comment */

selector {}`
assert.is(actual, expected)
})

test('in @media prelude', () => {
// from CSSTree https://github.com/csstree/csstree/blob/ba6dfd8bb0e33055c05f13803d04825d98dd2d8d/fixtures/ast/mediaQuery/MediaQuery.json#L147
let actual = format('@media all /*0*/ (/*1*/foo/*2*/:/*3*/1/*4*/) {}')
let expected = '@media all /*0*/ (/*1*/foo/*2*/: /*3*/1/*4*/) {}'
assert.is(actual, expected)
})

test('in @supports prelude', () => {
// from CSSTree https://github.com/csstree/csstree/blob/ba6dfd8bb0e33055c05f13803d04825d98dd2d8d/fixtures/ast/atrule/atrule/supports.json#L119
let actual = format('@supports not /*0*/(/*1*/flex :/*3*/1/*4*/)/*5*/{}')
let expected = '@supports not /*0*/(/*1*/flex: /*3*/1/*4*/)/*5*/ {}'
assert.is(actual, expected)
})

test.skip('in @import prelude', () => {
let actual = format('@import /*test*/"foo"/*test*/;')
let expected = '@import /*test*/"foo"/*test*/;'
assert.is(actual, expected)
})

test.skip('in selector combinator', () => {
let actual = format(`
a/*test*/ /*test*/b,
a/*test*/+/*test*/b {}
`)
let expected = `a/*test*/ /*test*/b,
a /*test*/ + /*test*/ b {}`
assert.is(actual, expected)
})

test('in attribute selector', () => {
let actual = format(`[/*test*/a/*test*/=/*test*/'b'/*test*/i/*test*/]`)
let expected = `[/*test*/a/*test*/=/*test*/'b'/*test*/i/*test*/]`
assert.is(actual, expected)
})

test.skip('in var() with fallback', () => {
let actual = format(`a { prop: var( /* 1 */ --name /* 2 */ , /* 3 */ ) }`)
let expected = `a {
prop: var(/* 1 */ --name /* 2 */, /* 3 */ );
}`
assert.is(actual, expected)
})

test.skip('in custom property declaration', () => {
let actual = format(`a { --test: /*test*/; }`)
let expected = `a {
--test: /*test*/;
}`
assert.is(actual, expected)
})

test.skip('before value', () => {
let actual = format(`a { prop: /*test*/value; }`)
let expected = `a {
prop: /*test*/value;
}`
assert.is(actual, expected)
})

test.skip('after value', () => {
let actual = format(`a {
prop: value/*test*/;
}`)
let expected = `a {
prop: value/*test*/;
}`
assert.is(actual, expected)
})

test.skip('in value functions', () => {
let actual = format(`
a {
background-image: linear-gradient(/* comment */red, green);
background-image: linear-gradient(red/* comment */, green);
background-image: linear-gradient(red, green/* comment */);
background-image: linear-gradient(red, green)/* comment */
}
`)
let expected = `a {
background-image: linear-gradient(/* comment */red, green);
background-image: linear-gradient(red/* comment */, green);
background-image: linear-gradient(red, green/* comment */);
background-image: linear-gradient(red, green)/* comment */
}`
assert.is(actual, expected)
})

test.run()
12 changes: 6 additions & 6 deletions test/declarations.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { suite } from "uvu";
import * as assert from "uvu/assert";
import { format } from "../index.js";

let Declarations = suite("Declarations");
let test = suite("Declarations");

Declarations("Declarations end with a semicolon (;)", () => {
test("Declarations end with a semicolon (;)", () => {
let actual = format(`
@font-face {
src: url('test');
Expand Down Expand Up @@ -55,15 +55,15 @@ css {
assert.equal(actual, expected);
});

Declarations("lowercases properties", () => {
test("lowercases properties", () => {
let actual = format(`a { COLOR: green }`);
let expected = `a {
color: green;
}`;
assert.is(actual, expected);
});

Declarations('does not lowercase custom properties', () => {
test('does not lowercase custom properties', () => {
let actual = format(`a {
--myVar: 1;
}`)
Expand All @@ -73,7 +73,7 @@ Declarations('does not lowercase custom properties', () => {
assert.is(actual, expected)
})

Declarations.skip('preserves comments', () => {
test.skip('preserves comments', () => {
let actual = format(`a {
/* comment */color: green;
color/* comment */: green;
Expand All @@ -85,4 +85,4 @@ Declarations.skip('preserves comments', () => {
assert.is(actual, expected)
})

Declarations.run();
test.run();
28 changes: 14 additions & 14 deletions test/rules.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { suite } from "uvu";
import * as assert from "uvu/assert";
import { format } from "../index.js";

let Rules = suite("Rules");
let test = suite("Rules");

Rules("AtRules and Rules start on a new line", () => {
test("AtRules and Rules start on a new line", () => {
let actual = format(`
selector { property: value; }
@media (min-width: 1000px) {
Expand Down Expand Up @@ -38,7 +38,7 @@ selector {
assert.equal(actual, expected);
});

Rules("An empty line is rendered in between Rules", () => {
test("An empty line is rendered in between Rules", () => {
let actual = format(`
rule1 { property: value }
rule2 { property: value }
Expand All @@ -53,7 +53,7 @@ rule2 {
assert.equal(actual, expected);
});

Rules("single empty line after a rule, before atrule", () => {
test("single empty line after a rule, before atrule", () => {
let actual = format(`
rule1 { property: value }
@media (min-width: 1000px) {
Expand All @@ -72,7 +72,7 @@ Rules("single empty line after a rule, before atrule", () => {
assert.equal(actual, expected);
});

Rules("newline between last declaration and nested ruleset", () => {
test("newline between last declaration and nested ruleset", () => {
let actual = format(`
test {
property1: value1;
Expand All @@ -98,7 +98,7 @@ Rules("newline between last declaration and nested ruleset", () => {
assert.equal(actual, expected);
});

Rules("newline between last declaration and nested atrule", () => {
test("newline between last declaration and nested atrule", () => {
let actual = format(`
test {
property1: value1;
Expand All @@ -117,7 +117,7 @@ Rules("newline between last declaration and nested atrule", () => {
assert.equal(actual, expected);
});

Rules("no trailing newline on empty nested rule", () => {
test("no trailing newline on empty nested rule", () => {
let actual = format(`
@layer test {
empty {}
Expand All @@ -129,13 +129,13 @@ Rules("no trailing newline on empty nested rule", () => {
assert.equal(actual, expected);
});

Rules("formats Raw rule prelude", () => {
test("formats Raw rule prelude", () => {
let actual = format(`:lang("nl","de"),li:nth-child() {}`);
let expected = `:lang("nl","de"),li:nth-child() {}`; // no formatting applied
assert.equal(actual, expected);
});

Rules('formats nested rules with selectors starting with', () => {
test('formats nested rules with selectors starting with', () => {
let actual = format(`
selector {
& > item {
Expand All @@ -151,7 +151,7 @@ Rules('formats nested rules with selectors starting with', () => {
assert.equal(actual, expected);
})

Rules("formats nested rules with a selector starting with &", () => {
test("formats nested rules with a selector starting with &", () => {
let actual = format(`
selector {
& a { color: red; }
Expand All @@ -165,7 +165,7 @@ Rules("formats nested rules with a selector starting with &", () => {
assert.equal(actual, expected);
})

Rules.skip("Relaxed nesting: formats nested rules with a selector with a &", () => {
test.skip("Relaxed nesting: formats nested rules with a selector with a &", () => {
let actual = format(`
selector {
a & { color:red }
Expand All @@ -179,7 +179,7 @@ Rules.skip("Relaxed nesting: formats nested rules with a selector with a &", ()
assert.equal(actual, expected);
})

Rules.skip("Relaxed nesting: formats nested rules with a selector without a &", () => {
test.skip("Relaxed nesting: formats nested rules with a selector without a &", () => {
let actual = format(`
selector {
a { color:red }
Expand All @@ -193,7 +193,7 @@ Rules.skip("Relaxed nesting: formats nested rules with a selector without a &",
assert.equal(actual, expected);
})

Rules.skip("Relaxed nesting: formats nested rules with a selector starting with a selector combinator", () => {
test.skip("Relaxed nesting: formats nested rules with a selector starting with a selector combinator", () => {
let actual = format(`
selector {
> a { color:red }
Expand All @@ -217,4 +217,4 @@ Rules.skip("Relaxed nesting: formats nested rules with a selector starting with
assert.equal(actual, expected);
})

Rules.run();
test.run();
Loading
Loading