Skip to content

Commit f13f190

Browse files
SimulatedGREGSimulatedGREG
committed
feat: apply rtl patch
1 parent 26fa8e6 commit f13f190

File tree

3 files changed

+152
-121
lines changed

3 files changed

+152
-121
lines changed

‎src/index.js

Lines changed: 127 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,9 @@ class MiniCssExtractPlugin {
7777
}
7878

7979
readableIdentifier(requestShortener) {
80-
return `css ${requestShortener.shorten(this._identifier)}${this._identifierIndex ? ` (${this._identifierIndex})` : ""
81-
}`;
80+
return `css ${requestShortener.shorten(this._identifier)}${
81+
this._identifierIndex ? ` (${this._identifierIndex})` : ""
82+
}`;
8283
}
8384

8485
// eslint-disable-next-line class-methods-use-this
@@ -442,7 +443,7 @@ class MiniCssExtractPlugin {
442443

443444
class CssDependencyTemplate {
444445
// eslint-disable-next-line class-methods-use-this
445-
apply() { }
446+
apply() {}
446447
}
447448

448449
compilation.dependencyTemplates.set(
@@ -580,22 +581,22 @@ class MiniCssExtractPlugin {
580581
'var linkTag = document.createElement("link");',
581582
this.runtimeOptions.attributes
582583
? Template.asString(
583-
Object.entries(this.runtimeOptions.attributes).map(
584-
(entry) => {
585-
const [key, value] = entry;
586-
587-
return `linkTag.setAttribute(${JSON.stringify(
588-
key
589-
)}, ${JSON.stringify(value)});`;
590-
}
584+
Object.entries(this.runtimeOptions.attributes).map(
585+
(entry) => {
586+
const [key, value] = entry;
587+
588+
return `linkTag.setAttribute(${JSON.stringify(
589+
key
590+
)}, ${JSON.stringify(value)});`;
591+
}
592+
)
591593
)
592-
)
593594
: "",
594595
'linkTag.rel = "stylesheet";',
595596
this.runtimeOptions.linkType
596597
? `linkTag.type = ${JSON.stringify(
597-
this.runtimeOptions.linkType
598-
)};`
598+
this.runtimeOptions.linkType
599+
)};`
599600
: "",
600601
`var onLinkComplete = ${runtimeTemplate.basicFunction("event", [
601602
"// avoid mem leaks.",
@@ -619,22 +620,22 @@ class MiniCssExtractPlugin {
619620
"linkTag.href = fullhref;",
620621
crossOriginLoading
621622
? Template.asString([
622-
`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`,
623-
Template.indent(
624-
`linkTag.crossOrigin = ${JSON.stringify(
625-
crossOriginLoading
626-
)};`
627-
),
628-
"}",
629-
])
623+
`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`,
624+
Template.indent(
625+
`linkTag.crossOrigin = ${JSON.stringify(
626+
crossOriginLoading
627+
)};`
628+
),
629+
"}",
630+
])
630631
: "",
631632
typeof this.runtimeOptions.insert !== "undefined"
632633
? typeof this.runtimeOptions.insert === "function"
633634
? `(${this.runtimeOptions.insert.toString()})(linkTag)`
634635
: Template.asString([
635-
`var target = document.querySelector("${this.runtimeOptions.insert}");`,
636-
`target.parentNode.insertBefore(linkTag, target.nextSibling);`,
637-
])
636+
`var target = document.querySelector("${this.runtimeOptions.insert}");`,
637+
`target.parentNode.insertBefore(linkTag, target.nextSibling);`,
638+
])
638639
: Template.asString(["document.head.appendChild(linkTag);"]),
639640
"return linkTag;",
640641
]
@@ -666,98 +667,114 @@ class MiniCssExtractPlugin {
666667
"resolve, reject",
667668
[
668669
`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`,
669-
`var fullhref = ${RuntimeGlobals.publicPath} + href;`,
670+
`var fetchRTL = ${
671+
this.runtimeOptions.globalRTLFlag
672+
? `window['${this.runtimeOptions.globalRTLFlag}']`
673+
: false
674+
};`,
675+
`var fullhref = ${
676+
this.runtimeOptions.outputPublicPath
677+
? `'${this.runtimeOptions.outputPublicPath}'`
678+
: RuntimeGlobals.publicPath
679+
} + href;`,
670680
"if(findStylesheet(href, fullhref)) return resolve();",
681+
"if (fetchRTL) {",
682+
Template.indent([
683+
`fullhref = fullhref.replace(/\\.css/i, '.rtl.css');`,
684+
]),
685+
"}",
671686
"createStylesheet(chunkId, fullhref, resolve, reject);",
672687
]
673688
)});`
674689
)}`,
675690
withLoading
676691
? Template.asString([
677-
"// object to store loaded CSS chunks",
678-
"var installedCssChunks = {",
679-
Template.indent(
680-
chunk.ids
681-
.map((id) => `${JSON.stringify(id)}: 0`)
682-
.join(",\n")
683-
),
684-
"};",
685-
"",
686-
`${RuntimeGlobals.ensureChunkHandlers
687-
}.miniCss = ${runtimeTemplate.basicFunction(
688-
"chunkId, promises",
689-
[
690-
`var cssChunks = ${JSON.stringify(chunkMap)};`,
691-
"if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);",
692-
"else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {",
693-
Template.indent([
694-
`promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(${runtimeTemplate.basicFunction(
695-
"",
696-
"installedCssChunks[chunkId] = 0;"
697-
)}, ${runtimeTemplate.basicFunction("e", [
698-
"delete installedCssChunks[chunkId];",
699-
"throw e;",
700-
])}));`,
701-
]),
702-
"}",
703-
]
704-
)};`,
705-
])
692+
"// object to store loaded CSS chunks",
693+
"var installedCssChunks = {",
694+
Template.indent(
695+
chunk.ids
696+
.map((id) => `${JSON.stringify(id)}: 0`)
697+
.join(",\n")
698+
),
699+
"};",
700+
"",
701+
`${
702+
RuntimeGlobals.ensureChunkHandlers
703+
}.miniCss = ${runtimeTemplate.basicFunction(
704+
"chunkId, promises",
705+
[
706+
`var cssChunks = ${JSON.stringify(chunkMap)};`,
707+
"if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);",
708+
"else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {",
709+
Template.indent([
710+
`promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(${runtimeTemplate.basicFunction(
711+
"",
712+
"installedCssChunks[chunkId] = 0;"
713+
)}, ${runtimeTemplate.basicFunction("e", [
714+
"delete installedCssChunks[chunkId];",
715+
"throw e;",
716+
])}));`,
717+
]),
718+
"}",
719+
]
720+
)};`,
721+
])
706722
: "// no chunk loading",
707723
"",
708724
withHmr
709725
? Template.asString([
710-
"var oldTags = [];",
711-
"var newTags = [];",
712-
`var applyHandler = ${runtimeTemplate.basicFunction(
713-
"options",
714-
[
715-
`return { dispose: ${runtimeTemplate.basicFunction("", [
716-
"for(var i = 0; i < oldTags.length; i++) {",
717-
Template.indent([
718-
"var oldTag = oldTags[i];",
719-
"if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);",
720-
]),
721-
"}",
722-
"oldTags.length = 0;",
723-
])}, apply: ${runtimeTemplate.basicFunction("", [
724-
'for(var i = 0; i < newTags.length; i++) newTags[i].rel = "stylesheet";',
725-
"newTags.length = 0;",
726-
])} };`,
727-
]
728-
)}`,
729-
`${RuntimeGlobals.hmrDownloadUpdateHandlers
730-
}.miniCss = ${runtimeTemplate.basicFunction(
731-
"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList",
732-
[
733-
"applyHandlers.push(applyHandler);",
734-
`chunkIds.forEach(${runtimeTemplate.basicFunction(
735-
"chunkId",
736-
[
737-
`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`,
738-
`var fullhref = ${RuntimeGlobals.publicPath} + href;`,
739-
"var oldTag = findStylesheet(href, fullhref);",
740-
"if(!oldTag) return;",
741-
`promises.push(new Promise(${runtimeTemplate.basicFunction(
742-
"resolve, reject",
743-
[
744-
`var tag = createStylesheet(chunkId, fullhref, ${runtimeTemplate.basicFunction(
745-
"",
746-
[
747-
'tag.as = "style";',
748-
'tag.rel = "preload";',
749-
"resolve();",
750-
]
751-
)}, reject);`,
752-
"oldTags.push(oldTag);",
753-
"newTags.push(tag);",
754-
]
755-
)}));`,
756-
]
757-
)});`,
758-
]
759-
)}`,
760-
])
726+
"var oldTags = [];",
727+
"var newTags = [];",
728+
`var applyHandler = ${runtimeTemplate.basicFunction(
729+
"options",
730+
[
731+
`return { dispose: ${runtimeTemplate.basicFunction("", [
732+
"for(var i = 0; i < oldTags.length; i++) {",
733+
Template.indent([
734+
"var oldTag = oldTags[i];",
735+
"if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);",
736+
]),
737+
"}",
738+
"oldTags.length = 0;",
739+
])}, apply: ${runtimeTemplate.basicFunction("", [
740+
'for(var i = 0; i < newTags.length; i++) newTags[i].rel = "stylesheet";',
741+
"newTags.length = 0;",
742+
])} };`,
743+
]
744+
)}`,
745+
`${
746+
RuntimeGlobals.hmrDownloadUpdateHandlers
747+
}.miniCss = ${runtimeTemplate.basicFunction(
748+
"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList",
749+
[
750+
"applyHandlers.push(applyHandler);",
751+
`chunkIds.forEach(${runtimeTemplate.basicFunction(
752+
"chunkId",
753+
[
754+
`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`,
755+
`var fullhref = ${RuntimeGlobals.publicPath} + href;`,
756+
"var oldTag = findStylesheet(href, fullhref);",
757+
"if(!oldTag) return;",
758+
`promises.push(new Promise(${runtimeTemplate.basicFunction(
759+
"resolve, reject",
760+
[
761+
`var tag = createStylesheet(chunkId, fullhref, ${runtimeTemplate.basicFunction(
762+
"",
763+
[
764+
'tag.as = "style";',
765+
'tag.rel = "preload";',
766+
"resolve();",
767+
]
768+
)}, reject);`,
769+
"oldTags.push(oldTag);",
770+
"newTags.push(tag);",
771+
]
772+
)}));`,
773+
]
774+
)});`,
775+
]
776+
)}`,
777+
])
761778
: "// no hmr",
762779
]);
763780
}
@@ -818,9 +835,9 @@ class MiniCssExtractPlugin {
818835
getChunkModules(chunk, chunkGraph) {
819836
return typeof chunkGraph !== "undefined"
820837
? chunkGraph.getOrderedChunkModulesIterable(
821-
chunk,
822-
compareModulesByIdentifier
823-
)
838+
chunk,
839+
compareModulesByIdentifier
840+
)
824841
: chunk.modulesIterable;
825842
}
826843

@@ -944,7 +961,7 @@ class MiniCssExtractPlugin {
944961
` * ${m.readableIdentifier(requestShortener)}`,
945962
` - couldn't fulfill desired order of chunk group(s) ${failedChunkGroups}`,
946963
goodChunkGroups &&
947-
` - while fulfilling desired order of chunk group(s) ${goodChunkGroups}`,
964+
` - while fulfilling desired order of chunk group(s) ${goodChunkGroups}`,
948965
]
949966
.filter(Boolean)
950967
.join("\n");

‎test/manual/index.html

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
77
<title>mini-css-extract-plugin testcase</title>
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
<link rel="stylesheet" type="text/css" href="/dist/preloaded1.chunk.css" />
9+
<link rel="stylesheet" type="text/css" href="/dist/preloaded1.chunk.client.css" />
1010
<style>
1111
.test {
1212
background: lightcoral;
@@ -21,15 +21,20 @@
2121
background: lightgreen;
2222
}
2323
</style>
24-
<style data-href="preloaded2.chunk.css">
24+
<style data-href="preloaded2.chunk.client.css">
2525
.preloaded-css2 {
2626
background: lightgreen;
2727
}
2828
</style>
29-
<link rel="stylesheet" type="text/css" href="/dist/main.css" />
29+
<link rel="stylesheet" type="text/css" href="/dist/main.client.css" />
3030
</head>
3131

3232
<body>
33+
<button id="rtl">Toggle</button>
34+
RTL: <span id="rtl-value">false</span>
35+
36+
<hr/>
37+
3338
<div class="test initial-css">Initial CSS: Must be green</div>
3439
<div class="hot-reload">
3540
<p>Hot Module Replacement</p>
@@ -98,6 +103,19 @@
98103
</div>
99104
<div class="errors"></div>
100105
<script async defer src="/dist/main.js"></script>
106+
107+
<script>
108+
window.rtlLanguageEnabled = false;
109+
110+
var $rtl = document.getElementById('rtl');
111+
var $rtlValue = document.getElementById('rtl-value');
112+
113+
$rtl.addEventListener('click', () => {
114+
window.rtlLanguageEnabled = !window.rtlLanguageEnabled;
115+
$rtlValue.innerText = window.rtlLanguageEnabled.toString();
116+
});
117+
</script>
118+
101119
</body>
102120

103121
</html>

‎test/manual/webpack.config.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
<<<<<<< HEAD
21
// eslint-disable-next-line import/no-extraneous-dependencies
3-
const WebpackRtlPlugin = require('webpack-rtl-plugin');
2+
const WebpackRtlPlugin = require("webpack-rtl-plugin");
43

5-
const Self = require('../../');
6-
=======
74
const Self = require("../../");
8-
>>>>>>> 31b678c17af720cf1c80815f1771fe2fa2e6ae1f
95

106
const ENABLE_HMR =
117
typeof process.env.ENABLE_HMR !== "undefined"
@@ -68,9 +64,9 @@ module.exports = {
6864
},
6965
plugins: [
7066
new Self({
71-
filename: '[name].client.css',
72-
chunkFilename: '[name].chunk.client.css',
73-
globalRTLFlag: 'rtlLanguageEnabled',
67+
filename: "[name].client.css",
68+
chunkFilename: "[name].chunk.client.css",
69+
globalRTLFlag: "rtlLanguageEnabled",
7470
// outputPublicPath: '/bundles/css/',
7571
experimentalUseImportModule: ENABLE_EXPERIMENTAL_USE_IMPORT_MODULE,
7672
}),

0 commit comments

Comments
 (0)