feat: adds support for custom CSS media queries (#306)

* feat: added CSS custom media query support
* refactor: added PostCssCustom media for dev-stage and prod webpack configs

`@edx/frontend-build` now supports custom CSS media queries in order to support media query definitions using CSS variables (not natively supported by CSS). To do so, it uses PostCSS Custom Media to let you define `@custom-media` in CSS following the Custom Media Specification: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media.

config/webpack.dev-stage.config.js

@@ -9,6 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const PostCssAutoprefixerPlugin = require('autoprefixer');
 const PostCssRTLCSS = require('postcss-rtlcss');
+const PostCssCustomMediaCSS = require('postcss-custom-media');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const commonConfig = require('./webpack.common.config');
@@ -84,6 +85,7 @@ module.exports = merge(commonConfig, {
                 plugins: [
                   PostCssAutoprefixerPlugin(),
                   PostCssRTLCSS(),
+                  PostCssCustomMediaCSS(),
                 ],
               },
             },

config/webpack.dev.config.js

@@ -9,6 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const PostCssAutoprefixerPlugin = require('autoprefixer');
 const PostCssRTLCSS = require('postcss-rtlcss');
+const PostCssCustomMediaCSS = require('postcss-custom-media');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const commonConfig = require('./webpack.common.config');
@@ -85,6 +86,7 @@ module.exports = merge(commonConfig, {
                 plugins: [
                   PostCssAutoprefixerPlugin(),
                   PostCssRTLCSS(),
+                  PostCssCustomMediaCSS(),
                 ],
               },
             },

config/webpack.prod.config.js

@@ -15,6 +15,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const PostCssAutoprefixerPlugin = require('autoprefixer');
 const PostCssRTLCSS = require('postcss-rtlcss');
+const PostCssCustomMediaCSS = require('postcss-custom-media');
 
 const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic-plugin');
 const commonConfig = require('./webpack.common.config');
@@ -106,6 +107,7 @@ module.exports = merge(commonConfig, {
                   PostCssAutoprefixerPlugin(),
                   PostCssRTLCSS(),
                   CssNano(),
+                  PostCssCustomMediaCSS(),
                 ],
               },
             },

package.json

@@ -61,6 +61,7 @@
     "jest": "26.6.3",
     "mini-css-extract-plugin": "1.6.2",
     "postcss": "8.4.21",
+    "postcss-custom-media": "^9.1.2",
     "postcss-loader": "6.2.1",
     "postcss-rtlcss": "3.7.2",
     "react-dev-utils": "12.0.1",