The problem

What causes this issue is the lack of matchMedia on the server. Since a media query string cannot be attempted to match (event against hard-coded window resolution—default breakpoint), there is no point of composing the media query string. Simple match of breakpoint.isDefault is not enough (see the issue's description).

Solution 1: Custom matchMedia

I think it would be great to have a single logic that asserts whether a breakpoint matches the screen. It can be an actual window (during runtime), or a hard-coded window-like object (dimensions only) for server-side. Since such solution is in-house, it could be fine grained towards specific requirements and needs. For example, such media matcher would accept a breakpoint Object, instead of a string, because that's how breakpoint data is stored in Atomic Layout. Compiling it back to string to parse into Object again would be an overkill.

The culprit here is the assertion of non-dimensional properties: aspect ratio (can be derived from dimensions), screen resolution, orientation, etc. Those are quite hard to reliably assert on a non-client environment with an imitated window object.

Certain breakpoint-related data can be assumed:

• Aspect Ratio: derive from height and width
• Orientation: Assume portrait
• Resolution: Assume the default resolution

Solution 2: Direct area record analyzis

This is rather unusual, but pretty much any declarations of a single responsive prop can be represented in a "record", currently used for areas representation and responsive rendering analyzis:

It's possible to compile a prop info into this kind of format, but I doubt it's necessary.

@ruhaise, in the end I followed a similar approach you've introduced when tackling #281. Only instead of match-media-mock I've decided to write a custom matcher function that would integrate with data structures Atomic Layout uses. The work is in progress.