Fixed: support for multiline value (#27)

* Search for calc() on multiline

Change the regex to match any kind of character (including line breaks).

* Tests for multiline support

Test if calc() value on more than one line is resolved

* add example for multiline calc() value

README.md

@@ -65,6 +65,10 @@ body {
 h1 {
   font-size: calc(var(--main-font-size) * 2);
   height: calc(100px - 2em);
+  margin-bottom: calc(
+      var(--main-font-size)
+      * 1.5
+    )
 }
 ```
 
@@ -77,7 +81,8 @@ body {
 
 h1 {
   font-size: 32px;
-  height: calc(100px - 2em)
+  height: calc(100px - 2em);
+  margin-bottom: 24px
 }
 ```
 

index.js

@@ -5,7 +5,7 @@ var reduceCSSCalc = require("reduce-css-calc")
 var helpers = require("postcss-message-helpers")
 var postcss = require("postcss")
 
-var CONTAINS_CALC = /calc\(.*\)/
+var CONTAINS_CALC = /\bcalc\([\s\S]*?\)/
 
 /**
  * PostCSS plugin to reduce calc() function calls.

test/fixtures/multiline.css

@@ -0,0 +1,19 @@
+multiline {
+    font-size: calc(
+                       1rem
+                       * 2
+                       * 1.5
+                   );
+    width: calc(1px +
+      10px
+      + 100px );
+    height: calc(
+2em
+    + 20em + 200em);
+    padding: calc(30px
+      + 3px ) calc(
+2px *
+2
++40 px
+        );
+}

test/fixtures/multiline.expected.css

@@ -0,0 +1,6 @@
+multiline {
+    font-size: 3rem;
+    width: 111px;
+    height: 222em;
+    padding: 33px 44px;
+}

test/index.js

@@ -72,6 +72,13 @@ test("calc", function(t) {
     "with media"
   )
 
+  compareFixtures(
+    t,
+    "multiline",
+    {},
+    "should resolve multiline calc value"
+  )
+
   var result = compareFixtures(
     t,
     "warnWhenCannotResolve",