diff --git a/package.json b/package.json
index 86b68bdc29..ae27775025 100644
--- a/package.json
+++ b/package.json
@@ -125,6 +125,7 @@
     "modernizr": "^3.11.4",
     "node-fetch": "^2.6.1",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "postcss-calc": "^7.0.5",
     "postcss-easings": "^2.0.0",
     "postcss-extend": "^1.0.5",
     "postcss-hexrgba": "^2.0.1",
diff --git a/webpack.config.js b/webpack.config.js
index 25613a379b..cc79048bb3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -227,6 +227,7 @@ module.exports = (env, argv) => {
                                     require("postcss-easings")(),
                                     require("postcss-strip-inline-comments")(),
                                     require("postcss-hexrgba")(),
+                                    require("postcss-calc")({warnWhenCannotResolve: true}),
 
                                     // It's important that this plugin is last otherwise we end
                                     // up with broken CSS.
diff --git a/yarn.lock b/yarn.lock
index 538846995c..e78fafea4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8899,6 +8899,15 @@ postcss-calc@^7.0.1:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.0.2"
 
+postcss-calc@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
+  integrity sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==
+  dependencies:
+    postcss "^7.0.27"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.0.2"
+
 postcss-color-functional-notation@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"