Merge pull request #22 from thejameskyle/tjk/media

Add support for media queries

Author: MoOx

CHANGELOG.md

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

README.md

@@ -118,6 +118,17 @@ var out = postcss()
   .css
 ```
 
+#### `mediaQueries` (default: `false`)
+
+Allows calc() usage as part of media query declarations.
+
+```js
+var out = postcss()
+  .use(calc({mediaQueries: true}))
+  .process(css)
+  .css
+```
+
 ---
 
 ## Contributing

index.js

@@ -15,33 +15,44 @@ module.exports = postcss.plugin("postcss-calc", function(options) {
   var precision = options.precision
   var preserve = options.preserve
   var warnWhenCannotResolve = options.warnWhenCannotResolve
+  var mediaQueries = options.mediaQueries
 
   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.walk(function(rule) {
+      if (mediaQueries && rule.type === "atrule") {
+        return transformValue(rule, "params")
+      }
+      else if (rule.type === "decl") {
+        return transformValue(rule, "value")
+      }
     })
   }
 })

test/fixtures/calc.css

@@ -18,3 +18,7 @@ stuff {
   prefixed-unresolved: -webkit-calc(var(--gutter-y) - 1px);
   z-index: calc(var(--zIndexThing) + 1);
 }
+
+@media (min-width: calc(10px + 10px)) {
+  .mediaQueriesShouldBeDisabledByDefault {}
+}

test/fixtures/calc.expected.css

@@ -6,3 +6,7 @@ stuff {
   prefixed-unresolved: -webkit-calc(1.125rem - 1px);
   z-index: 111;
 }
+
+@media (min-width: calc(10px + 10px)) {
+  .mediaQueriesShouldBeDisabledByDefault {}
+}

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",
+    {mediaQueries: true},
+    "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, mediaQueries: true},
+    "should have a preserve option that allow to keep original calc() usage" +
+    "with media"
+  )
+
   var result = compareFixtures(
     t,
     "warnWhenCannotResolve",