Unable to use <= and >= in media queries

[ikno1]

Hi, not a real question but more of a bug report. Maybe the question is if I can report this to the proper channels somewhere.

If I use '<=' and '>=' in my media queries like '@media (width >= 1250px)' I get errors in the author environment:

Store "granite.emulators" (
function l(e, g) ) could not be initialized: TypeError: can't access property 1, Y is null
expressions http://localhost:4502/etc/cloudsettings.kernel.js/libs/settings/cloudsettings/legacy/contexthub:743

Uncaught TypeError: can't access property 1, matches is null
expressions http://localhost:4502/libs/granite/author/deviceemulator/clientlibs.min.34b8020348797d659015c4aa7ec9...

I've traced it to the 'parseMediaRule' function in /libs/granite/author/deviceemulator/clientlibs/src/MediaEmulator.parser.js

My AEM version is 6.5.23.0

[Bhuwan_B]

It seems, the emulator parser hasn't been updated to recognize modern syntax(Media Queries Level 4). Try with legacy equivalents.

@media (width >= 1250px)  - @media (min-width: 1250px)

@media (width <= 768px) - @media (max-width: 768px)

Parser File in AEM: /libs/granite/author/deviceemulator/clientlibs/src/MediaEmulator.parser.js
AEM's MediaEmulator.parser.js uses a regex pattern that explicitly requires a colon separating the feature from the value:
REGEX_MQ_EXPRESSION = /^\(\s*([_a-z-][_a-z0-9-]*)\s*(?:\:\s*([^\)]+))?\s*\)$/ (Line 21)
Legacy syntax (works): (min-width: 768px) ← Has colon

[PGURUKRISHNA]

Hi @ikno1 Workaround:
Until this is fixed, you can use the legacy media query syntax:

/* Instead of: @media (width >= 1250px) */
@media (min-width: 1250px) {
/* your styles */
}

/* Instead of: @media (width <= 1250px) */
@media (max-width: 1250px) {
/* your styles */
}