Skip to content

Commit 65450d9

Browse files
evilebottnawievilebottnawi
authored
fix: logic for order and media queries for imports (#1018)
1 parent cbca64d commit 65450d9

15 files changed

+588
-220
lines changed

‎src/runtime/api.js

+8-23
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ module.exports = function(useSourceMap) {
1313
const content = cssWithMappingToString(item, useSourceMap);
1414

1515
if (item[2]) {
16-
return `@media ${item[2]}{${content}}`;
16+
return `@media ${item[2]} {${content}}`;
1717
}
1818

1919
return content;
@@ -28,33 +28,18 @@ module.exports = function(useSourceMap) {
2828
modules = [[null, modules, '']];
2929
}
3030

31-
const alreadyImportedModules = {};
32-
33-
for (let i = 0; i < this.length; i++) {
34-
// eslint-disable-next-line prefer-destructuring
35-
const id = this[i][0];
36-
37-
if (id != null) {
38-
alreadyImportedModules[id] = true;
39-
}
40-
}
41-
4231
for (let i = 0; i < modules.length; i++) {
43-
const item = modules[i];
32+
const item = [].concat(modules[i]);
4433

45-
// skip already imported module
46-
// this implementation is not 100% perfect for weird media query combinations
47-
// when a module is imported multiple times with different media queries.
48-
// I hope this will never occur (Hey this way we have smaller bundles)
49-
if (item[0] == null || !alreadyImportedModules[item[0]]) {
50-
if (mediaQuery && !item[2]) {
34+
if (mediaQuery) {
35+
if (!item[2]) {
5136
item[2] = mediaQuery;
52-
} else if (mediaQuery) {
53-
item[2] = `(${item[2]}) and (${mediaQuery})`;
37+
} else {
38+
item[2] = `${mediaQuery} and ${item[2]}`;
5439
}
55-
56-
list.push(item);
5740
}
41+
42+
list.push(item);
5843
}
5944
};
6045

‎test/__snapshots__/import-option.test.js.snap

+479-38
Large diffs are not rendered by default.

‎test/__snapshots__/loader.test.js.snap

+54-144
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ module.exports = function(useSourceMap) {
1616
const content = cssWithMappingToString(item, useSourceMap);
1717
1818
if (item[2]) {
19-
return \`@media \${item[2]}{\${content}}\`;
19+
return \`@media \${item[2]} {\${content}}\`;
2020
}
2121
2222
return content;
@@ -31,33 +31,18 @@ module.exports = function(useSourceMap) {
3131
modules = [[null, modules, '']];
3232
}
3333
34-
const alreadyImportedModules = {};
35-
36-
for (let i = 0; i < this.length; i++) {
37-
// eslint-disable-next-line prefer-destructuring
38-
const id = this[i][0];
39-
40-
if (id != null) {
41-
alreadyImportedModules[id] = true;
42-
}
43-
}
44-
4534
for (let i = 0; i < modules.length; i++) {
46-
const item = modules[i];
47-
48-
// skip already imported module
49-
// this implementation is not 100% perfect for weird media query combinations
50-
// when a module is imported multiple times with different media queries.
51-
// I hope this will never occur (Hey this way we have smaller bundles)
52-
if (item[0] == null || !alreadyImportedModules[item[0]]) {
53-
if (mediaQuery && !item[2]) {
35+
const item = [].concat(modules[i]);
36+
37+
if (mediaQuery) {
38+
if (!item[2]) {
5439
item[2] = mediaQuery;
55-
} else if (mediaQuery) {
56-
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
40+
} else {
41+
item[2] = \`\${mediaQuery} and \${item[2]}\`;
5742
}
58-
59-
list.push(item);
6043
}
44+
45+
list.push(item);
6146
}
6247
};
6348
@@ -322,7 +307,7 @@ module.exports = function(useSourceMap) {
322307
const content = cssWithMappingToString(item, useSourceMap);
323308
324309
if (item[2]) {
325-
return \`@media \${item[2]}{\${content}}\`;
310+
return \`@media \${item[2]} {\${content}}\`;
326311
}
327312
328313
return content;
@@ -337,33 +322,18 @@ module.exports = function(useSourceMap) {
337322
modules = [[null, modules, '']];
338323
}
339324
340-
const alreadyImportedModules = {};
341-
342-
for (let i = 0; i < this.length; i++) {
343-
// eslint-disable-next-line prefer-destructuring
344-
const id = this[i][0];
345-
346-
if (id != null) {
347-
alreadyImportedModules[id] = true;
348-
}
349-
}
350-
351325
for (let i = 0; i < modules.length; i++) {
352-
const item = modules[i];
353-
354-
// skip already imported module
355-
// this implementation is not 100% perfect for weird media query combinations
356-
// when a module is imported multiple times with different media queries.
357-
// I hope this will never occur (Hey this way we have smaller bundles)
358-
if (item[0] == null || !alreadyImportedModules[item[0]]) {
359-
if (mediaQuery && !item[2]) {
326+
const item = [].concat(modules[i]);
327+
328+
if (mediaQuery) {
329+
if (!item[2]) {
360330
item[2] = mediaQuery;
361-
} else if (mediaQuery) {
362-
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
331+
} else {
332+
item[2] = \`\${mediaQuery} and \${item[2]}\`;
363333
}
364-
365-
list.push(item);
366334
}
335+
336+
list.push(item);
367337
}
368338
};
369339
@@ -652,7 +622,7 @@ module.exports = function(useSourceMap) {
652622
const content = cssWithMappingToString(item, useSourceMap);
653623
654624
if (item[2]) {
655-
return \`@media \${item[2]}{\${content}}\`;
625+
return \`@media \${item[2]} {\${content}}\`;
656626
}
657627
658628
return content;
@@ -667,33 +637,18 @@ module.exports = function(useSourceMap) {
667637
modules = [[null, modules, '']];
668638
}
669639
670-
const alreadyImportedModules = {};
671-
672-
for (let i = 0; i < this.length; i++) {
673-
// eslint-disable-next-line prefer-destructuring
674-
const id = this[i][0];
675-
676-
if (id != null) {
677-
alreadyImportedModules[id] = true;
678-
}
679-
}
680-
681640
for (let i = 0; i < modules.length; i++) {
682-
const item = modules[i];
683-
684-
// skip already imported module
685-
// this implementation is not 100% perfect for weird media query combinations
686-
// when a module is imported multiple times with different media queries.
687-
// I hope this will never occur (Hey this way we have smaller bundles)
688-
if (item[0] == null || !alreadyImportedModules[item[0]]) {
689-
if (mediaQuery && !item[2]) {
641+
const item = [].concat(modules[i]);
642+
643+
if (mediaQuery) {
644+
if (!item[2]) {
690645
item[2] = mediaQuery;
691-
} else if (mediaQuery) {
692-
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
646+
} else {
647+
item[2] = \`\${mediaQuery} and \${item[2]}\`;
693648
}
694-
695-
list.push(item);
696649
}
650+
651+
list.push(item);
697652
}
698653
};
699654
@@ -958,7 +913,7 @@ module.exports = function(useSourceMap) {
958913
const content = cssWithMappingToString(item, useSourceMap);
959914
960915
if (item[2]) {
961-
return \`@media \${item[2]}{\${content}}\`;
916+
return \`@media \${item[2]} {\${content}}\`;
962917
}
963918
964919
return content;
@@ -973,33 +928,18 @@ module.exports = function(useSourceMap) {
973928
modules = [[null, modules, '']];
974929
}
975930
976-
const alreadyImportedModules = {};
977-
978-
for (let i = 0; i < this.length; i++) {
979-
// eslint-disable-next-line prefer-destructuring
980-
const id = this[i][0];
981-
982-
if (id != null) {
983-
alreadyImportedModules[id] = true;
984-
}
985-
}
986-
987931
for (let i = 0; i < modules.length; i++) {
988-
const item = modules[i];
989-
990-
// skip already imported module
991-
// this implementation is not 100% perfect for weird media query combinations
992-
// when a module is imported multiple times with different media queries.
993-
// I hope this will never occur (Hey this way we have smaller bundles)
994-
if (item[0] == null || !alreadyImportedModules[item[0]]) {
995-
if (mediaQuery && !item[2]) {
932+
const item = [].concat(modules[i]);
933+
934+
if (mediaQuery) {
935+
if (!item[2]) {
996936
item[2] = mediaQuery;
997-
} else if (mediaQuery) {
998-
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
937+
} else {
938+
item[2] = \`\${mediaQuery} and \${item[2]}\`;
999939
}
1000-
1001-
list.push(item);
1002940
}
941+
942+
list.push(item);
1003943
}
1004944
};
1005945
@@ -1428,7 +1368,7 @@ module.exports = function(useSourceMap) {
14281368
const content = cssWithMappingToString(item, useSourceMap);
14291369
14301370
if (item[2]) {
1431-
return \`@media \${item[2]}{\${content}}\`;
1371+
return \`@media \${item[2]} {\${content}}\`;
14321372
}
14331373
14341374
return content;
@@ -1443,33 +1383,18 @@ module.exports = function(useSourceMap) {
14431383
modules = [[null, modules, '']];
14441384
}
14451385
1446-
const alreadyImportedModules = {};
1447-
1448-
for (let i = 0; i < this.length; i++) {
1449-
// eslint-disable-next-line prefer-destructuring
1450-
const id = this[i][0];
1451-
1452-
if (id != null) {
1453-
alreadyImportedModules[id] = true;
1454-
}
1455-
}
1456-
14571386
for (let i = 0; i < modules.length; i++) {
1458-
const item = modules[i];
1459-
1460-
// skip already imported module
1461-
// this implementation is not 100% perfect for weird media query combinations
1462-
// when a module is imported multiple times with different media queries.
1463-
// I hope this will never occur (Hey this way we have smaller bundles)
1464-
if (item[0] == null || !alreadyImportedModules[item[0]]) {
1465-
if (mediaQuery && !item[2]) {
1387+
const item = [].concat(modules[i]);
1388+
1389+
if (mediaQuery) {
1390+
if (!item[2]) {
14661391
item[2] = mediaQuery;
1467-
} else if (mediaQuery) {
1468-
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
1392+
} else {
1393+
item[2] = \`\${mediaQuery} and \${item[2]}\`;
14691394
}
1470-
1471-
list.push(item);
14721395
}
1396+
1397+
list.push(item);
14731398
}
14741399
};
14751400
@@ -1708,7 +1633,7 @@ module.exports = function(useSourceMap) {
17081633
const content = cssWithMappingToString(item, useSourceMap);
17091634
17101635
if (item[2]) {
1711-
return \`@media \${item[2]}{\${content}}\`;
1636+
return \`@media \${item[2]} {\${content}}\`;
17121637
}
17131638
17141639
return content;
@@ -1723,33 +1648,18 @@ module.exports = function(useSourceMap) {
17231648
modules = [[null, modules, '']];
17241649
}
17251650
1726-
const alreadyImportedModules = {};
1727-
1728-
for (let i = 0; i < this.length; i++) {
1729-
// eslint-disable-next-line prefer-destructuring
1730-
const id = this[i][0];
1731-
1732-
if (id != null) {
1733-
alreadyImportedModules[id] = true;
1734-
}
1735-
}
1736-
17371651
for (let i = 0; i < modules.length; i++) {
1738-
const item = modules[i];
1739-
1740-
// skip already imported module
1741-
// this implementation is not 100% perfect for weird media query combinations
1742-
// when a module is imported multiple times with different media queries.
1743-
// I hope this will never occur (Hey this way we have smaller bundles)
1744-
if (item[0] == null || !alreadyImportedModules[item[0]]) {
1745-
if (mediaQuery && !item[2]) {
1652+
const item = [].concat(modules[i]);
1653+
1654+
if (mediaQuery) {
1655+
if (!item[2]) {
17461656
item[2] = mediaQuery;
1747-
} else if (mediaQuery) {
1748-
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
1657+
} else {
1658+
item[2] = \`\${mediaQuery} and \${item[2]}\`;
17491659
}
1750-
1751-
list.push(item);
17521660
}
1661+
1662+
list.push(item);
17531663
}
17541664
};
17551665

‎test/fixtures/import/import.css

+8-8
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,19 @@
2222
@import url();
2323
@import url('');
2424
@import url("");
25-
@import url(test.css) screen and print;
26-
@import url(test.css) SCREEN AND PRINT;
27-
@import url(test.css)screen and print;
28-
@import url(test.css) screen and print;
29-
@import url(test-media.css) screen and print;
25+
@import url(test.css) screen and (orientation:landscape);
26+
@import url(test.css) SCREEN AND (ORIENTATION: LANDSCAPE);
27+
@import url(test.css)screen and (orientation:landscape);
28+
@import url(test.css) screen and (orientation:landscape);
29+
@import url(test-media.css) screen and (orientation:landscape);
3030
@import url(test-other.css) (min-width: 100px);
3131
@import url(http://example.com/style.css);
3232
@import url(http://example.com/style.css);
3333
@import url(http://example.com/style.css#hash);
3434
@import url(http://example.com/style.css?#hash);
3535
@import url(http://example.com/style.css?foo=bar#hash);
36-
@import url(http://example.com/other-style.css) screen and print;
37-
@import url(http://example.com/other-style.css) screen and print;
36+
@import url(http://example.com/other-style.css) screen and (orientation:landscape);
37+
@import url(http://example.com/other-style.css) screen and (orientation:landscape);
3838
@import url("//example.com/style.css");
3939
@import url(~package/test.css);
4040
@import ;
@@ -43,7 +43,7 @@
4343
@import url('http://') :root {}
4444
@import url('query.css?foo=1&bar=1');
4545
@import url('other-query.css?foo=1&bar=1#hash');
46-
@import url('other-query.css?foo=1&bar=1#hash') screen and print;
46+
@import url('other-query.css?foo=1&bar=1#hash') screen and (orientation:landscape);
4747
@import url('https://fonts.googleapis.com/css?family=Roboto');
4848
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');
4949
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto');

‎test/fixtures/import/order-1.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
div {
2-
background: red;
1+
.order-1 {
2+
color: red;
33
}

0 commit comments

Comments
 (0)