Merge pull request stylelint#41 from stylelint/at-rule-param-case

Author: bartlangelaan

object-parser.js

@@ -11,11 +11,6 @@ function forEach(arr, callback) {
 	arr && arr.forEach(callback);
 }
 
-const replaceProp = (fn) => (value) =>
-	value.replace(/(\(\s*)(.*?)(\s*:)/g, (s, prefix, prop, suffix) => prefix + fn(prop) + suffix);
-const camelCaseProp = replaceProp(camelCase);
-const unCamelCaseProp = replaceProp(unCamelCase);
-
 function defineRaws(node, prop, prefix, suffix, props) {
 	if (!props) {
 		props = {};
@@ -239,16 +234,8 @@ class objectParser {
 				});
 
 				if (params) {
-					atRule.params = unCamelCaseProp(params);
-					defineRaws(atRule, 'params', '', key.suffix, {
-						raw: {
-							enumerable: true,
-							get: () => camelCaseProp(atRule.params),
-							set: (value) => {
-								atRule.params = unCamelCaseProp(value);
-							},
-						},
-					});
+					atRule.params = params;
+					defineRaws(atRule, 'params', '', key.suffix);
 				}
 
 				rule = atRule;

test/css-in-js.js

@@ -50,6 +50,26 @@ describe('CSS in JS', () => {
 			});
 	});
 
+	it('leaves kebab-case and camelCase in media query params untouched', () => {
+		// In previous versions, at-rule properties were converted from camelCase to kebab-case
+		// during parsing, and back to camelCase during stringifying. This is however not correct,
+		// params should not be changed. Also see:
+		// https://github.com/stylelint/postcss-css-in-js/issues/38
+		const code = `
+		import glm from 'glamorous';
+		const Component1 = glm.a({
+			"@media (max-width: 1000px)": {
+				color: "red",
+			},
+			"@media (maxWidth: 1000px)": {
+				color: "red",
+			},
+		});
+		`;
+
+		expect(syntax.parse(code).toString()).toBe(code);
+	});
+
 	describe('setter for object literals', () => {
 		it('decl.raws.prop.raw & decl.raws.value.raw', () => {
 			const decl = syntax.parse(
@@ -74,7 +94,7 @@ describe('CSS in JS', () => {
 				`
 				import glm from 'glamorous';
 				const Component1 = glm.a({
-					'@media (maxWidth: 500px)': {
+					'@media (max-width: 500px)': {
 						borderRadius: '5px'
 					}
 				});
@@ -84,7 +104,7 @@ describe('CSS in JS', () => {
 				},
 			).first.first.first;
 
-			atRule.raws.params.raw = "(minWidth: ' + minWidth + ')";
+			atRule.raws.params.raw = "(min-width: ' + minWidth + ')";
 			expect(atRule.params).toBe("(min-width: ' + minWidth + ')");
 		});
 	});

test/fixtures/glamorous.jsx

@@ -11,7 +11,7 @@ const Component1 = glm.a(
 		[`unknownPropertyaa${a}`]: "1.8em", // must not trigger any warnings
 		["unknownProperty" + 1 + "a"]: "1.8em", // must not trigger any warnings
 		display: "inline-block",
-		[`@media (minWidth: ${minWidth}px)`]: {
+		[`@media (min-width: ${minWidth}px)`]: {
 			color: "red",
 		},
 		// unkown pseudo class selector

test/fixtures/glamorous.jsx.json

@@ -346,7 +346,7 @@
 								"params": {
 									"prefix": "",
 									"suffix": "`]",
-									"raw": "(minWidth: ${minWidth}px)",
+									"raw": "(min-width: ${minWidth}px)",
 									"value": "(min-width: ${minWidth}px)"
 								},
 								"between": ": ",