Merge pull request #10 from hgl/recursive

Allow custom media to reference each other

Author: MoOx

index.js

@@ -2,6 +2,33 @@ var postcss = require("postcss")
 
 var EXTENSION_RE = /\(\s*(--[\w-]+)\s*\)/g
 
+/*
+ * Resolve custom media values.
+ */
+function resolveValue(value, map, result) {
+  if (!EXTENSION_RE.test(value)) {
+    return value
+  }
+  return value.replace(EXTENSION_RE, function(orig, name) {
+    if (!map[name]) {
+      return orig
+    }
+
+    var mq = map[name]
+    if (mq.resolved) {
+      return mq.value
+    }
+
+    if (mq.deps.indexOf(name) !== -1) {
+      mq.circular = true
+      return orig
+    }
+    mq.deps.push(name)
+    mq.value = resolveValue(mq.value, map, result)
+    return mq.value
+  })
+}
+
 /*
  * read & replace custom media queries by standard media queries
  */
@@ -32,7 +59,12 @@ function customMedia(options) {
       var params = rule.params.split(" ")
       // @custom-media <extension-name> <media-query-list>;
       // map[<extension-name>] = <media-query-list>
-      map[params.shift()] = params.join(" ")
+      map[params.shift()] = {
+        value: params.join(" "),
+        deps: [],
+        circular: false,
+        resolved: false,
+      }
 
       if (!preserve) {
         toRemove.push(rule)
@@ -41,7 +73,17 @@ function customMedia(options) {
 
     // apply js-defined media queries
     Object.keys(extensions).forEach(function(name) {
-      map[name] = extensions[name]
+      map[name] = {
+        value: extensions[name],
+        deps: [],
+        circular: false,
+        resolved: false,
+      }
+    })
+
+    Object.keys(map).forEach(function(name) {
+      map[name].value = resolveValue(map[name].value, map, result)
+      map[name].resolved = true
     })
 
     // transform custom media query aliases
@@ -52,7 +94,15 @@ function customMedia(options) {
 
       rule.params = rule.params.replace(EXTENSION_RE, function(_, name) {
         if (map[name]) {
-          return map[name]
+          if (map[name].circular) {
+            result.warn(
+              "Circular @custom-media definition for '" + name +
+                "'. The entire rule has been removed from the output.",
+              {node: rule}
+            )
+            toRemove.push(rule)
+          }
+          return map[name].value
         }
 
         result.warn(
@@ -68,10 +118,13 @@ function customMedia(options) {
       var names = Object.keys(map)
       if (names.length) {
         names.forEach(function(name) {
+          if (map[name].circular) {
+            return
+          }
           var atRule = postcss.atRule({
             name: "custom-media",
             afterName: " ",
-            params: name + " " + map[name],
+            params: name + " " + map[name].value,
           })
           styles.append(atRule)
         })

test/fixtures/transform-circular-reference.css

@@ -0,0 +1,10 @@
+body { color: #000  }
+
+@custom-media --a (--b);
+@custom-media --b (--a);
+
+@media (--b) {
+  selector {
+    property: value;
+  }
+}

test/fixtures/transform-circular-reference.expected.css

@@ -0,0 +1 @@
+body { color: #000  }

test/fixtures/transform-reference.css

@@ -0,0 +1,8 @@
+@custom-media --a (foo: bar);
+@custom-media --b (--a);
+
+@media (--b) {
+  selector {
+    property: value;
+  }
+}

test/fixtures/transform-reference.expected.css

@@ -0,0 +1,7 @@
+
+
+@media (foo: bar) {
+  selector {
+    property: value;
+  }
+}

test/fixtures/transform-self-reference.css

@@ -0,0 +1,9 @@
+body { color: #000  }
+
+@custom-media --a (--a);
+
+@media (--a) {
+  selector {
+    property: value;
+  }
+}

test/fixtures/transform-self-reference.expected.css

@@ -0,0 +1 @@
+body { color: #000  }

test/index.js

@@ -40,6 +40,24 @@ test("@custom-media", function(t) {
     "should replaces all extension names"
   )
 
+  compareFixtures(
+    t,
+    "transform-reference",
+    "should transform custom media referencing another custom media"
+  )
+
+  compareFixtures(
+    t,
+    "transform-self-reference",
+    "should transform custom media with self reference"
+  )
+
+  compareFixtures(
+    t,
+    "transform-circular-reference",
+    "should transform custom media with circular reference"
+  )
+
   var undefinedRes = compareFixtures(
     t,
     "undefined",
@@ -89,6 +107,7 @@ test("@custom-media", function(t) {
     {
       extensions: {
         "--viewport-max-s": "(max-width: 30em)",
+        "--a": "(--a)",
       },
       appendExtensions: true,
     }