Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: logic for order and media queries for imports #1018

Merged
merged 1 commit into from Dec 12, 2019
Merged

fix: logic for order and media queries for imports #1018

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 8 additions & 23 deletions src/runtime/api.js
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

198 changes: 54 additions & 144 deletions test/__snapshots__/loader.test.js.snap
View file
Open in desktop
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
Open in desktop
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
Open in desktop
@@ -1,3 +1,3 @@
div {
background: red;
.order-1 {
color: red;
}