fix casing issues in values/properties

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') {

test/declarations.js → 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();

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);
 });

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();