7.0.4

Author: jonathantneal

plugins/postcss-custom-media/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Custom Media
 
+### 7.0.4 (September 23, 2018)
+
+- Added: `importFromPlugins` option to process imports
+
 ### 7.0.3 (September 20, 2018)
 
 - Fixed: Do not break on an empty `importFrom` object

plugins/postcss-custom-media/lib/export-to.js

@@ -80,7 +80,7 @@ export default function exportCustomMediaToDestinations(customMedia, destination
 				const to = String(opts.to || '');
 
 				// type of file being written to
-				const type = (opts.type || path.extname(opts.to).slice(1)).toLowerCase();
+				const type = (opts.type || path.extname(to).slice(1)).toLowerCase();
 
 				// transformed custom media
 				const customMediaJSON = toJSON(customMedia);

plugins/postcss-custom-media/lib/media-ast-from-string.js

@@ -65,7 +65,7 @@ class MediaQuery {
 	constructor(string) {
 		const [, before, media, after ] = string.match(spaceWrapRegExp);
 		const [, modifier = '', afterModifier = ' ', type = '', beforeAnd = '', and = '', beforeExpression = '', expression1 = '', expression2 = ''] = media.match(mediaRegExp) || [];
-		const raws = { before, after, afterModifier, originalModifier: modifier || 'not', beforeAnd, and, beforeExpression };
+		const raws = { before, after, afterModifier, originalModifier: modifier || '', beforeAnd, and, beforeExpression };
 		const nodes = parse(expression1 || expression2, true);
 
 		Object.assign(this, {

plugins/postcss-custom-media/lib/transform-media-list.js

@@ -35,9 +35,18 @@ function transformMedia(media, customMedias) {
 					raws: !modifier || media.modifier
 						? { ...media.raws }
 					: { ...replacementMedia.raws },
-					type: media.type || replacementMedia.type
+					type: media.type || replacementMedia.type,
 				});
 
+				// conditionally include more replacement raws when the type is present
+				if (mediaClone.type === replacementMedia.type) {
+					Object.assign(mediaClone.raws, {
+						and: replacementMedia.raws.and,
+						beforeAnd: replacementMedia.raws.beforeAnd,
+						beforeExpression: replacementMedia.raws.beforeExpression
+					});
+				}
+
 				mediaClone.nodes.splice(index, 1, ...replacementMedia.clone().nodes.map(node => {
 					// use spacing from the current usage
 					node.spaces = { ...media.nodes[index].spaces };

plugins/postcss-custom-media/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-custom-media",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "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.1",
+    "rollup": "^0.66.2",
     "rollup-plugin-babel": "^4.0.3"
   },
   "eslintConfig": {

plugins/postcss-custom-media/test/basic.css

@@ -1,4 +1,5 @@
 @custom-media --mq-a (max-width: 30em), (max-height: 30em);
+@custom-media --mq-b screen and (max-width: 30em);
 @custom-media --not-mq-a not all and (--mq-a);
 
 @media (--mq-a) {
@@ -7,6 +8,12 @@
 	}
 }
 
+@media (--mq-b) {
+	body {
+		order: 1;
+	}
+}
+
 @media (--mq-a), (--mq-a) {
 	body {
 		order: 1;

plugins/postcss-custom-media/test/basic.expect.css

@@ -4,6 +4,12 @@
 	}
 }
 
+@media screen and (max-width: 30em) {
+	body {
+		order: 1;
+	}
+}
+
 @media (max-width: 30em),(max-height: 30em), (max-width: 30em), (max-height: 30em) {
 	body {
 		order: 1;

plugins/postcss-custom-media/test/basic.preserve.expect.css

@@ -1,4 +1,5 @@
 @custom-media --mq-a (max-width: 30em), (max-height: 30em);
+@custom-media --mq-b screen and (max-width: 30em);
 @custom-media --not-mq-a not all and (--mq-a);
 
 @media (max-width: 30em),(max-height: 30em) {
@@ -13,6 +14,18 @@
 	}
 }
 
+@media screen and (max-width: 30em) {
+	body {
+		order: 1;
+	}
+}
+
+@media (--mq-b) {
+	body {
+		order: 1;
+	}
+}
+
 @media (max-width: 30em),(max-height: 30em), (max-width: 30em), (max-height: 30em) {
 	body {
 		order: 1;

plugins/postcss-custom-media/test/export-media.css

@@ -1,4 +1,5 @@
 @custom-media --mq-a (max-width: 30em), (max-height: 30em);
+@custom-media --mq-b screen and (max-width: 30em);
 @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);

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

@@ -1,6 +1,7 @@
 module.exports = {
 	customMedia: {
 		'--mq-a': '(max-width: 30em), (max-height: 30em)',
+		'--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)'

plugins/postcss-custom-media/test/export-media.json

@@ -1,6 +1,7 @@
 {
   "custom-media": {
     "--mq-a": "(max-width: 30em), (max-height: 30em)",
+    "--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)"

plugins/postcss-custom-media/test/export-media.mjs

@@ -1,5 +1,6 @@
 export const customMedia = {
 	'--mq-a': '(max-width: 30em), (max-height: 30em)',
+	'--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)'

plugins/postcss-custom-media/test/import.plugin.expect.css

@@ -0,0 +1,29 @@
+@media (max-width: 30em),(max-height: 30em) {
+	body {
+		order: 1;
+	}
+}
+
+@media (max-width: 30em),(max-height: 30em), (max-width: 30em), (max-height: 30em) {
+	body {
+		order: 1;
+	}
+}
+
+@media not all and (max-width: 30em),not all and (max-height: 30em) {
+	body {
+		order: 2;
+	}
+}
+
+@media not all and (max-width: 30em),not all and (max-height: 30em) {
+	body {
+		order: 1;
+	}
+}
+
+@media all and (max-width: 30em),all and (max-height: 30em) {
+	body {
+		order: 2;
+	}
+}