feat(frontend): support custom media constraints

getindiekit · Feb 15, 2022 · 4dfd302 · 4dfd302
1 parent 4588739
commit 4dfd302
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/frontend/lib/postcss.js b/packages/frontend/lib/postcss.js
@@ -1,13 +1,15 @@
 const fs = require("fs");
 const path = require("path");
 const postcss = require("postcss");
-const postcssEasyImport = require("postcss-easy-import");
-const postcssExtendRule = require("postcss-extend-rule");
 
 module.exports = (async () => {
   const options = {
     from: path.join(__dirname, "..", "styles/app.css"),
-    plugins: [postcssEasyImport, postcssExtendRule],
+    plugins: [
+      require("postcss-easy-import"),
+      require("postcss-custom-media"),
+      require("postcss-extend-rule"),
+    ],
   };
 
   const css = fs.readFileSync(options.from, "utf8");

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -43,6 +43,7 @@
     "markdown-it-prism": "^2.2.0",
     "nunjucks": "^3.2.3",
     "postcss": "^8.3.6",
+    "postcss-custom-media": "^8.0.0",
     "postcss-easy-import": "^3.0.0",
     "postcss-extend-rule": "^4.0.0"
   },

diff --git a/packages/frontend/styles/config/custom-media.css b/packages/frontend/styles/config/custom-media.css
@@ -0,0 +1,6 @@
+@custom-media --upto-small-viewport (width < 480px);
+@custom-media --from-small-viewport (width >= 480px);
+@custom-media --upto-medium-viewport (width < 720px);
+@custom-media --from-medium-viewport (width >= 720px);
+@custom-media --upto-large-viewport (width <= 1024px);
+@custom-media --from-large-viewport (width > 1024px);