diff --git a/js/src/css/beautifier.js b/js/src/css/beautifier.js index 5c0e393f5..8476e80c1 100644 --- a/js/src/css/beautifier.js +++ b/js/src/css/beautifier.js @@ -500,6 +500,18 @@ Beautifier.prototype.beautify = function() { } else { this._output.space_before_token = true; } + } else if ((this._ch === '>' || this._ch === '<') && parenLevel > 0 && this._input.peek() === '=') { + // Media query range operator: >= or <= + // Ensure a single space before and after the operator + this._output.space_before_token = true; + this.print_string(this._ch); + this._input.next(); // consume '=' + this.print_string('='); + this.eatWhitespace(); + this._output.space_before_token = true; + if (whitespaceChar.test(this._ch)) { + this._ch = ''; + } } else if ((this._ch === '>' || this._ch === '+' || this._ch === '~') && !insidePropertyValue && parenLevel === 0) { //handle combinator spacing if (this._options.space_around_combinator) { diff --git a/python/cssbeautifier/css/beautifier.py b/python/cssbeautifier/css/beautifier.py index 416335fac..616807470 100644 --- a/python/cssbeautifier/css/beautifier.py +++ b/python/cssbeautifier/css/beautifier.py @@ -511,6 +511,21 @@ def beautify(self): self._output.add_new_line() else: self._output.space_before_token = True + elif ( + (self._ch == ">" or self._ch == "<") + and parenLevel > 0 + and self._input.peek() == "=" + ): + # Media query range operator: >= or <= + # Ensure a single space before and after the operator + self._output.space_before_token = True + self.print_string(self._ch) + self._input.next() # consume '=' + self.print_string("=") + self.eatWhitespace() + self._output.space_before_token = True + if bool(whitespaceChar.search(self._ch)): + self._ch = "" elif ( (self._ch == ">" or self._ch == "+" or self._ch == "~") and not insidePropertyValue diff --git a/test/data/css/tests.js b/test/data/css/tests.js index ce5965d1c..5e78288b7 100644 --- a/test/data/css/tests.js +++ b/test/data/css/tests.js @@ -388,6 +388,24 @@ exports.test_data = { input: '@media print {.tab{}}', output: '@media print{{curly_separator}}{\n .tab{{curly_separator2}}{}\n}' }, + { + comment: 'Media query range operators should preserve spaces on both sides', + unchanged: '@media (width >= 90rem) {\n .foo {}\n}' + }, + { + comment: 'Media query range operators should preserve spaces on both sides', + unchanged: '@media (width <= 90rem) {\n .foo {}\n}' + }, + { + comment: 'Media query range operators - minified input should have spaces enforced around operator', + input: '@media (width>=90rem){.foo{}}', + output: '@media (width >= 90rem){{curly_separator}}{\n .foo{{curly_separator2}}{}\n}' + }, + { + comment: 'Media query range operators - minified input should have spaces enforced around operator', + input: '@media (width<=90rem){.foo{}}', + output: '@media (width <= 90rem){{curly_separator}}{\n .foo{{curly_separator2}}{}\n}' + }, { comment: 'This is bug #1489', input: '@media print {.tab,.bat{}}',