postcss-simple-vars: Add media query breakpoint variables.

postcss.config.js

@@ -1,11 +1,15 @@
 "use strict";
 
+const {media_breakpoints} = require("./static/js/css_variables.js");
+
 module.exports = {
     plugins: {
         // Warning: despite appearances, order is significant
         "postcss-nested": {},
         "postcss-extend-rule": {},
-        "postcss-simple-vars": {},
+        "postcss-simple-vars": {
+            variables: media_breakpoints,
+        },
         "postcss-calc": {},
         autoprefixer: {},
     },

static/js/css_variables.js

@@ -0,0 +1,24 @@
+"use strict";
+
+// Media query breakpoints according to Bootstrap 4.5
+const xs = 0;
+const sm = 576;
+const md = 768;
+const lg = 992;
+const xl = 1200;
+
+module.exports = {
+    media_breakpoints: {
+        "xs-min": xs + "px",
+        "sm-min": sm + "px",
+        "md-min": md + "px",
+        "lg-min": lg + "px",
+        "xl-min": xl + "px",
+
+        "xs-max": xs - 1 + "px",
+        "sm-max": sm - 1 + "px",
+        "md-max": md - 1 + "px",
+        "lg-max": lg - 1 + "px",
+        "xl-max": xl - 1 + "px",
+    },
+};

tools/test-js-with-node

@@ -52,6 +52,7 @@ EXEMPT_FILES = {
     'static/js/confirm_dialog.js',
     'static/js/copy_and_paste.js',
     'static/js/csrf.js',
+    'static/js/css_variables.js',
     'static/js/debug.js',
     'static/js/desktop_integration.js',
     'static/js/drafts.js',