Skip to content

Commit bdd5d3d

Browse files
sokrasokra
committed
add uniqueName for css module classes
1 parent 631ec66 commit bdd5d3d

5 files changed

Lines changed: 57 additions & 21 deletions

File tree

‎lib/css/CssLoadingRuntimeModule.js‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
103103
const code = Template.asString([
104104
"link = document.createElement('link');",
105105
uniqueName
106-
? 'link.setAttribute("data-webpack", dataWebpackPrefix + key);'
106+
? 'link.setAttribute("data-webpack", uniqueName + ":" + key);'
107107
: "",
108108
"link.setAttribute(loadingAttribute, 1);",
109109
'link.rel = "stylesheet";',
@@ -133,10 +133,24 @@ class CssLoadingRuntimeModule extends RuntimeModule {
133133
id => `${JSON.stringify(id)}:0`
134134
).join(",")}};`,
135135
"",
136+
uniqueName
137+
? `var uniqueName = ${JSON.stringify(
138+
runtimeTemplate.outputOptions.uniqueName
139+
)};`
140+
: "// data-webpack is not used as build has no uniqueName",
136141
`var loadCssChunkData = ${runtimeTemplate.basicFunction("chunkId, link", [
137142
'var data, token = "", token2, exports = {}, exportsWithId = [], i = 0, cc = 1;',
138143
"try { if(!link) link = loadStylesheet(chunkId); data = link.sheet.cssRules; data = data[data.length - 1].style; } catch(e) { data = getComputedStyle(document.head); }",
139-
'data = data.getPropertyValue("--webpack-" + chunkId);',
144+
`data = data.getPropertyValue(${
145+
uniqueName
146+
? runtimeTemplate.concatenation(
147+
"--webpack-",
148+
{ expr: "uniqueName" },
149+
"-",
150+
{ expr: "chunkId" }
151+
)
152+
: runtimeTemplate.concatenation("--webpack-", { expr: "chunkId" })
153+
});`,
140154
"if(!data) return;",
141155
"for(; cc; i++) {",
142156
Template.indent([
@@ -147,11 +161,23 @@ class CssLoadingRuntimeModule extends RuntimeModule {
147161
)}) { exports[token2.replace(/^_/, "")] = token.replace(/^_/, ""); token = ""; }`,
148162
`else if(cc == ${cc(
149163
"/"
150-
)}) { token = token.replace(/^_/, ""); exports[token] = token + "_"; exportsWithId.push(token); token = ""; }`,
164+
)}) { token = token.replace(/^_/, ""); exports[token] = token; exportsWithId.push(token); token = ""; }`,
151165
`else if(!cc || cc == ${cc(
152166
","
153167
)}) { token = token.replace(/^_/, ""); exportsWithId.forEach(${runtimeTemplate.expressionFunction(
154-
"exports[x] += token",
168+
`exports[x] = ${
169+
uniqueName
170+
? runtimeTemplate.concatenation(
171+
{ expr: "uniqueName" },
172+
"-",
173+
{ expr: "token" },
174+
"-",
175+
{ expr: "exports[x]" }
176+
)
177+
: runtimeTemplate.concatenation({ expr: "token" }, "-", {
178+
expr: "exports[x]"
179+
})
180+
}`,
155181
"x"
156182
)}); ${RuntimeGlobals.makeNamespaceObject}(exports); ${
157183
RuntimeGlobals.moduleFactories
@@ -166,9 +192,6 @@ class CssLoadingRuntimeModule extends RuntimeModule {
166192
"installedChunks[chunkId] = 0;"
167193
])}`,
168194
'var loadingAttribute = "data-webpack-loading";',
169-
uniqueName
170-
? `var dataWebpackPrefix = ${JSON.stringify(uniqueName + ":")};`
171-
: "// data-webpack is not used as build has no uniqueName",
172195
`var loadStylesheet = ${runtimeTemplate.basicFunction(
173196
"chunkId, url, done" + (withHmr ? ", hmr" : ""),
174197
[
@@ -180,7 +203,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
180203
"var l = links[i];",
181204
`if(l.getAttribute("href") == url${
182205
uniqueName
183-
? ' || l.getAttribute("data-webpack") == dataWebpackPrefix + key'
206+
? ' || l.getAttribute("data-webpack") == uniqueName + ":" + key'
184207
: ""
185208
}) { link = l; break; }`
186209
]),

‎lib/css/CssModulesPlugin.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,8 @@ class CssModulesPlugin {
180180
this.renderChunk({
181181
chunk,
182182
chunkGraph,
183-
codeGenerationResults
183+
codeGenerationResults,
184+
uniqueName: compilation.outputOptions.uniqueName
184185
}),
185186
filenameTemplate: CssModulesPlugin.getChunkFilenameTemplate(
186187
chunk,
@@ -240,7 +241,7 @@ class CssModulesPlugin {
240241
return [...(cssImports || []), ...(cssContent || [])];
241242
}
242243

243-
renderChunk({ chunk, chunkGraph, codeGenerationResults }) {
244+
renderChunk({ uniqueName, chunk, chunkGraph, codeGenerationResults }) {
244245
const modules = this.getOrderedChunkCssModules(chunk, chunkGraph);
245246
const source = new ConcatSource();
246247
const metaData = [];
@@ -262,7 +263,7 @@ class CssModulesPlugin {
262263
`${
263264
exports
264265
? Array.from(exports, ([n, v]) =>
265-
v === `${n}_${moduleId}`
266+
v === `${uniqueName ? uniqueName + "-" : ""}${moduleId}-${n}`
266267
? `${escapeCss(n)}/`
267268
: `${escapeCss(n)}(${escapeCss(v)})`
268269
).join("")
@@ -275,7 +276,10 @@ class CssModulesPlugin {
275276
}
276277
}
277278
source.add(
278-
`head{--webpack-${escapeCss(chunk.id, true)}:${metaData.join(",")};}`
279+
`head{--webpack-${escapeCss(
280+
(uniqueName ? uniqueName + "-" : "") + chunk.id,
281+
true
282+
)}:${metaData.join(",")};}`
279283
);
280284
return source;
281285
}

‎lib/dependencies/CssLocalIdentifierDependency.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,20 @@ CssLocalIdentifierDependency.Template = class CssLocalIdentifierDependencyTempla
8383
apply(
8484
dependency,
8585
source,
86-
{ module, moduleGraph, chunkGraph, runtime, cssExports }
86+
{ module, moduleGraph, chunkGraph, runtime, runtimeTemplate, cssExports }
8787
) {
8888
const dep = /** @type {CssLocalIdentifierDependency} */ (dependency);
8989
const used = moduleGraph
9090
.getExportInfo(module, dep.name)
9191
.getUsedName(dep.name, runtime);
9292
const moduleId = chunkGraph.getModuleId(module);
93-
const identifier = (used || "_") + "_" + moduleId;
93+
const identifier =
94+
(runtimeTemplate.outputOptions.uniqueName
95+
? runtimeTemplate.outputOptions.uniqueName + "-"
96+
: "") +
97+
moduleId +
98+
"-" +
99+
(used || "");
94100
source.replace(
95101
dep.range[0],
96102
dep.range[1] - 1,

‎test/configCases/css/css-modules/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ it("should allow to create css modules", done => {
88
try {
99
expect(x).toEqual({
1010
global: undefined,
11-
class: prod ? "S_491" : "class_./style.module.css",
11+
class: prod ? "my-app-491-S" : "./style.module.css-class",
1212
local: prod
13-
? "Zw_491 yl_491 J__491 gc_491"
14-
: "local1_./style.module.css local2_./style.module.css local3_./style.module.css local4_./style.module.css",
13+
? "my-app-491-Zw my-app-491-yl my-app-491-J_ my-app-491-gc"
14+
: "./style.module.css-local1 ./style.module.css-local2 ./style.module.css-local3 ./style.module.css-local4",
1515
local2: prod
16-
? "Xg_491 AY_491"
17-
: "local5_./style.module.css local6_./style.module.css",
16+
? "my-app-491-Xg my-app-491-AY"
17+
: "./style.module.css-local5 ./style.module.css-local6",
1818
nested: prod
19-
? "RX_491 undefined X2_491"
20-
: "nested1_./style.module.css undefined nested3_./style.module.css"
19+
? "my-app-491-RX undefined my-app-491-X2"
20+
: "./style.module.css-nested1 undefined ./style.module.css-nested3"
2121
});
2222
} catch (e) {
2323
return done(e);

‎test/configCases/css/css-modules/webpack.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ module.exports = [
1010
{
1111
target: "web",
1212
mode: "production",
13+
output: {
14+
uniqueName: "my-app"
15+
},
1316
experiments: {
1417
css: true
1518
}

0 commit comments

Comments
 (0)