diff --git a/test/atrules.test.js b/test/atrules.test.js index fd24ed1..23d9709 100644 --- a/test/atrules.test.js +++ b/test/atrules.test.js @@ -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; } @@ -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}} @@ -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 {}`], @@ -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) { @@ -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) { @@ -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; @@ -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'); @@ -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 { } @@ -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) {} @@ -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 */ {} @@ -208,4 +208,4 @@ Atrules.skip('preserves comments', () => { assert.is(actual, expected) }) -Atrules.run(); \ No newline at end of file +test.run(); \ No newline at end of file diff --git a/test/comments.test.js b/test/comments.test.js new file mode 100644 index 0000000..3d49cea --- /dev/null +++ b/test/comments.test.js @@ -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() diff --git a/test/declarations.test.js b/test/declarations.test.js index c4f748d..6e1b8ef 100644 --- a/test/declarations.test.js +++ b/test/declarations.test.js @@ -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'); @@ -55,7 +55,7 @@ css { assert.equal(actual, expected); }); -Declarations("lowercases properties", () => { +test("lowercases properties", () => { let actual = format(`a { COLOR: green }`); let expected = `a { color: green; @@ -63,7 +63,7 @@ Declarations("lowercases properties", () => { assert.is(actual, expected); }); -Declarations('does not lowercase custom properties', () => { +test('does not lowercase custom properties', () => { let actual = format(`a { --myVar: 1; }`) @@ -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; @@ -85,4 +85,4 @@ Declarations.skip('preserves comments', () => { assert.is(actual, expected) }) -Declarations.run(); +test.run(); diff --git a/test/rules.test.js b/test/rules.test.js index 71cd98c..b9f209e 100644 --- a/test/rules.test.js +++ b/test/rules.test.js @@ -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) { @@ -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 } @@ -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) { @@ -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; @@ -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; @@ -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 {} @@ -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 { @@ -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; } @@ -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 } @@ -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 } @@ -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 } @@ -217,4 +217,4 @@ Rules.skip("Relaxed nesting: formats nested rules with a selector starting with assert.equal(actual, expected); }) -Rules.run(); +test.run(); diff --git a/test/selectors.test.js b/test/selectors.test.js index f662f93..ea42933 100644 --- a/test/selectors.test.js +++ b/test/selectors.test.js @@ -2,15 +2,15 @@ import { suite } from "uvu"; import * as assert from "uvu/assert"; import { format } from "../index.js"; -let Selectors = suite("Selectors"); +let test = suite("Selectors"); -Selectors("A single selector is rendered without a trailing comma", () => { +test("A single selector is rendered without a trailing comma", () => { let actual = format("a {}"); let expected = "a {}"; assert.is(actual, expected); }); -Selectors( +test( "Multiple selectors are placed on a new line, separated by commas", () => { let actual = format(` @@ -34,7 +34,7 @@ selector3 {}`; } ); -Selectors("formats multiline selectors on a single line", () => { +test("formats multiline selectors on a single line", () => { let actual = format(` a.b .c .d @@ -47,7 +47,7 @@ color: green } assert.equal(actual, expected); }); -Selectors("formats simple selector combinators", () => { +test("formats simple selector combinators", () => { let actual = format(` a>b, a>b~c d {} @@ -57,7 +57,7 @@ a > b ~ c d {}`; assert.equal(actual, expected); }); -Selectors("formats nested selector combinators", () => { +test("formats nested selector combinators", () => { let fixtures = [ [`:where(a+b) {}`, `:where(a + b) {}`], [`:where(:is(ol,ul)) {}`, `:where(:is(ol, ul)) {}`], @@ -71,7 +71,7 @@ Selectors("formats nested selector combinators", () => { } }); -Selectors("formats selectors with Nth", () => { +test("formats selectors with Nth", () => { let fixtures = [ [`li:nth-child(3n-2) {}`, `li:nth-child(3n -2) {}`], [`li:nth-child(0n+1) {}`, `li:nth-child(0n + 1) {}`], @@ -94,4 +94,4 @@ Selectors("formats selectors with Nth", () => { } }); -Selectors.run(); +test.run(); diff --git a/test/test.js b/test/test.js index d9b3c10..b9d9ced 100644 --- a/test/test.js +++ b/test/test.js @@ -2,60 +2,19 @@ import { suite } from "uvu"; import * as assert from "uvu/assert"; import { format } from "../index.js"; -let Stylesheet = suite("Stylesheet"); +let test = suite("Stylesheet"); -Stylesheet("empty input", () => { +test("empty input", () => { let actual = format(``); let expected = ``; assert.equal(actual, expected); }); -Stylesheet('handles invalid input', () => { +test('handles invalid input', () => { let actual = format(`;`) let expected = `;` assert.equal(actual, expected) }) -Stylesheet("handles comments", () => { - let actual = format(` -.async-hide { - opacity: 0; -} - -/*! - * Library vx.x.x (http://css-lib.com) - * Copyright 1970-1800 CSS Inc. - * Licensed under MIT (https://example.com) - */ - -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ - -html /* comment */ { - font-family /* comment */ : /* comment */ sans-serif; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - `); - let expected = `.async-hide { - opacity: 0; -} - -/*! - * Library vx.x.x (http://css-lib.com) - * Copyright 1970-1800 CSS Inc. - * Licensed under MIT (https://example.com) - */ - -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ - -html { - font-family: sans-serif; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -}`; - - assert.equal(actual, expected); -}); - -Stylesheet.run(); +test.run(); diff --git a/test/values.test.js b/test/values.test.js index 81213b9..426b36c 100644 --- a/test/values.test.js +++ b/test/values.test.js @@ -2,9 +2,9 @@ import { suite } from "uvu"; import * as assert from "uvu/assert"; import { format } from "../index.js"; -let Values = suite("Values"); +let test = suite("Values"); -Values('collapses abundant whitespace', () => { +test('collapses abundant whitespace', () => { let actual = format(`a { transition: all 100ms ease; color: rgb( 0 , 0 , 0 ); @@ -16,7 +16,7 @@ Values('collapses abundant whitespace', () => { assert.is(actual, expected) }) -Values("formats simple value lists", () => { +test("formats simple value lists", () => { let actual = format(` a { transition-property: all,opacity; @@ -40,7 +40,7 @@ Values("formats simple value lists", () => { assert.equal(actual, expected); }); -Values("formats nested value lists", () => { +test("formats nested value lists", () => { let actual = format(` a { background: red,linear-gradient(to bottom,red 10%,green 50%,blue 100%); @@ -52,7 +52,7 @@ Values("formats nested value lists", () => { assert.equal(actual, expected); }); -Values("formats nested var()", () => { +test("formats nested var()", () => { let actual = format(` a { color: var(--test1,var(--test2,green)); @@ -66,7 +66,7 @@ Values("formats nested var()", () => { assert.equal(actual, expected); }); -Values("formats multiline values on a single line", () => { +test("formats multiline values on a single line", () => { let actual = format(` a { background: linear-gradient( @@ -81,7 +81,7 @@ a { assert.equal(actual, expected); }); -Values('does not break font shorthand', () => { +test('does not break font shorthand', () => { let actual = format(`a { font: 2em/2 sans-serif; font: 2em/ 2 sans-serif; @@ -95,7 +95,7 @@ Values('does not break font shorthand', () => { assert.is(actual, expected) }) -Values('formats whitespace around operators (*/+-) correctly', () => { +test('formats whitespace around operators (*/+-) correctly', () => { let actual = format(`a { font: 2em/2 sans-serif; font-size: calc(2em/2); @@ -109,7 +109,7 @@ Values('formats whitespace around operators (*/+-) correctly', () => { assert.is(actual, expected) }) -Values('does not lowercase grid-area names', () => { +test('does not lowercase grid-area names', () => { let actual = format(`a { grid-area: emailInputBox; }`) let expected = `a { grid-area: emailInputBox; @@ -117,7 +117,7 @@ Values('does not lowercase grid-area names', () => { assert.is(actual, expected) }) -Values('does not lowercase custom properties in var()', () => { +test('does not lowercase custom properties in var()', () => { let actual = format(`a { color: var(--MyColor); }`) let expected = `a { color: var(--MyColor); @@ -125,7 +125,7 @@ Values('does not lowercase custom properties in var()', () => { assert.is(actual, expected) }) -Values('lowercases CSS functions', () => { +test('lowercases CSS functions', () => { let actual = format(`a { color: RGB(0, 0, 0); transform: translateX(100px); @@ -137,7 +137,7 @@ Values('lowercases CSS functions', () => { assert.is(actual, expected) }) -Values('does not change casing of `NaN`', () => { +test('does not change casing of `NaN`', () => { let actual = format(`a { height: calc(1 * NaN); }`) @@ -147,7 +147,7 @@ Values('does not change casing of `NaN`', () => { assert.is(actual, expected) }) -Values('does not change casing of URLs', () => { +test('does not change casing of URLs', () => { let actual = format(`a { background-image: url("My-Url.png"); }`) @@ -157,7 +157,7 @@ Values('does not change casing of URLs', () => { assert.is(actual, expected) }) -Values('lowercases dimensions', () => { +test('lowercases dimensions', () => { let actual = format(`a { font-size: 12PX; width: var(--test, 33REM); @@ -169,26 +169,4 @@ Values('lowercases dimensions', () => { assert.is(actual, expected) }) -Values.skip('preserves comments', () => { - let actual = format(` - a { - color: /** comment */red; - color: red/* comment */; - 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 { - color: /* comment */red; - color: red/* comment */; - 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) -}) - -Values.run(); +test.run();