7.0.6

jonathantneal · romainmenke · commit d78ed060d1f4 · 2022-06-01T16:57:05.000+02:00
diff --git a/plugins/postcss-custom-media/CHANGELOG.md b/plugins/postcss-custom-media/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changes to PostCSS Custom Media
 
+### 7.0.6 (October 12, 2018)
+
+- Fixing: Issue combining multiple custom media
+
 ### 7.0.5 (October 5, 2018)
 
 - Fixed: Possible issues resolving paths to imports and exports
diff --git a/plugins/postcss-custom-media/lib/transform-media-list.js b/plugins/postcss-custom-media/lib/transform-media-list.js
@@ -48,7 +48,8 @@ function transformMedia(media, customMedias) {
 				}
 
 				mediaClone.nodes.splice(index, 1, ...replacementMedia.clone().nodes.map(node => {
-					// use spacing from the current usage
+					// use raws and spacing from the current usage
+					node.raws = { ...media.nodes[index].raws };
 					node.spaces = { ...media.nodes[index].spaces };
 
 					return node;
diff --git a/plugins/postcss-custom-media/package.json b/plugins/postcss-custom-media/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-custom-media",
-  "version": "7.0.5",
+  "version": "7.0.6",
   "description": "Use Custom Media Queries in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "contributors": [
@@ -38,7 +38,7 @@
     "eslint-config-dev": "^2.0.0",
     "postcss-tape": "^2.2.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.66.4",
+    "rollup": "^0.66.6",
     "rollup-plugin-babel": "^4.0.3"
   },
   "eslintConfig": {
diff --git a/plugins/postcss-custom-media/test/basic.css b/plugins/postcss-custom-media/test/basic.css
@@ -54,5 +54,16 @@
 }
 
 @media (--unresolved-mq) {
-	body order: 5;
+	body {
+		order: 5;
+	}
+}
+
+@custom-media --min (min-width: 320px);
+@custom-media --max (max-width: 640px);
+
+@media (--min) and (--max) {
+	body {
+		order: 6;
+	}
 }
diff --git a/plugins/postcss-custom-media/test/basic.expect.css b/plugins/postcss-custom-media/test/basic.expect.css
@@ -47,5 +47,13 @@
 }
 
 @media (--unresolved-mq) {
-	body order: 5;
+	body {
+		order: 5;
+	}
+}
+
+@media (min-width: 320px) and (max-width: 640px) {
+	body {
+		order: 6;
+	}
 }
diff --git a/plugins/postcss-custom-media/test/basic.preserve.expect.css b/plugins/postcss-custom-media/test/basic.preserve.expect.css
@@ -102,9 +102,28 @@
 }
 
 @media (--unresolved-mq) {
-	body order: 5;
+	body {
+		order: 5;
+	}
 }
 
 @media (--unresolved-mq) {
-	body order: 5;
+	body {
+		order: 5;
+	}
+}
+
+@custom-media --min (min-width: 320px);
+@custom-media --max (max-width: 640px);
+
+@media (min-width: 320px) and (max-width: 640px) {
+	body {
+		order: 6;
+	}
+}
+
+@media (--min) and (--max) {
+	body {
+		order: 6;
+	}
 }
diff --git a/plugins/postcss-custom-media/test/export-media.css b/plugins/postcss-custom-media/test/export-media.css
@@ -3,3 +3,5 @@
 @custom-media --not-mq-a not all and (--mq-a);
 @custom-media --circular-mq-a (--circular-mq-b);
 @custom-media --circular-mq-b (--circular-mq-a);
+@custom-media --min (min-width: 320px);
+@custom-media --max (max-width: 640px);
diff --git a/plugins/postcss-custom-media/test/export-media.js b/plugins/postcss-custom-media/test/export-media.js
@@ -4,6 +4,8 @@ module.exports = {
 		'--mq-b': 'screen and (max-width: 30em)',
 		'--not-mq-a': 'not all and (--mq-a)',
 		'--circular-mq-a': '(--circular-mq-b)',
-		'--circular-mq-b': '(--circular-mq-a)'
+		'--circular-mq-b': '(--circular-mq-a)',
+		'--min': '(min-width: 320px)',
+		'--max': '(max-width: 640px)'
 	}
 };
diff --git a/plugins/postcss-custom-media/test/export-media.json b/plugins/postcss-custom-media/test/export-media.json
@@ -4,6 +4,8 @@
     "--mq-b": "screen and (max-width: 30em)",
     "--not-mq-a": "not all and (--mq-a)",
     "--circular-mq-a": "(--circular-mq-b)",
-    "--circular-mq-b": "(--circular-mq-a)"
+    "--circular-mq-b": "(--circular-mq-a)",
+    "--min": "(min-width: 320px)",
+    "--max": "(max-width: 640px)"
   }
 }
diff --git a/plugins/postcss-custom-media/test/export-media.mjs b/plugins/postcss-custom-media/test/export-media.mjs
@@ -3,5 +3,7 @@ export const customMedia = {
 	'--mq-b': 'screen and (max-width: 30em)',
 	'--not-mq-a': 'not all and (--mq-a)',
 	'--circular-mq-a': '(--circular-mq-b)',
-	'--circular-mq-b': '(--circular-mq-a)'
+	'--circular-mq-b': '(--circular-mq-a)',
+	'--min': '(min-width: 320px)',
+	'--max': '(max-width: 640px)'
 };

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,8 @@ function transformMedia(media, customMedias) {`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`mediaClone.nodes.splice(index, 1, ...replacementMedia.clone().nodes.map(node => {`
`51`		`- // use spacing from the current usage`
	`51`	`+ // use raws and spacing from the current usage`
	`52`	`+ node.raws = { ...media.nodes[index].raws };`
`52`	`53`	`node.spaces = { ...media.nodes[index].spaces };`
`53`	`54`
`54`	`55`	`return node;`
Original file line number	Diff line number	Diff line change
`@@ -47,5 +47,13 @@`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`@media (--unresolved-mq) {`
`50`		`- body order: 5;`
	`50`	`+ body {`
	`51`	`+ order: 5;`
	`52`	`+ }`
	`53`	`+}`
	`54`	`+`
	`55`	`+@media (min-width: 320px) and (max-width: 640px) {`
	`56`	`+ body {`
	`57`	`+ order: 6;`
	`58`	`+ }`
`51`	`59`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,8 @@`
`4`	`4`	`"--mq-b": "screen and (max-width: 30em)",`
`5`	`5`	`"--not-mq-a": "not all and (--mq-a)",`
`6`	`6`	`"--circular-mq-a": "(--circular-mq-b)",`
`7`		`- "--circular-mq-b": "(--circular-mq-a)"`
	`7`	`+ "--circular-mq-b": "(--circular-mq-a)",`
	`8`	`+ "--min": "(min-width: 320px)",`
	`9`	`+ "--max": "(max-width: 640px)"`
`8`	`10`	`}`
`9`	`11`	`}`