Add support for media queries. Resolves #21

postcss · Jan 7, 2016 · 3c477ab · ben-eb · Jan 7, 2016 · jamiebuilds
1 parent 4f03255
commit 3c477ab
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 12 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/index.js b/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')
     })
   }
 })
diff --git a/test/fixtures/media.css b/test/fixtures/media.css
@@ -0,0 +1 @@
+@media (min-width: calc(10px + 10px)) {}
diff --git a/test/fixtures/media.expected.css b/test/fixtures/media.expected.css
@@ -0,0 +1 @@
+@media (min-width: 20px) {}
diff --git a/test/fixtures/preserve-media.css b/test/fixtures/preserve-media.css
@@ -0,0 +1,5 @@
+@media (min-width: calc(10px + 10px)) {
+  .test {
+    display: block;
+  }
+}
diff --git a/test/fixtures/preserve-media.expected.css b/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;
+  }
+}
diff --git a/test/index.js b/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",