Add append option

Author: Glen Huang

plugins/postcss-custom-media/index.js

@@ -1,6 +1,7 @@
 /**
  * Module dependencies
  */
+var postcss = require("postcss")
 var helpers = require("postcss-message-helpers")
 
 /**
@@ -20,7 +21,8 @@ function customMedia(options) {
   return function(styles) {
     options = options || {}
     var extensions = options.extensions || {}
-    var preserve = options.preserve
+    var append = options.append
+    var preserve = append || options.preserve
     var map = {}
     var toRemove = []
 
@@ -41,8 +43,8 @@ function customMedia(options) {
     })
 
     // apply js-defined media queries
-    Object.keys(extensions).forEach(function(extension) {
-      map[extension] = extensions[extension]
+    Object.keys(extensions).forEach(function(name) {
+      map[name] = extensions[name]
     })
 
     // transform custom media query aliases
@@ -61,6 +63,22 @@ function customMedia(options) {
       })
     })
 
+    if (append) {
+      var names = Object.keys(map)
+      if (names.length) {
+        names.forEach(function(name) {
+          var atRule = postcss.atRule({
+            name: "custom-media",
+            afterName: " ",
+            params: name + " " + map[name],
+          })
+          styles.append(atRule)
+        })
+        styles.semicolon = true
+        styles.after = "\n"
+      }
+    }
+
     // remove @custom-media
     toRemove.forEach(function(rule) { rule.removeSelf() })
   }

plugins/postcss-custom-media/package.json

@@ -21,12 +21,12 @@
     "index.js"
   ],
   "dependencies": {
-    "postcss-message-helpers": "^2.0.0"
+    "postcss-message-helpers": "^2.0.0",
+    "postcss": "^4.0.2"
   },
   "devDependencies": {
     "jscs": "^1.6.2",
     "jshint": "^2.5.6",
-    "postcss": "^4.0.2",
     "tape": "^3.0.0"
   },
   "scripts": {

plugins/postcss-custom-media/test/fixtures/append.css

@@ -0,0 +1,3 @@
+@media (--viewport-max-s) {
+  body { font-size: 1rem; }
+}

plugins/postcss-custom-media/test/fixtures/append.expected.css

@@ -0,0 +1,4 @@
+@media (max-width: 30em) {
+  body { font-size: 1rem; }
+}
+@custom-media --viewport-max-s (max-width: 30em);

plugins/postcss-custom-media/test/index.js

@@ -34,5 +34,12 @@ test("@custom-media", function(t) {
 
   compareFixtures(t, "preserve", "should preserve custom media", {preserve: true})
 
+  compareFixtures(t, "append", "should append custom media", {
+    extensions: {
+      "--viewport-max-s": "(max-width: 30em)",
+    },
+    append: true,
+  })
+
   t.end()
 })