Add support for media queries. Resolves #21

Author: jamiebuilds

CHANGELOG.md

@@ -1,3 +1,5 @@
+- Added: support for `@media` queries
+
 # 5.1.0 - 2016-01-07
 
 - Added: "warnWhenCannotResolve" option to warn when calc() are not reduced to a single value

index.js

@@ -17,31 +17,40 @@ module.exports = postcss.plugin("postcss-calc", function(options) {
   var warnWhenCannotResolve = options.warnWhenCannotResolve
 
   return function(style, result) {
+    function transformValue(node, property) {
+      var value = node[property]
 
-    style.walkDecls(function transformDecl(decl) {
-      if (!decl.value || decl.value.indexOf("calc(") === -1) {
+      if (!value || !CONTAINS_CALC.test(value)) {
         return
       }
 
       helpers.try(function transformCSSCalc() {
-        var value = reduceCSSCalc(decl.value, precision)
+        var reducedValue = reduceCSSCalc(value, precision)
 
-        if (warnWhenCannotResolve && CONTAINS_CALC.test(value)) {
-          result.warn("Could not reduce expression: " + decl.value,
-            {plugin: "postcss-calc", node: decl})
+        if (warnWhenCannotResolve && CONTAINS_CALC.test(reducedValue)) {
+          result.warn("Could not reduce expression: " + value,
+            {plugin: "postcss-calc", node: node})
         }
 
         if (!preserve) {
-          decl.value = value
+          node[property] = reducedValue
           return
         }
 
-        if (value != decl.value) {
-          var clone = decl.clone()
-          clone.value = value
-          decl.parent.insertBefore(decl, clone)
+        if (reducedValue != value) {
+          var clone = node.clone()
+          clone[property] = reducedValue
+          node.parent.insertBefore(node, clone)
         }
-      }, decl.source)
+      }, node.source)
+    }
+
+    style.walkAtRules(function transformAtRule(atRule) {
+      transformValue(atRule, 'params')
+    })
+
+    style.walkDecls(function transformDecl(decl) {
+      transformValue(decl, 'value')
     })
   }
 })

test/fixtures/media.css

@@ -0,0 +1 @@
+@media (min-width: calc(10px + 10px)) {}

test/fixtures/media.expected.css

@@ -0,0 +1 @@
+@media (min-width: 20px) {}

test/fixtures/preserve-media.css

@@ -0,0 +1,5 @@
+@media (min-width: calc(10px + 10px)) {
+  .test {
+    display: block;
+  }
+}

test/fixtures/preserve-media.expected.css

@@ -0,0 +1,10 @@
+@media (min-width: 20px) {
+  .test {
+    display: block;
+  }
+}
+@media (min-width: calc(10px + 10px)) {
+  .test {
+    display: block;
+  }
+}

test/index.js

@@ -42,6 +42,13 @@ test("calc", function(t) {
     "should resolve what is possible in complex calc"
   )
 
+  compareFixtures(
+    t,
+    "media",
+    {},
+    "should resolve media queries"
+  )
+
   compareFixtures(
     t,
     "precision",
@@ -57,6 +64,14 @@ test("calc", function(t) {
     "should have a preserve option that allow to keep original calc() usage"
   )
 
+  compareFixtures(
+    t,
+    "preserve-media",
+    {preserve: true},
+    "should have a preserve option that allow to keep original calc() usage" +
+    "with media"
+  )
+
   var result = compareFixtures(
     t,
     "warnWhenCannotResolve",