add postcss-calc to postcss plugin chain, to fix css calc() errors

react-toolbox · Oct 19, 2018 · cdb7a12 · cdb7a12
1 parent c467990
commit cdb7a12
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 0 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -52,6 +52,7 @@ function css(cb) {
         'color-mod-function': true, // required to use color-mod()
       }
     }),
+    require('postcss-calc'), // required as postcss-preset-env doesn't have a reduce calc() funtion
     require('postcss-normalize'),
     require('postcss-reporter')({
       clearReportedMessages: true

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "lint-staged": "^3.4.2",
     "mini-css-extract-plugin": "^0.4.4",
     "postcss-apply": "^0.11.0",
+    "postcss-calc": "^7.0.0",
     "postcss-each": "^0.10.0",
     "postcss-import": "^12.0.0",
     "postcss-loader": "^3.0.0",

diff --git a/webpack/postcss.config.js b/webpack/postcss.config.js
@@ -18,6 +18,7 @@ module.exports = () => ({
         'color-mod-function': true, // required to use color-mod()
       }
     }),
+    require('postcss-calc'), // required as postcss-preset-env doesn't have a reduce calc() funtion
     require('postcss-normalize'),
     require('postcss-reporter')({
       clearReportedMessages: true