feat(Build): Combine & sort media queries

This allows for a better theme authoring experience as responsive overrides can be nested within a selector.
stencila · Feb 18, 2020 · 16ed2b6 · 16ed2b6
1 parent d4dca22
commit 16ed2b6
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 1 deletion.
diff --git a/.postcssrc b/.postcssrc
@@ -10,11 +10,14 @@
     "postcss-custom-selectors": {
       "importFrom": "src/selectors.css"
     },
+    "postcss-custom-media": true,
     "postcss-custom-properties": {
       "preserve": true
     },
     "postcss-nested": true,
     "autoprefixer": true,
-    "postcss-extend": true
+    "postcss-extend": true,
+    "postcss-combine-media-query": true,
+    "postcss-sort-media-queries": true,
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,13 +65,16 @@
     "normalize.css": "8.0.1",
     "parcel-bundler": "1.12.4",
     "parcel-plugin-url-loader": "git+https://github.com/stencila/parcel-plugin-url-loader.git",
+    "postcss-combine-media-query": "^1.0.0",
+    "postcss-custom-media": "^7.0.8",
     "postcss-custom-properties": "9.0.2",
     "postcss-custom-selectors": "5.1.2",
     "postcss-extend": "1.0.5",
     "postcss-import": "12.0.1",
     "postcss-import-url": "4.0.0",
     "postcss-mixins": "6.2.3",
     "postcss-nested": "4.2.1",
+    "postcss-sort-media-queries": "^1.1.20",
     "postcss-url": "8.0.0",
     "prismjs": "1.19.0",
     "stylelint": "13.0.0",