diff --git a/index.js b/index.js index 03653c7..d0c1c44 100644 --- a/index.js +++ b/index.js @@ -283,7 +283,12 @@ function print_prelude(node, indent_level, css) { * @returns {string} A formatted Declaration */ function print_declaration(node, indent_level, css) { - let property = node.property.toLowerCase() + let property = node.property + + if (!property.startsWith('--')) { + property = property.toLowerCase() + } + let value = print_value(node.value, indent_level, css).trim() // Special case for `font` shorthand: remove whitespace around / @@ -308,8 +313,7 @@ function print_list(children, indent_level, css) { } if (node.type === 'Identifier') { - // TODO: new CSS keywork NaN should not be lowercased - buffer += node.name.toLowerCase() + buffer += node.name } else if (node.type === 'Function') { buffer += print_function(node, 0, css) } else if (node.type === 'Dimension') { diff --git a/test/declarations.js b/test/declarations.test.js similarity index 83% rename from test/declarations.js rename to test/declarations.test.js index 9598386..d58981e 100644 --- a/test/declarations.js +++ b/test/declarations.test.js @@ -31,7 +31,7 @@ Declarations("Declarations end with a semicolon (;)", () => { `); let expected = `@font-face { src: url('test'); - font-family: test; + font-family: Test; } css { @@ -63,4 +63,14 @@ Declarations("lowercases properties", () => { assert.is(actual, expected); }); +Declarations('does not lowercase custom properties', () => { + let actual = format(`a { + --myVar: 1; + }`) + let expected = `a { + --myVar: 1; +}` + assert.is(actual, expected) +}) + Declarations.run(); diff --git a/test/test.js b/test/test.js index e934b0d..6774c1a 100644 --- a/test/test.js +++ b/test/test.js @@ -5,7 +5,7 @@ import { format } from "../index.js"; let Stylesheet = suite("Stylesheet"); Stylesheet("empty input", () => { - let actual = format(` `); + let actual = format(``); let expected = ``; assert.equal(actual, expected); }); diff --git a/test/values.test.js b/test/values.test.js index 2d8d216..c76bcfe 100644 --- a/test/values.test.js +++ b/test/values.test.js @@ -4,24 +4,6 @@ import { format } from "../index.js"; let Values = suite("Values"); -Values('lowercases things', () => { - let actual = format(` - a { - ANIMATION: COLOR 123MS EASE-OUT; - color: HSL(0%,10%,50%); - content: 'Test'; - background-image: url("EXAMPLE.COM"); - } - `); - let expected = `a { - animation: color 123ms ease-out; - color: hsl(0%, 10%, 50%); - content: 'Test'; - background-image: url("EXAMPLE.COM"); -}`; - assert.equal(actual, expected); -}) - Values('collapses abundant whitespace', () => { let actual = format(`a { transition: all 100ms ease; @@ -49,7 +31,7 @@ Values("formats simple value lists", () => { let expected = `a { transition-property: all, opacity; transition: all 100ms ease, opacity 10ms 20ms linear; - animation: color 123ms ease-out; + animation: COLOR 123ms EASE-OUT; color: rgb(0, 0, 0); color: hsl(0%, 10%, 50%); content: 'Test'; @@ -127,4 +109,64 @@ Values('formats whitespace around operators (*/+-) correctly', () => { assert.is(actual, expected) }) +Values('does not lowercase grid-area names', () => { + let actual = format(`a { grid-area: emailInputBox; }`) + let expected = `a { + grid-area: emailInputBox; +}` + assert.is(actual, expected) +}) + +Values('does not lowercase custom properties in var()', () => { + let actual = format(`a { color: var(--MyColor); }`) + let expected = `a { + color: var(--MyColor); +}` + assert.is(actual, expected) +}) + +Values('lowercases CSS functions', () => { + let actual = format(`a { + color: RGB(0, 0, 0); + transform: translateX(100px); + }`) + let expected = `a { + color: rgb(0, 0, 0); + transform: translatex(100px); +}` + assert.is(actual, expected) +}) + +Values('does not change casing of `NaN`', () => { + let actual = format(`a { + height: calc(1 * NaN); + }`) + let expected = `a { + height: calc(1 * NaN); +}` + assert.is(actual, expected) +}) + +Values('does not change casing of URLs', () => { + let actual = format(`a { + background-image: url("My-Url.png"); + }`) + let expected = `a { + background-image: url("My-Url.png"); +}` + assert.is(actual, expected) +}) + +Values('lowercases dimensions', () => { + let actual = format(`a { + font-size: 12PX; + width: var(--test, 33REM); + }`) + let expected = `a { + font-size: 12px; + width: var(--test, 33rem); +}` + assert.is(actual, expected) +}) + Values.run();