7.0.7

Author: jonathantneal

CHANGELOG.md

@@ -1,8 +1,12 @@
 # Changes to PostCSS Custom Media
 
+### 7.0.7 (October 19, 2018)
+
+- Fixed: Issue combining custom media media queries with `and`
+
 ### 7.0.6 (October 12, 2018)
 
-- Fixing: Issue combining multiple custom media
+- Fixed: Issue combining multiple custom media
 
 ### 7.0.5 (October 5, 2018)
 

lib/transform-media-list.js

@@ -49,7 +49,10 @@ function transformMedia(media, customMedias) {
 
 				mediaClone.nodes.splice(index, 1, ...replacementMedia.clone().nodes.map(node => {
 					// use raws and spacing from the current usage
-					node.raws = { ...media.nodes[index].raws };
+					if (media.nodes[index].raws.and) {
+						node.raws = { ...media.nodes[index].raws };
+					}
+
 					node.spaces = { ...media.nodes[index].spaces };
 
 					return node;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-custom-media",
-  "version": "7.0.6",
+  "version": "7.0.7",
   "description": "Use Custom Media Queries in CSS",
   "author": "Jonathan Neal <[email protected]>",
   "contributors": [
@@ -34,7 +34,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.6.1",
+    "eslint": "^5.7.0",
     "eslint-config-dev": "^2.0.0",
     "postcss-tape": "^2.2.0",
     "pre-commit": "^1.2.2",

test/basic.css

@@ -67,3 +67,17 @@
 		order: 6;
 	}
 }
+
+@custom-media --concat (min-width: 320px) and (max-width: 640px);
+
+@media (--concat) {
+	body {
+		order: 7;
+	}
+}
+
+@media (--concat) and (min-aspect-ratio: 16/9) {
+	body {
+		order: 8;
+	}
+}

test/basic.expect.css

@@ -57,3 +57,15 @@
 		order: 6;
 	}
 }
+
+@media (min-width: 320px) and (max-width: 640px) {
+	body {
+		order: 7;
+	}
+}
+
+@media (min-width: 320px) and (max-width: 640px) and (min-aspect-ratio: 16/9) {
+	body {
+		order: 8;
+	}
+}

test/basic.preserve.expect.css

@@ -127,3 +127,29 @@
 		order: 6;
 	}
 }
+
+@custom-media --concat (min-width: 320px) and (max-width: 640px);
+
+@media (min-width: 320px) and (max-width: 640px) {
+	body {
+		order: 7;
+	}
+}
+
+@media (--concat) {
+	body {
+		order: 7;
+	}
+}
+
+@media (min-width: 320px) and (max-width: 640px) and (min-aspect-ratio: 16/9) {
+	body {
+		order: 8;
+	}
+}
+
+@media (--concat) and (min-aspect-ratio: 16/9) {
+	body {
+		order: 8;
+	}
+}

test/export-media.css

@@ -5,3 +5,4 @@
 @custom-media --circular-mq-b (--circular-mq-a);
 @custom-media --min (min-width: 320px);
 @custom-media --max (max-width: 640px);
+@custom-media --concat (min-width: 320px) and (max-width: 640px);

test/export-media.js

@@ -6,6 +6,7 @@ module.exports = {
 		'--circular-mq-a': '(--circular-mq-b)',
 		'--circular-mq-b': '(--circular-mq-a)',
 		'--min': '(min-width: 320px)',
-		'--max': '(max-width: 640px)'
+		'--max': '(max-width: 640px)',
+		'--concat': '(min-width: 320px) and (max-width: 640px)'
 	}
 };

test/export-media.json

@@ -6,6 +6,7 @@
     "--circular-mq-a": "(--circular-mq-b)",
     "--circular-mq-b": "(--circular-mq-a)",
     "--min": "(min-width: 320px)",
-    "--max": "(max-width: 640px)"
+    "--max": "(max-width: 640px)",
+    "--concat": "(min-width: 320px) and (max-width: 640px)"
   }
 }

test/export-media.mjs

@@ -5,5 +5,6 @@ export const customMedia = {
 	'--circular-mq-a': '(--circular-mq-b)',
 	'--circular-mq-b': '(--circular-mq-a)',
 	'--min': '(min-width: 320px)',
-	'--max': '(max-width: 640px)'
+	'--max': '(max-width: 640px)',
+	'--concat': '(min-width: 320px) and (max-width: 640px)'
 };