Updates media query generator function to use CSS range syntax

[SohamPatel46]

Summary

Fixes #1696

Relevant technical choices

Using CSS range syntax helps eliminate frontend issues where windows are sized sub-pixel dimensions.

This converts media queries from

@media (min-width: 481px) and (max-width: 600px) { 
    #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 400px; } 
}

to

@media (480px < width <= 600px) { 
    #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 400px; } 
}

The above conversion results in eliminating sub-pixel dimension issues possible between 600px to 601px screen.

[westonruter]

Here's a script you can use to update the snapshots once the actual.html files have been generated:

#!/bin/bash
for actual in $( find . -name 'actual.html' ); do
	expected=${actual/actual/expected};
	echo "$actual => $expected"
	mv "$actual" "$expected"
done

There should probably be something like this added to scripts in package.json.

[SohamPatel46]

Here's a script you can use to update the snapshots once the actual.html files have been generated:

#!/bin/bash
for actual in $( find . -name 'actual.html' ); do
	expected=${actual/actual/expected};
	echo "$actual => $expected"
	mv "$actual" "$expected"
done

There should probably be something like this added to scripts in package.json.

Hello @westonruter I didn't get your above message. Is this for updating PHP unit tests ?

[westonruter]

Yes, the unit test failures are due to the HTML snapshots being out for date now that the media query is updated. So you need to move all the actual.html files generated during the unit tests over to replace the expected.html (if indeed the changes are as expected!) That bash script is a way to do so in bulk.

[westonruter]

Why is this null? It should be unchanged.

[westonruter]

Same. This should be unchanged, right?

[westonruter]

Ditto