Skip to content

Commit

Permalink
fix(multi-entry): correct and consistent order of single extracted file
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anidetrix
Anidetrix committed May 14, 2020
1 parent 18c3022 commit 553ca85
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 65 deletions.
38 changes: 19 additions & 19 deletions __tests__/__snapshots__/index.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,9 +564,15 @@ exports[`code-splitting multi-entry-single: css 1`] = `
".third_third {
color: maroon; }
.third2_third2 {
color: hotpink; }
.fourth_fourth {
color: magenta; }
.fourth2_fourth2 {
color: honeydew; }
.first_partial {
color: rosybrown;
}
Expand All @@ -576,25 +582,19 @@ exports[`code-splitting multi-entry-single: css 1`] = `
.second_second {
color: royalblue; }
.third2_third2 {
color: hotpink; }
.fourth2_fourth2 {
color: honeydew; }
.otherScript_otherScript {
color: wheat; }
.nestedScript_nestedScript {
color: rebeccapurple; }
.nondynamic_nondynamic {
color: deepskyblue; }
.nondynamic2_nondynamic2 {
color: deeppink; }
/*# sourceMappingURL=extracted-ce4cad6d.css.map */"
.nestedScript_nestedScript {
color: rebeccapurple; }
/*# sourceMappingURL=extracted-332bb2b3.css.map */"
`;

exports[`code-splitting multi-entry-single: js 1`] = `
Expand Down Expand Up @@ -692,7 +692,7 @@ export { css };
"
`;

exports[`code-splitting multi-entry-single: map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"../../../../code-splitting/third.scss\\",\\"../../../../code-splitting/fourth.scss\\",\\"../../../../code-splitting/partial.css\\",\\"../../../../code-splitting/first.scss\\",\\"../../../../code-splitting/second.scss\\",\\"../../../../code-splitting/third2.scss\\",\\"../../../../code-splitting/fourth2.scss\\",\\"../../../../code-splitting/other-script.scss\\",\\"../../../../code-splitting/nested-script.scss\\",\\"../../../../code-splitting/nondynamic.scss\\",\\"../../../../code-splitting/nondynamic2.scss\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,aAAa,EAAA;;ACDf;EACE,cAAc,EAAA;;ACDhB;EACE,gBAAgB;AAClB;ACAA;EACE,UAAU,EAAA;;ACHZ;EACE,gBAAgB,EAAA;;ACDlB;EACE,cAAc,EAAA;;ACDhB;EACE,eAAe,EAAA;;ACDjB;EACE,YAAY,EAAA;;ACDd;EACE,oBAAoB,EAAA;;ACDtB;EACE,kBAAkB,EAAA;;ACDpB;EACE,eAAe,EAAA\\",\\"file\\":\\"extracted-ce4cad6d.css\\",\\"sourcesContent\\":[\\".third {\\\\n color: maroon;\\\\n}\\\\n\\",\\".fourth {\\\\n color: magenta;\\\\n}\\\\n\\",\\".partial {\\\\n color: rosybrown;\\\\n}\\\\n\\",\\"@import \\\\\\"./partial.css\\\\\\";\\\\n\\\\n.first {\\\\n color: red;\\\\n}\\\\n\\",\\".second {\\\\n color: royalblue;\\\\n}\\\\n\\",\\".third2 {\\\\n color: hotpink;\\\\n}\\\\n\\",\\".fourth2 {\\\\n color: honeydew;\\\\n}\\\\n\\",\\".other-script {\\\\n color: wheat;\\\\n}\\\\n\\",\\".nested-script {\\\\n color: rebeccapurple;\\\\n}\\\\n\\",\\".nondynamic {\\\\n color: deepskyblue;\\\\n}\\\\n\\",\\".nondynamic2 {\\\\n color: deeppink;\\\\n}\\\\n\\"]}"`;
exports[`code-splitting multi-entry-single: map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"../../../../code-splitting/third.scss\\",\\"../../../../code-splitting/third2.scss\\",\\"../../../../code-splitting/fourth.scss\\",\\"../../../../code-splitting/fourth2.scss\\",\\"../../../../code-splitting/partial.css\\",\\"../../../../code-splitting/first.scss\\",\\"../../../../code-splitting/second.scss\\",\\"../../../../code-splitting/other-script.scss\\",\\"../../../../code-splitting/nondynamic.scss\\",\\"../../../../code-splitting/nondynamic2.scss\\",\\"../../../../code-splitting/nested-script.scss\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,aAAa,EAAA;;ACDf;EACE,cAAc,EAAA;;ACDhB;EACE,cAAc,EAAA;;ACDhB;EACE,eAAe,EAAA;;ACDjB;EACE,gBAAgB;AAClB;ACAA;EACE,UAAU,EAAA;;ACHZ;EACE,gBAAgB,EAAA;;ACDlB;EACE,YAAY,EAAA;;ACDd;EACE,kBAAkB,EAAA;;ACDpB;EACE,eAAe,EAAA;;ACDjB;EACE,oBAAoB,EAAA\\",\\"file\\":\\"extracted-332bb2b3.css\\",\\"sourcesContent\\":[\\".third {\\\\n color: maroon;\\\\n}\\\\n\\",\\".third2 {\\\\n color: hotpink;\\\\n}\\\\n\\",\\".fourth {\\\\n color: magenta;\\\\n}\\\\n\\",\\".fourth2 {\\\\n color: honeydew;\\\\n}\\\\n\\",\\".partial {\\\\n color: rosybrown;\\\\n}\\\\n\\",\\"@import \\\\\\"./partial.css\\\\\\";\\\\n\\\\n.first {\\\\n color: red;\\\\n}\\\\n\\",\\".second {\\\\n color: royalblue;\\\\n}\\\\n\\",\\".other-script {\\\\n color: wheat;\\\\n}\\\\n\\",\\".nondynamic {\\\\n color: deepskyblue;\\\\n}\\\\n\\",\\".nondynamic2 {\\\\n color: deeppink;\\\\n}\\\\n\\",\\".nested-script {\\\\n color: rebeccapurple;\\\\n}\\\\n\\"]}"`;

exports[`code-splitting single: css 1`] = `
".third_third {
Expand Down Expand Up @@ -739,9 +739,9 @@ exports[`code-splitting single: js 2`] = `
"const modules_0858c0ee = {\\"fourth\\":\\"fourth_fourth\\"};
(async () => {
const first = await import('./first-4ee52dc0.js');
const second = await import('./second-0e0469bf.js');
const otherScript = await import('./other-script-71e1de4d.js');
const first = await import('./first-d485e816.js');
const second = await import('./second-23bff606.js');
const otherScript = await import('./other-script-2c3340ab.js');
console.log(first, second, otherScript);
})();
Expand All @@ -764,7 +764,7 @@ exports[`code-splitting single: js 4`] = `
exports[`code-splitting single: js 5`] = `
"(async () => {
await import('./noncss-f3feb5ac.js');
const nestedScript = await import('./nested-script-3a18b46f.js');
const nestedScript = await import('./nested-script-fb424854.js');
console.log(nestedScript);
})();
"
Expand Down Expand Up @@ -843,9 +843,9 @@ exports[`code-splitting true: js 2`] = `
"const modules_0858c0ee = {\\"fourth\\":\\"fourth_fourth\\"};
(async () => {
const first = await import('./first-4ee52dc0.js');
const second = await import('./second-0e0469bf.js');
const otherScript = await import('./other-script-71e1de4d.js');
const first = await import('./first-d485e816.js');
const second = await import('./second-23bff606.js');
const otherScript = await import('./other-script-2c3340ab.js');
console.log(first, second, otherScript);
})();
Expand All @@ -868,7 +868,7 @@ exports[`code-splitting true: js 4`] = `
exports[`code-splitting true: js 5`] = `
"(async () => {
await import('./noncss-f3feb5ac.js');
const nestedScript = await import('./nested-script-3a18b46f.js');
const nestedScript = await import('./nested-script-fb424854.js');
console.log(nestedScript);
})();
"
Expand Down
18 changes: 4 additions & 14 deletions __tests__/helpers/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
/* eslint-disable jest/no-export */
import path from "path";
import fs from "fs-extra";
import { Plugin, rollup, OutputOptions, RollupOptions } from "rollup";
import { Plugin, rollup, OutputOptions } from "rollup";

import styles from "../../src";
import { Options } from "../../src/types";
import { inferModeOption } from "../../src/utils/options";

export type WriteData = {
input: NonNullable<RollupOptions["input"]>;
input: string | string[];
title?: string;
outDir?: string;
options?: Options;
Expand Down Expand Up @@ -39,18 +39,8 @@ export const fixture = (...args: string[]): string =>

export async function write(data: WriteData): Promise<WriteResult> {
const outDir = fixture("dist", data.outDir ?? data.title ?? "");

const input = Array.isArray(data.input)
? data.input.map(i => fixture(i))
: typeof data.input === "object"
? Object.entries(data.input).reduce((acc, [k, v]) => ({ ...acc, [k]: fixture(v) }), {})
: fixture(data.input);

const multiEntry = Array.isArray(data.input)
? data.input.length > 1
: typeof data.input === "object"
? Object.keys(data.input).length > 1
: false;
const input = Array.isArray(data.input) ? data.input.map(i => fixture(i)) : fixture(data.input);
const multiEntry = Array.isArray(data.input) ? data.input.length > 1 : false;

const bundle = await rollup({
input,
Expand Down
16 changes: 12 additions & 4 deletions __tests__/utils.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import { ensurePCSSOption } from "../src/utils/options";
import { loadSass } from "../src/loaders/sass/load";
import Loaders from "../src/loaders";
import postcss from "postcss";
import { Payload } from "../src/types";
import { fixture } from "./helpers";
import Loaders from "../src/loaders";
import postcssNoop from "../src/loaders/postcss/noop";
import { loadSass } from "../src/loaders/sass/load";
import { ensurePCSSOption } from "../src/utils/options";
import { mm, getMap, stripMap } from "../src/utils/sourcemap";
import { humanlizePath } from "../src/utils/path";

import { fixture } from "./helpers";

jest.mock("../src/utils/load-module", () => jest.fn());
import loadModuleMock from "../src/utils/load-module";

test("noop", async () => {
const { css } = await postcss(postcssNoop).process(".foo{color:red}", { from: "simple.css" });
expect(css).toBe(".foo{color:red}");
});

describe("load-module", () => {
const loadModule = jest.requireActual("../src/utils/load-module")
.default as typeof loadModuleMock;
Expand Down
7 changes: 6 additions & 1 deletion jest.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,10 @@ module.exports = {
globals: { "ts-jest": { packageJson: "package.json" } },
testMatch: ["<rootDir>/__tests__/*.(spec|test).[jt]s?(x)"],
setupFilesAfterEnv: ["<rootDir>/__tests__/setup.ts"],
collectCoverageFrom: ["<rootDir>/src/**/*.[jt]s?(x)", "!**/*.d.ts"],
collectCoverageFrom: [
"<rootDir>/src/**/*.[jt]s?(x)",
"<rootDir>/__tests__/*.[jt]s?(x)",
"<rootDir>/__tests__/helpers/*.[jt]s?(x)",
"!**/*.d.ts",
],
};
62 changes: 35 additions & 27 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,6 @@ export default (options: Options = {}): Plugin => {
if (extracted.size === 0 || !(opts.dir || opts.file)) return;

const infoFn = this.getModuleInfo.bind(this);
const moduleIds = [...this.moduleIds];

const dir = opts.dir ?? path.dirname(opts.file ?? "");

Expand Down Expand Up @@ -175,7 +174,7 @@ export default (options: Options = {}): Plugin => {

const entries = [...extracted.values()]
.filter(e => ids.includes(e.id))
.sort((a, b) => moduleIds.indexOf(a.id) - moduleIds.indexOf(b.id));
.sort((a, b) => ids.indexOf(a.id) - ids.indexOf(b.id));

const concat = new Concat(true, path.basename(fileName), "\n");
for (const res of entries) {
Expand All @@ -193,47 +192,56 @@ export default (options: Options = {}): Plugin => {
};

const getEmitted = (): Map<string, string[]> => {
const moduleIds = [...this.moduleIds];
const chunks: OutputChunk[] = [];
const entries = Object.values(bundle).filter((c): c is OutputChunk => {
const [index, ...entries] = Object.values(bundle).filter((c): c is OutputChunk => {
if (c.type !== "chunk") return false;
if (c.isEntry) return true;
chunks.push(c);
return false;
});
const [index] = entries.splice(0, 1);

const idsMap = new Map<string, string[]>();
const ids: string[] = [];

if (typeof postcssLoaderOpts.extract !== "string") {
const chunkIds: string[] = [];
for (const chunk of chunks) {
const ids = getIds(chunk, infoFn)
.filter(isSupported)
.sort((a, b) => moduleIds.indexOf(a) - moduleIds.indexOf(b));
const chunkIds: string[] = [];
for (const chunk of chunks) {
const ids = getIds(chunk, infoFn)
.filter(isSupported)
.sort((a, b) => moduleIds.indexOf(a) - moduleIds.indexOf(b));

if (ids.length === 0) continue;
if (ids.length === 0) continue;
chunkIds.push(...ids);

chunkIds.push(...ids);
idsMap.set(chunk.name, ids);
}
if (typeof postcssLoaderOpts.extract === "string") continue;
idsMap.set(chunk.name, ids);
}

const entryIds: string[] = [];
for (const entry of entries) {
const ids = getIds(entry, infoFn)
.filter(id => !chunkIds.includes(id) && isSupported(id))
.sort((a, b) => moduleIds.indexOf(a) - moduleIds.indexOf(b));
const entryIds: string[] = [];
for (const entry of entries) {
const ids = getIds(entry, infoFn)
.filter(id => !chunkIds.includes(id) && isSupported(id))
.sort((a, b) => moduleIds.indexOf(a) - moduleIds.indexOf(b));

if (ids.length === 0) continue;
if (ids.length === 0) continue;
entryIds.push(...ids);

entryIds.push(...ids);
idsMap.set(entry.name, ids);
}

ids.push(...chunkIds, ...entryIds);
if (typeof postcssLoaderOpts.extract === "string") continue;
idsMap.set(entry.name, ids);
}

const indexIds = moduleIds.filter(id => !ids.includes(id) && isSupported(id));
const orderedIds = [
...moduleIds.filter(id => !entryIds.includes(id) && !chunkIds.includes(id)),
...entryIds,
...chunkIds,
];

const indexIds = moduleIds
.filter(id => {
if (typeof postcssLoaderOpts.extract === "string") return isSupported(id);
return !entryIds.includes(id) && !chunkIds.includes(id) && isSupported(id);
})
.sort((a, b) => orderedIds.lastIndexOf(a) - orderedIds.lastIndexOf(b));

if (indexIds.length > 0) {
idsMap.set(
opts.file ? path.basename(opts.file, path.extname(opts.file)) : index.name,
Expand Down

0 comments on commit 553ca85

Please sign in to comment.