Skip to content

Commit

Permalink
fix: logic for order and media queries for imports
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed Dec 12, 2019
1 parent cbca64d commit 1fb5134
Show file tree
Hide file tree
Showing 15 changed files with 588 additions and 220 deletions.
31 changes: 8 additions & 23 deletions src/runtime/api.js
View file
Expand Up @@ -13,7 +13,7 @@ module.exports = function(useSourceMap) {
const content = cssWithMappingToString(item, useSourceMap);

if (item[2]) {
return `@media ${item[2]}{${content}}`;
return `@media ${item[2]} {${content}}`;
}

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

const alreadyImportedModules = {};

for (let i = 0; i < this.length; i++) {
// eslint-disable-next-line prefer-destructuring
const id = this[i][0];

if (id != null) {
alreadyImportedModules[id] = true;
}
}

for (let i = 0; i < modules.length; i++) {
const item = modules[i];
const item = [].concat(modules[i]);

// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (item[0] == null || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
if (mediaQuery) {
if (!item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = `(${item[2]}) and (${mediaQuery})`;
} else {
item[2] = `${mediaQuery} and ${item[2]}`;
}

list.push(item);
}

list.push(item);
}
};

Expand Down
517 changes: 479 additions & 38 deletions test/__snapshots__/import-option.test.js.snap
View file

Large diffs are not rendered by default.

198 changes: 54 additions & 144 deletions test/__snapshots__/loader.test.js.snap
View file
Expand Up @@ -16,7 +16,7 @@ module.exports = function(useSourceMap) {
const content = cssWithMappingToString(item, useSourceMap);
if (item[2]) {
return \`@media \${item[2]}{\${content}}\`;
return \`@media \${item[2]} {\${content}}\`;
}
return content;
Expand All @@ -31,33 +31,18 @@ module.exports = function(useSourceMap) {
modules = [[null, modules, '']];
}
const alreadyImportedModules = {};
for (let i = 0; i < this.length; i++) {
// eslint-disable-next-line prefer-destructuring
const id = this[i][0];
if (id != null) {
alreadyImportedModules[id] = true;
}
}
for (let i = 0; i < modules.length; i++) {
const item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (item[0] == null || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
const item = [].concat(modules[i]);
if (mediaQuery) {
if (!item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
} else {
item[2] = \`\${mediaQuery} and \${item[2]}\`;
}
list.push(item);
}
list.push(item);
}
};
Expand Down Expand Up @@ -322,7 +307,7 @@ module.exports = function(useSourceMap) {
const content = cssWithMappingToString(item, useSourceMap);
if (item[2]) {
return \`@media \${item[2]}{\${content}}\`;
return \`@media \${item[2]} {\${content}}\`;
}
return content;
Expand All @@ -337,33 +322,18 @@ module.exports = function(useSourceMap) {
modules = [[null, modules, '']];
}
const alreadyImportedModules = {};
for (let i = 0; i < this.length; i++) {
// eslint-disable-next-line prefer-destructuring
const id = this[i][0];
if (id != null) {
alreadyImportedModules[id] = true;
}
}
for (let i = 0; i < modules.length; i++) {
const item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (item[0] == null || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
const item = [].concat(modules[i]);
if (mediaQuery) {
if (!item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
} else {
item[2] = \`\${mediaQuery} and \${item[2]}\`;
}
list.push(item);
}
list.push(item);
}
};
Expand Down Expand Up @@ -652,7 +622,7 @@ module.exports = function(useSourceMap) {
const content = cssWithMappingToString(item, useSourceMap);
if (item[2]) {
return \`@media \${item[2]}{\${content}}\`;
return \`@media \${item[2]} {\${content}}\`;
}
return content;
Expand All @@ -667,33 +637,18 @@ module.exports = function(useSourceMap) {
modules = [[null, modules, '']];
}
const alreadyImportedModules = {};
for (let i = 0; i < this.length; i++) {
// eslint-disable-next-line prefer-destructuring
const id = this[i][0];
if (id != null) {
alreadyImportedModules[id] = true;
}
}
for (let i = 0; i < modules.length; i++) {
const item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (item[0] == null || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
const item = [].concat(modules[i]);
if (mediaQuery) {
if (!item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
} else {
item[2] = \`\${mediaQuery} and \${item[2]}\`;
}
list.push(item);
}
list.push(item);
}
};
Expand Down Expand Up @@ -958,7 +913,7 @@ module.exports = function(useSourceMap) {
const content = cssWithMappingToString(item, useSourceMap);
if (item[2]) {
return \`@media \${item[2]}{\${content}}\`;
return \`@media \${item[2]} {\${content}}\`;
}
return content;
Expand All @@ -973,33 +928,18 @@ module.exports = function(useSourceMap) {
modules = [[null, modules, '']];
}
const alreadyImportedModules = {};
for (let i = 0; i < this.length; i++) {
// eslint-disable-next-line prefer-destructuring
const id = this[i][0];
if (id != null) {
alreadyImportedModules[id] = true;
}
}
for (let i = 0; i < modules.length; i++) {
const item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (item[0] == null || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
const item = [].concat(modules[i]);
if (mediaQuery) {
if (!item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
} else {
item[2] = \`\${mediaQuery} and \${item[2]}\`;
}
list.push(item);
}
list.push(item);
}
};
Expand Down Expand Up @@ -1428,7 +1368,7 @@ module.exports = function(useSourceMap) {
const content = cssWithMappingToString(item, useSourceMap);
if (item[2]) {
return \`@media \${item[2]}{\${content}}\`;
return \`@media \${item[2]} {\${content}}\`;
}
return content;
Expand All @@ -1443,33 +1383,18 @@ module.exports = function(useSourceMap) {
modules = [[null, modules, '']];
}
const alreadyImportedModules = {};
for (let i = 0; i < this.length; i++) {
// eslint-disable-next-line prefer-destructuring
const id = this[i][0];
if (id != null) {
alreadyImportedModules[id] = true;
}
}
for (let i = 0; i < modules.length; i++) {
const item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (item[0] == null || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
const item = [].concat(modules[i]);
if (mediaQuery) {
if (!item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
} else {
item[2] = \`\${mediaQuery} and \${item[2]}\`;
}
list.push(item);
}
list.push(item);
}
};
Expand Down Expand Up @@ -1708,7 +1633,7 @@ module.exports = function(useSourceMap) {
const content = cssWithMappingToString(item, useSourceMap);
if (item[2]) {
return \`@media \${item[2]}{\${content}}\`;
return \`@media \${item[2]} {\${content}}\`;
}
return content;
Expand All @@ -1723,33 +1648,18 @@ module.exports = function(useSourceMap) {
modules = [[null, modules, '']];
}
const alreadyImportedModules = {};
for (let i = 0; i < this.length; i++) {
// eslint-disable-next-line prefer-destructuring
const id = this[i][0];
if (id != null) {
alreadyImportedModules[id] = true;
}
}
for (let i = 0; i < modules.length; i++) {
const item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (item[0] == null || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
const item = [].concat(modules[i]);
if (mediaQuery) {
if (!item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
} else {
item[2] = \`\${mediaQuery} and \${item[2]}\`;
}
list.push(item);
}
list.push(item);
}
};
Expand Down
16 changes: 8 additions & 8 deletions test/fixtures/import/import.css
View file
Expand Up @@ -22,19 +22,19 @@
@import url();
@import url('');
@import url("");
@import url(test.css) screen and print;
@import url(test.css) SCREEN AND PRINT;
@import url(test.css)screen and print;
@import url(test.css) screen and print;
@import url(test-media.css) screen and print;
@import url(test.css) screen and (orientation:landscape);
@import url(test.css) SCREEN AND (ORIENTATION: LANDSCAPE);
@import url(test.css)screen and (orientation:landscape);
@import url(test.css) screen and (orientation:landscape);
@import url(test-media.css) screen and (orientation:landscape);
@import url(test-other.css) (min-width: 100px);
@import url(http://example.com/style.css);
@import url(http://example.com/style.css);
@import url(http://example.com/style.css#hash);
@import url(http://example.com/style.css?#hash);
@import url(http://example.com/style.css?foo=bar#hash);
@import url(http://example.com/other-style.css) screen and print;
@import url(http://example.com/other-style.css) screen and print;
@import url(http://example.com/other-style.css) screen and (orientation:landscape);
@import url(http://example.com/other-style.css) screen and (orientation:landscape);
@import url("//example.com/style.css");
@import url(~package/test.css);
@import ;
Expand All @@ -43,7 +43,7 @@
@import url('http://') :root {}
@import url('query.css?foo=1&bar=1');
@import url('other-query.css?foo=1&bar=1#hash');
@import url('other-query.css?foo=1&bar=1#hash') screen and print;
@import url('other-query.css?foo=1&bar=1#hash') screen and (orientation:landscape);
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto');
Expand Down
4 changes: 2 additions & 2 deletions test/fixtures/import/order-1.css
View file
@@ -1,3 +1,3 @@
div {
background: red;
.order-1 {
color: red;
}

0 comments on commit 1fb5134

Please sign in to comment.