Add postcss-custom-media plugin

Author: Turbo87

app/styles/breakpoints.css

@@ -0,0 +1 @@
+/* see https://github.com/postcss/postcss-custom-media */

ember-cli-build.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
+const postcssCustomMedia = require('postcss-custom-media');
 
 const { USE_EMBROIDER } = process.env;
 
@@ -29,6 +30,11 @@ module.exports = function (defaults) {
       extension: 'module.css',
       plugins: {
         before: [require('postcss-nested')],
+        after: [
+          postcssCustomMedia({
+            importFrom: `${__dirname}/app/styles/breakpoints.css`,
+          }),
+        ],
       },
     },
     fingerprint: {

package.json

@@ -122,6 +122,7 @@
     "match-json": "1.3.3",
     "normalize.css": "8.0.1",
     "nyc": "15.1.0",
+    "postcss-custom-media": "8.0.0",
     "postcss-nested": "5.0.6",
     "prettier": "2.5.1",
     "qunit": "2.17.2",

yarn.lock

@@ -11665,6 +11665,11 @@ postcss-color-rebeccapurple@^4.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
+postcss-custom-media@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz#1be6aff8be7dc9bf1fe014bde3b71b92bb4552f1"
+  integrity sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==
+
 postcss-custom-media@^7.0.8:
   version "7.0.8"
   resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"