Auto merge of #4361 - Turbo87:breakpoints, r=locks

Use `postcss-custom-media` plugin for breakpoints

This PR adds the https://github.com/postcss/postcss-custom-media PostCSS plugin to the style pipeline and imports the default breakpoints from https://tailwindcss.com/docs/responsive-design to eventually consolidate all of our existing breakpoints.

Author: bors

app/components/settings-page.module.css

@@ -2,7 +2,7 @@
     display: grid;
     gap: 16px;
 
-    @media only screen and (min-width: 891px) {
+    @media (--min-m) {
         grid-template:
             "menu content" auto /
             200px auto;

app/components/settings/api-tokens.module.css

@@ -151,7 +151,7 @@
     border-radius: 4px;
 }
 
-@media (min-width: 640px) {
+@media (--min-s) {
     .new-token-form {
         display: grid;
         grid-template-columns: 1fr auto;

app/styles/breakpoints.css

@@ -0,0 +1,8 @@
+/* see https://github.com/postcss/postcss-custom-media */
+
+/* breakpoints inspired by https://tailwindcss.com/docs/responsive-design */
+@custom-media --min-s (min-width: 640px);
+@custom-media --min-m (min-width: 768px);
+@custom-media --min-l (min-width: 1024px);
+@custom-media --min-xl (min-width: 1280px);
+@custom-media --min-xxl (min-width: 1536px);

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"