From c0bc56538a697937d81e7eebb57ac1888819fdd0 Mon Sep 17 00:00:00 2001
From: Roger Bongers <r.l.bongers@gmail.com>
Date: Fri, 4 Jun 2021 17:33:11 -0700
Subject: [PATCH] Remove hardcoded transform from float to cssFloat

The value should only be transformed if the raw value was also
"cssFloat". Otherwise, we should allow the user to use the "float"
keyword in the cases it is actually valid, which we can't easily detect.

Misuse of the keyword can be caught by Javascript code analysis tools.

Fixes: https://github.com/stylelint/stylelint/issues/4490
---
 object-stringifier.js |  4 ----
 test/css-in-js.js     | 29 ++++++++++++++++-------------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/object-stringifier.js b/object-stringifier.js
index 4c632e2..ad65ff6 100644
--- a/object-stringifier.js
+++ b/object-stringifier.js
@@ -26,10 +26,6 @@ class ObjectStringifier extends Stringifier {
 	decl(node, semicolon) {
 		let prop = this.rawValue(node, 'prop');
 
-		if (prop === 'float') {
-			prop = 'cssFloat';
-		}
-
 		let string = prop;
 
 		const isObjectShorthand = node.raws.node && node.raws.node.shorthand;
diff --git a/test/css-in-js.js b/test/css-in-js.js
index 24f5038..b76962c 100644
--- a/test/css-in-js.js
+++ b/test/css-in-js.js
@@ -128,7 +128,7 @@ describe('CSS in JS', () => {
 		`);
 	});
 
-	it('float', () => {
+	it('cssFloat', () => {
 		const code = `
 			import glm from 'glamorous';
 			const Component1 = glm.a({
@@ -148,21 +148,24 @@ describe('CSS in JS', () => {
 				cssFloat: "left",
 			});
 		`);
+	});
 
-		root.first.first.nodes = [
-			postcss.decl({
-				prop: 'float',
-				value: 'right',
-				raws: {
-					before: root.first.first.first.raws.before,
-				},
-			}),
-		];
+	it('float', () => {
+		const code = `
+			const component = styled(Btn)({
+				float: "left",
+			});
+		`;
+
+		const root = syntax.parse(code, {
+			from: '/fixtures/styled-float.jsx',
+		});
+
+		expect(root.first.first.first).toHaveProperty('prop', 'float');
 
 		expect(root.toString()).toBe(`
-			import glm from 'glamorous';
-			const Component1 = glm.a({
-				cssFloat: "right",
+			const component = styled(Btn)({
+				float: "left",
 			});
 		`);
 	});