Skip to content

Commit 58ba1c2

Browse files
jonathantnealromainmenke
jonathantneal
authored and
romainmenke
committed
7.0.1
1 parent 0083022 commit 58ba1c2

19 files changed

+493
-16
lines changed

‎plugins/postcss-custom-media/.tape.js

+228
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,234 @@ module.exports = {
22
'postcss-custom-media': {
33
'basic': {
44
message: 'supports basic usage'
5+
},
6+
'basic:preserve': {
7+
message: 'supports { preserve: true } usage',
8+
options: {
9+
preserve: true
10+
}
11+
},
12+
'import': {
13+
message: 'supports { importFrom: { customMedia: { ... } } } usage',
14+
options: {
15+
importFrom: {
16+
customMedia: {
17+
'--mq-a': '(max-width: 30em), (max-height: 30em)',
18+
'--not-mq-a': 'not all and (--mq-a)'
19+
}
20+
}
21+
}
22+
},
23+
'import:import-fn': {
24+
message: 'supports { importFrom() } usage',
25+
options: {
26+
importFrom() {
27+
return {
28+
customMedia: {
29+
'--mq-a': '(max-width: 30em), (max-height: 30em)',
30+
'--not-mq-a': 'not all and (--mq-a)'
31+
}
32+
};
33+
}
34+
},
35+
expect: 'import.expect.css',
36+
result: 'import.result.css'
37+
},
38+
'import:import-fn-promise': {
39+
message: 'supports { async importFrom() } usage',
40+
options: {
41+
importFrom() {
42+
return new Promise(resolve => {
43+
resolve({
44+
customMedia: {
45+
'--mq-a': '(max-width: 30em), (max-height: 30em)',
46+
'--not-mq-a': 'not all and (--mq-a)'
47+
}
48+
})
49+
});
50+
}
51+
},
52+
expect: 'import.expect.css',
53+
result: 'import.result.css'
54+
},
55+
'import:json': {
56+
message: 'supports { importFrom: "test/import-media.json" } usage',
57+
options: {
58+
importFrom: 'test/import-media.json'
59+
},
60+
expect: 'import.expect.css',
61+
result: 'import.result.css'
62+
},
63+
'import:js': {
64+
message: 'supports { importFrom: "test/import-media.js" } usage',
65+
options: {
66+
importFrom: 'test/import-media.js'
67+
},
68+
expect: 'import.expect.css',
69+
result: 'import.result.css'
70+
},
71+
'import:css': {
72+
message: 'supports { importFrom: "test/import-media.css" } usage',
73+
options: {
74+
importFrom: 'test/import-media.css'
75+
},
76+
expect: 'import.expect.css',
77+
result: 'import.result.css'
78+
},
79+
'import:css-from': {
80+
message: 'supports { importFrom: { from: "test/import-media.css" } } usage',
81+
options: {
82+
importFrom: { from: 'test/import-media.css' }
83+
},
84+
expect: 'import.expect.css',
85+
result: 'import.result.css'
86+
},
87+
'import:css-from-type': {
88+
message: 'supports { importFrom: [ { from: "test/import-media.css", type: "css" } ] } usage',
89+
options: {
90+
importFrom: [ { from: 'test/import-media.css', type: 'css' } ]
91+
},
92+
expect: 'import.expect.css',
93+
result: 'import.result.css'
94+
},
95+
'basic:export': {
96+
message: 'supports { exportTo: { customMedia: { ... } } } usage',
97+
options: {
98+
exportTo: (global.__exportMediaObject = global.__exportMediaObject || {
99+
customMedia: null
100+
})
101+
},
102+
expect: 'basic.expect.css',
103+
result: 'basic.result.css',
104+
after() {
105+
if (__exportMediaObject.customMedia['--mq-a'] !== '(max-width: 30em), (max-height: 30em)') {
106+
throw new Error('The exportTo function failed');
107+
}
108+
}
109+
},
110+
'basic:export-fn': {
111+
message: 'supports { exportTo() } usage',
112+
options: {
113+
exportTo(customMedia) {
114+
if (customMedia['--mq-a'] !== '(max-width: 30em), (max-height: 30em)') {
115+
throw new Error('The exportTo function failed');
116+
}
117+
}
118+
},
119+
expect: 'basic.expect.css',
120+
result: 'basic.result.css'
121+
},
122+
'basic:export-fn-promise': {
123+
message: 'supports { async exportTo() } usage',
124+
options: {
125+
exportTo(customMedia) {
126+
return new Promise((resolve, reject) => {
127+
if (customMedia['--mq-a'] !== '(max-width: 30em), (max-height: 30em)') {
128+
reject('The exportTo function failed');
129+
} else {
130+
resolve();
131+
}
132+
});
133+
}
134+
},
135+
expect: 'basic.expect.css',
136+
result: 'basic.result.css'
137+
},
138+
'basic:export-json': {
139+
message: 'supports { exportTo: "test/export-media.json" } usage',
140+
options: {
141+
exportTo: 'test/export-media.json'
142+
},
143+
expect: 'basic.expect.css',
144+
result: 'basic.result.css',
145+
before() {
146+
global.__exportMediaString = require('fs').readFileSync('test/export-media.json', 'utf8');
147+
},
148+
after() {
149+
if (global.__exportMediaString !== require('fs').readFileSync('test/export-media.json', 'utf8')) {
150+
throw new Error('The original file did not match the freshly exported copy');
151+
}
152+
}
153+
},
154+
'basic:export-js': {
155+
message: 'supports { exportTo: "test/export-media.js" } usage',
156+
options: {
157+
exportTo: 'test/export-media.js'
158+
},
159+
expect: 'basic.expect.css',
160+
result: 'basic.result.css',
161+
before() {
162+
global.__exportMediaString = require('fs').readFileSync('test/export-media.js', 'utf8');
163+
},
164+
after() {
165+
if (global.__exportMediaString !== require('fs').readFileSync('test/export-media.js', 'utf8')) {
166+
throw new Error('The original file did not match the freshly exported copy');
167+
}
168+
}
169+
},
170+
'basic:export-mjs': {
171+
message: 'supports { exportTo: "test/export-media.mjs" } usage',
172+
options: {
173+
exportTo: 'test/export-media.mjs'
174+
},
175+
expect: 'basic.expect.css',
176+
result: 'basic.result.css',
177+
before() {
178+
global.__exportMediaString = require('fs').readFileSync('test/export-media.mjs', 'utf8');
179+
},
180+
after() {
181+
if (global.__exportMediaString !== require('fs').readFileSync('test/export-media.mjs', 'utf8')) {
182+
throw new Error('The original file did not match the freshly exported copy');
183+
}
184+
}
185+
},
186+
'basic:export-css': {
187+
message: 'supports { exportTo: "test/export-media.css" } usage',
188+
options: {
189+
exportTo: 'test/export-media.css'
190+
},
191+
expect: 'basic.expect.css',
192+
result: 'basic.result.css',
193+
before() {
194+
global.__exportMediaString = require('fs').readFileSync('test/export-media.css', 'utf8');
195+
},
196+
after() {
197+
if (global.__exportMediaString !== require('fs').readFileSync('test/export-media.css', 'utf8')) {
198+
throw new Error('The original file did not match the freshly exported copy');
199+
}
200+
}
201+
},
202+
'basic:export-css-to': {
203+
message: 'supports { exportTo: { to: "test/export-media.css" } } usage',
204+
options: {
205+
exportTo: { to: 'test/export-media.css' }
206+
},
207+
expect: 'basic.expect.css',
208+
result: 'basic.result.css',
209+
before() {
210+
global.__exportMediaString = require('fs').readFileSync('test/export-media.css', 'utf8');
211+
},
212+
after() {
213+
if (global.__exportMediaString !== require('fs').readFileSync('test/export-media.css', 'utf8')) {
214+
throw new Error('The original file did not match the freshly exported copy');
215+
}
216+
}
217+
},
218+
'basic:export-css-to-type': {
219+
message: 'supports { exportTo: { to: "test/export-media.css", type: "css" } } usage',
220+
options: {
221+
exportTo: { to: 'test/export-media.css', type: 'css' }
222+
},
223+
expect: 'basic.expect.css',
224+
result: 'basic.result.css',
225+
before() {
226+
global.__exportMediaString = require('fs').readFileSync('test/export-media.css', 'utf8');
227+
},
228+
after() {
229+
if (global.__exportMediaString !== require('fs').readFileSync('test/export-media.css', 'utf8')) {
230+
throw new Error('The original file did not match the freshly exported copy');
231+
}
232+
}
5233
}
6234
}
7235
};

‎plugins/postcss-custom-media/CHANGELOG.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
# Changes to PostCSS Custom Media
22

3-
### 7.0.0 (September 12, 2018)
3+
### 7.0.1 (September 14, 2018)
4+
5+
- Fixed: An issue with how opposing queries are resolved.
6+
7+
### 7.0.0 (September 14, 2018)
48

59
- Added: New `preserve` option to preserve custom media and atrules using them
610
- Added: New `exportTo` function to specify where to export custom media

‎plugins/postcss-custom-media/lib/import-from.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import getCustomMedia from './custom-media-from-root';
88
/* ========================================================================== */
99

1010
function importCustomMediaFromCSSAST(root) {
11-
return getCustomMedia(root);
11+
return getCustomMedia(root, { preserve: true });
1212
}
1313

1414
/* Import Custom Media from CSS File

‎plugins/postcss-custom-media/lib/transform-params-by-custom-params.js

+21-7
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,17 @@ function transformMedia(media, customMedias) {
2525

2626
if (key in customMedias) {
2727
for (const replacementMedia of customMedias[key].nodes) {
28+
// use the first available modifier unless they cancel each other out
29+
const modifier = media.modifier !== replacementMedia.modifier
30+
? media.modifier || replacementMedia.modifier
31+
: '';
2832
const mediaClone = media.clone({
29-
modifier: replacementMedia.modifier === media.modifier && modifierRegExp.test(media.modifier)
30-
? ''
31-
: replacementMedia.modifier
33+
modifier,
34+
// conditionally use the raws from the first available modifier
35+
raws: !modifier || media.modifier
36+
? { ...media.raws }
37+
: { ...replacementMedia.raws },
38+
type: media.type || replacementMedia.type
3239
});
3340

3441
mediaClone.nodes.splice(index, 1, ...replacementMedia.clone().nodes.map(node => {
@@ -38,9 +45,9 @@ function transformMedia(media, customMedias) {
3845
return node;
3946
}));
4047

41-
const retranspiledMedias = String(mediaClone) === String(customMedias[key])
42-
? []
43-
: transformMedia(mediaClone, customMedias);
48+
// remove the currently transformed key to prevent recursion
49+
const nextCustomMedia = getCustomMediasWithoutKey(customMedias, key);
50+
const retranspiledMedias = transformMedia(mediaClone, nextCustomMedia);
4451

4552
if (retranspiledMedias.length) {
4653
transpiledMedias.push(...retranspiledMedias);
@@ -58,5 +65,12 @@ function transformMedia(media, customMedias) {
5865
return transpiledMedias;
5966
}
6067

61-
const modifierRegExp = /^not$/i;
6268
const customPseudoRegExp = /\((--[A-z][\w-]*)\)/;
69+
70+
const getCustomMediasWithoutKey = (customMedias, key) => {
71+
const nextCustomMedias = Object.assign({}, customMedias);
72+
73+
delete nextCustomMedias[key];
74+
75+
return nextCustomMedias;
76+
};

‎plugins/postcss-custom-media/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "postcss-custom-media",
3-
"version": "7.0.0",
3+
"version": "7.0.1",
44
"description": "Use Custom Media Queries in CSS",
55
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
66
"contributors": [
@@ -30,7 +30,7 @@
3030
"postcss": "^7.0.2"
3131
},
3232
"devDependencies": {
33-
"@babel/core": "^7.0.0",
33+
"@babel/core": "^7.0.1",
3434
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
3535
"@babel/preset-env": "^7.0.0",
3636
"babel-eslint": "^9.0.0",

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

+20-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,31 @@
11
@custom-media --mq-a (max-width: 30em), (max-height: 30em);
22
@custom-media --not-mq-a not all and (--mq-a);
33

4-
@media not (--mq-a) {
4+
@media (--mq-a) {
55
body {
66
order: 1;
77
}
88
}
99

10-
@media not (--not-mq-a) {
10+
@media (--mq-a), (--mq-a) {
11+
body {
12+
order: 1;
13+
}
14+
}
15+
16+
@media not all and (--mq-a) {
17+
body {
18+
order: 2;
19+
}
20+
}
21+
22+
@media (--not-mq-a) {
23+
body {
24+
order: 1;
25+
}
26+
}
27+
28+
@media not all and (--not-mq-a) {
1129
body {
1230
order: 2;
1331
}

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

+21-3
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,37 @@
44
}
55
}
66

7-
@media (max-width: 30em),(max-height: 30em) {
7+
@media (max-width: 30em),(max-height: 30em), (max-width: 30em), (max-height: 30em) {
8+
body {
9+
order: 1;
10+
}
11+
}
12+
13+
@media not all and (max-width: 30em),not all and (max-height: 30em) {
814
body {
915
order: 2;
1016
}
1117
}
1218

13-
@media (--circular-mq-b) {
19+
@media not all and (max-width: 30em),not all and (max-height: 30em) {
1420
body {
15-
order: 3;
21+
order: 1;
22+
}
23+
}
24+
25+
@media all and (max-width: 30em),all and (max-height: 30em) {
26+
body {
27+
order: 2;
1628
}
1729
}
1830

1931
@media (--circular-mq-a) {
32+
body {
33+
order: 3;
34+
}
35+
}
36+
37+
@media (--circular-mq-b) {
2038
body {
2139
order: 4;
2240
}

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

Whitespace-only changes.

0 commit comments

Comments
 (0)