Skip to content

Commit 9eaba66

Browse files
evilebottnawievilebottnawi
authored
refactor: migrate on message api for postcss-icss-plugin (#838)
1 parent 476ebca commit 9eaba66

File tree

6 files changed

+147
-46
lines changed

6 files changed

+147
-46
lines changed

‎lib/loader.js‎

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ module.exports = function loader(content, map) {
4949
}
5050
/* eslint-enable no-param-reassign */
5151

52-
const parserOptions = {};
5352
const resolveImport = options.import !== false;
5453
const resolveUrl = options.url !== false;
5554
const loaderContext = this;
@@ -98,7 +97,7 @@ module.exports = function loader(content, map) {
9897
plugins.push(urlParser());
9998
}
10099

101-
plugins.push(icssParser(parserOptions));
100+
plugins.push(icssParser());
102101

103102
postcss(plugins)
104103
.process(content, {
@@ -125,34 +124,39 @@ module.exports = function loader(content, map) {
125124

126125
const messages = result.messages || [];
127126
const { camelCase, exportOnlyLocals, importLoaders } = options;
128-
const { importItems } = parserOptions;
129127

130128
// Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
131129
const importUrlPrefix = getImportPrefix(this, importLoaders);
132130

133131
// Prepare replacer to change from `___CSS_LOADER_IMPORT___INDEX___` to `require('./file.css').locals`
134-
const importItemReplacer = (item) => {
135-
const match = placholderRegExps.importItem.exec(item);
132+
const importItemReplacer = (placeholder) => {
133+
const match = placholderRegExps.importItem.exec(placeholder);
136134
const idx = Number(match[1]);
137135

138-
if (!importItems[idx]) {
139-
return item;
136+
const message = messages.find(
137+
// eslint-disable-next-line no-shadow
138+
(message) =>
139+
message.type === 'icss-import' && message.item.index === idx
140+
);
141+
142+
if (!message) {
143+
return placeholder;
140144
}
141145

142-
const importItem = importItems[idx];
143-
const importUrl = importUrlPrefix + importItem.url;
146+
const { item } = message;
147+
const importUrl = importUrlPrefix + item.url;
144148

145149
if (exportOnlyLocals) {
146150
return `" + require(${stringifyRequest(
147151
this,
148152
importUrl
149-
)})[${JSON.stringify(importItem.export)}] + "`;
153+
)})[${JSON.stringify(item.export)}] + "`;
150154
}
151155

152156
return `" + require(${stringifyRequest(
153157
this,
154158
importUrl
155-
)}).locals[${JSON.stringify(importItem.export)}] + "`;
159+
)}).locals[${JSON.stringify(item.export)}] + "`;
156160
};
157161

158162
let exportCode = compileExports(messages, camelCase, (valueAsString) =>
@@ -166,22 +170,11 @@ module.exports = function loader(content, map) {
166170
);
167171
}
168172

169-
const alreadyImported = {};
170-
const importCode = importItems
171-
.filter((imp) => {
172-
if (!imp.media) {
173-
if (alreadyImported[imp.url]) {
174-
return false;
175-
}
176-
177-
alreadyImported[imp.url] = true;
178-
}
179-
180-
return true;
181-
})
182-
.map((imp) => {
183-
const { url } = imp;
184-
const media = imp.media || '';
173+
const importCode = messages
174+
.filter((message) => message.type === 'import')
175+
.map((message) => {
176+
const { url } = message.item;
177+
const media = message.item.media || '';
185178

186179
if (!isUrlRequest(url)) {
187180
return `exports.push([module.id, ${JSON.stringify(
@@ -207,7 +200,7 @@ module.exports = function loader(content, map) {
207200
let urlEscapeHelperCode = '';
208201

209202
messages
210-
.filter((message) => message.type === 'url' && resolveUrl)
203+
.filter((message) => message.type === 'url')
211204
.forEach((message) => {
212205
if (!urlEscapeHelperCode) {
213206
urlEscapeHelperCode = `var escape = require(${stringifyRequest(

‎lib/plugins/postcss-icss-parser.js‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,8 @@ const pluginName = 'postcss-icss-parser';
77

88
module.exports = postcss.plugin(
99
pluginName,
10-
(options) =>
10+
() =>
1111
function process(css, result) {
12-
const importItems = (result.messages || [])
13-
.filter((message) => message.type === 'import')
14-
.map((message) => message.item);
15-
1612
const imports = {};
1713
const icss = icssUtils.extractICSS(css);
1814
const exports = icss.icssExports;
@@ -21,11 +17,32 @@ module.exports = postcss.plugin(
2117
const url = loaderUtils.parseString(key);
2218

2319
Object.keys(icss.icssImports[key]).forEach((prop) => {
24-
imports[`$${prop}`] = importItems.length;
25-
importItems.push({
26-
url,
27-
media: '',
28-
export: icss.icssImports[key][prop],
20+
const index = Object.keys(imports).length;
21+
22+
imports[`$${prop}`] = index;
23+
24+
result.messages.push({
25+
pluginName,
26+
type: 'icss-import',
27+
item: { url, export: icss.icssImports[key][prop], index },
28+
});
29+
30+
const alreadyIncluded = result.messages.find(
31+
(message) =>
32+
message.pluginName === pluginName &&
33+
message.type === 'import' &&
34+
message.item.url === url &&
35+
message.item.media === ''
36+
);
37+
38+
if (alreadyIncluded) {
39+
return;
40+
}
41+
42+
result.messages.push({
43+
pluginName,
44+
type: 'import',
45+
item: { url, media: '' },
2946
});
3047
});
3148
});
@@ -73,9 +90,5 @@ module.exports = postcss.plugin(
7390
},
7491
});
7592
});
76-
77-
/* eslint-disable no-param-reassign */
78-
options.importItems = importItems;
79-
/* eslint-enable no-param-reassign */
8093
}
8194
);

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

Lines changed: 71 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ Array [
77
Array [
88
2,
99
"
10+
",
11+
"",
12+
],
13+
Array [
14+
3,
15+
"
1016
",
1117
"",
1218
],
@@ -17,6 +23,27 @@ Array [
1723
.ghi {
1824
color: red;
1925
}
26+
27+
.class {
28+
color: blue;
29+
}
30+
31+
.other {
32+
display: block;
33+
}
34+
35+
.other-other {
36+
width: 2112moon;
37+
}
38+
39+
.green {
40+
color: green;
41+
}
42+
43+
.foo {
44+
prop: red;
45+
duplicate: green;
46+
}
2047
",
2148
"",
2249
],
@@ -27,13 +54,18 @@ exports[`import option false and modules false: module 1`] = `
2754
"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
2855
// imports
2956
exports.i(require(\\"-!../../../index.js??ref--4-0!./values.css\\"), \\"\\");
57+
exports.i(require(\\"-!../../../index.js??ref--4-0!./something.css\\"), \\"\\");
3058
3159
// module
32-
exports.push([module.id, \\"@import url(test-other.css) (min-width: 100px);\\\\n\\\\n.ghi {\\\\n color: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n}\\\\n\\", \\"\\"]);
60+
exports.push([module.id, \\"@import url(test-other.css) (min-width: 100px);\\\\n\\\\n.ghi {\\\\n color: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n}\\\\n\\\\n.class {\\\\n color: blue;\\\\n}\\\\n\\\\n.other {\\\\n display: block;\\\\n}\\\\n\\\\n.other-other {\\\\n width: \\" + require(\\"-!../../../index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\";\\\\n}\\\\n\\\\n.green {\\\\n color: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n.foo {\\\\n prop: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n duplicate: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\", \\"\\"]);
3361
3462
// exports
3563
exports.locals = {
36-
\\"def\\": \\"\\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\"\\"
64+
\\"def\\": \\"\\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\"\\",
65+
\\"other\\": \\"\\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\"\\",
66+
\\"something\\": \\"\\" + require(\\"-!../../../index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\"\\",
67+
\\"foo\\": \\"blue\\",
68+
\\"bar\\": \\"block\\"
3769
};"
3870
`;
3971
@@ -46,6 +78,12 @@ Array [
4678
Array [
4779
2,
4880
"
81+
",
82+
"",
83+
],
84+
Array [
85+
3,
86+
"
4987
",
5088
"",
5189
],
@@ -56,6 +94,27 @@ Array [
5694
._3r49KZIIAltPknAjdNVZ-7 {
5795
color: red;
5896
}
97+
98+
._4o0o5eKzoeDOSI0_cR8mr {
99+
color: blue;
100+
}
101+
102+
._2wLXKM9pRjt1oRYvf0Wo3Q {
103+
display: block;
104+
}
105+
106+
._1RBgqC8j3f4iU6k-ocmIG7 {
107+
width: 2112moon;
108+
}
109+
110+
._1lCIckG6C8tRZjGNDsAPWr {
111+
color: green;
112+
}
113+
114+
._1YL4f0i_603GTMRC_pnsP5 {
115+
prop: red;
116+
duplicate: green;
117+
}
59118
",
60119
"",
61120
],
@@ -66,14 +125,22 @@ exports[`import option false and modules true: module 1`] = `
66125
"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
67126
// imports
68127
exports.i(require(\\"-!../../../index.js??ref--4-0!./values.css\\"), \\"\\");
128+
exports.i(require(\\"-!../../../index.js??ref--4-0!./something.css\\"), \\"\\");
69129
70130
// module
71-
exports.push([module.id, \\"@import url(test-other.css) (min-width: 100px);\\\\n\\\\n._3r49KZIIAltPknAjdNVZ-7 {\\\\n color: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n}\\\\n\\", \\"\\"]);
131+
exports.push([module.id, \\"@import url(test-other.css) (min-width: 100px);\\\\n\\\\n._3r49KZIIAltPknAjdNVZ-7 {\\\\n color: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n}\\\\n\\\\n._4o0o5eKzoeDOSI0_cR8mr {\\\\n color: blue;\\\\n}\\\\n\\\\n._2wLXKM9pRjt1oRYvf0Wo3Q {\\\\n display: block;\\\\n}\\\\n\\\\n._1RBgqC8j3f4iU6k-ocmIG7 {\\\\n width: \\" + require(\\"-!../../../index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\";\\\\n}\\\\n\\\\n._1lCIckG6C8tRZjGNDsAPWr {\\\\n color: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n._1YL4f0i_603GTMRC_pnsP5 {\\\\n prop: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n duplicate: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\", \\"\\"]);
72132
73133
// exports
74134
exports.locals = {
75135
\\"def\\": \\"\\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\"\\",
76-
\\"ghi\\": \\"_3r49KZIIAltPknAjdNVZ-7\\"
136+
\\"other\\": \\"_2wLXKM9pRjt1oRYvf0Wo3Q\\",
137+
\\"something\\": \\"\\" + require(\\"-!../../../index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\"\\",
138+
\\"foo\\": \\"_1YL4f0i_603GTMRC_pnsP5\\",
139+
\\"bar\\": \\"block\\",
140+
\\"ghi\\": \\"_3r49KZIIAltPknAjdNVZ-7\\",
141+
\\"class\\": \\"_4o0o5eKzoeDOSI0_cR8mr\\",
142+
\\"other-other\\": \\"_1RBgqC8j3f4iU6k-ocmIG7\\",
143+
\\"green\\": \\"_1lCIckG6C8tRZjGNDsAPWr\\"
77144
};"
78145
`;
79146

‎test/fixtures/import/css-modules.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,33 @@
11
@import url(test-other.css) (min-width: 100px);
22

33
@value def from './values.css';
4+
@value other from './values.css';
5+
@value other from './values.css';
6+
@value something from './something.css';
7+
@value foo: blue;
8+
@value bar: block;
49

510
.ghi {
611
color: def;
712
}
13+
14+
.class {
15+
color: foo;
16+
}
17+
18+
.other {
19+
display: bar;
20+
}
21+
22+
.other-other {
23+
width: something;
24+
}
25+
26+
.green {
27+
color: other;
28+
}
29+
30+
.foo {
31+
prop: def;
32+
duplicate: other;
33+
}

‎test/fixtures/import/something.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@value something: 2112moon;

‎test/fixtures/import/values.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
@value def: red;
2+
@value other: green;

0 commit comments

Comments
 (0)