[DevEx][Perf] Leverage PostCSS to implement shorthand media queries and ensure they are merged

[abaicus]

Description:

We can leverage postcss-custom-media and postcss-combine-media-query to improve the development experience with SCSS.

Right now, we're using a _media-queries.scss file with mixins to gather all media queries. This would help us inline everything in SCSS and also ensure that if there are any inlined media queries, these are merged for efficiency purposes.

Also, postcss-custom-media will ensure standardization and enable shorthands to make things easier and enable developers to not think if the media-query should be min-width or max-width every time.

For example

@media (min-width: #{$tablet})
// Will become 
@media (--tablet)

I've implemented this in Raft, and it seems to work quite well.