diff --git a/object-parser.js b/object-parser.js index bf58f8c..f38d60d 100644 --- a/object-parser.js +++ b/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; diff --git a/test/css-in-js.js b/test/css-in-js.js index 8f76db6..e920da2 100644 --- a/test/css-in-js.js +++ b/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 + ')"); }); }); diff --git a/test/fixtures/glamorous.jsx b/test/fixtures/glamorous.jsx index 520d683..7f33fdb 100644 --- a/test/fixtures/glamorous.jsx +++ b/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 diff --git a/test/fixtures/glamorous.jsx.json b/test/fixtures/glamorous.jsx.json index 2622a5a..8ce664f 100644 --- a/test/fixtures/glamorous.jsx.json +++ b/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": ": ",