@zohodesk/react-cli 1.1.19-exp.12 → 1.1.19-exp.13

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/__test__/createInitialEntries.test.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _createInitialEntries = require("../createInitialEntries");
+
+/* eslint-disable max-lines */
+function callTestCase(filename, output) {
+  const hashLength = 20;
+  const input = (0, _createInitialEntries.createInitialEntriesForManifestJson)(filename, hashLength);
+  expect(input).toStrictEqual(output);
+}
+
+test('passing empty array', () => {
+  const filenames = [];
+  const output = {};
+  callTestCase(filenames, output);
+});
+test('check i18n.js files', () => {
+  const filename = ['i18n-chunks/en_US/11.939b264d89ba9c22d237.i18n.js'];
+  const output = {
+    'i18n-chunks/en_US/11.i18n.js': 'i18n-chunks/en_US/11.939b264d89ba9c22d237.i18n.js'
+  };
+  callTestCase(filename, output);
+});
+test('check LICENSE.txt file', () => {
+  const filename = ['js/store.worker.ce75eef2a576fe0ea685.js.LICENSE.txt'];
+  const output = {
+    'js/store.worker.js.LICENSE.txt': 'js/store.worker.ce75eef2a576fe0ea685.js.LICENSE.txt'
+  };
+  callTestCase(filename, output);
+});
+test('check js file', () => {
+  const filename = ['smap/js/efc.659f89ec02c7a454f167.js'];
+  const output = {
+    'smap/js/efc.js': 'smap/js/efc.659f89ec02c7a454f167.js'
+  };
+  callTestCase(filename, output);
+});
+test('check css file', () => {
+  const filename = ['css/icons.83848142e71f3f6f06f0.ltr.css'];
+  const output = {
+    'css/icons.ltr.css': 'css/icons.83848142e71f3f6f06f0.ltr.css'
+  };
+  callTestCase(filename, output);
+});
+test('check image file', () => {
+  const filename = ['images/radarQrCode.3658d05a928b8337173f.png'];
+  const output = {
+    'images/radarQrCode.png': 'images/radarQrCode.3658d05a928b8337173f.png'
+  };
+  callTestCase(filename, output);
+});
+test('check videos file', () => {
+  const filename = ['videos/IMBubbleMaximizedView.5d2ab1747e7d1bcd1add.mp4'];
+  const output = {
+    'videos/IMBubbleMaximizedView.mp4': 'videos/IMBubbleMaximizedView.5d2ab1747e7d1bcd1add.mp4'
+  };
+  callTestCase(filename, output);
+});
+test('check font file', () => {
+  const filename = ['fonts/DeskWhiteLogo.9bd41daeeb87d691b83c.svg'];
+  const output = {
+    'fonts/DeskWhiteLogo.svg': 'fonts/DeskWhiteLogo.9bd41daeeb87d691b83c.svg'
+  };
+  callTestCase(filename, output);
+});
+test('check vendor file', () => {
+  const filename = ['smap/js/vendor.d8cb6423142255fb107d.js'];
+  const output = {
+    'smap/js/vendor.js': 'smap/js/vendor.d8cb6423142255fb107d.js'
+  };
+  callTestCase(filename, output);
+});
+test('check html file', () => {
+  const filename = ['index.7d89d2bdec8567df96ec.html'];
+  const output = {
+    'index.html': 'index.7d89d2bdec8567df96ec.html'
+  };
+  callTestCase(filename, output);
+}); // eslint-disable-next-line jest/valid-title
+
+test('test an array containing all format of files eg:js, css', () => {
+  const filename = ['i18n-chunks/en_US/11.939b264d89ba9c22d237.i18n.js', 'index.7d89d2bdec8567df96ec.html', 'smap/js/vendor.d8cb6423142255fb107d.js', 'fonts/DeskWhiteLogo.9bd41daeeb87d691b83c.svg', 'videos/IMBubbleMaximizedView.5d2ab1747e7d1bcd1add.mp4', 'images/radarQrCode.3658d05a928b8337173f.png', 'css/icons.83848142e71f3f6f06f0.ltr.css', 'smap/js/efc.659f89ec02c7a454f167.js', 'js/store.worker.ce75eef2a576fe0ea685.js.LICENSE.txt'];
+  const output = {
+    'i18n-chunks/en_US/11.i18n.js': 'i18n-chunks/en_US/11.939b264d89ba9c22d237.i18n.js',
+    'index.html': 'index.7d89d2bdec8567df96ec.html',
+    'smap/js/vendor.js': 'smap/js/vendor.d8cb6423142255fb107d.js',
+    'fonts/DeskWhiteLogo.svg': 'fonts/DeskWhiteLogo.9bd41daeeb87d691b83c.svg',
+    'videos/IMBubbleMaximizedView.mp4': 'videos/IMBubbleMaximizedView.5d2ab1747e7d1bcd1add.mp4',
+    'images/radarQrCode.png': 'images/radarQrCode.3658d05a928b8337173f.png',
+    'css/icons.ltr.css': 'css/icons.83848142e71f3f6f06f0.ltr.css',
+    'smap/js/efc.js': 'smap/js/efc.659f89ec02c7a454f167.js',
+    'js/store.worker.js.LICENSE.txt': 'js/store.worker.ce75eef2a576fe0ea685.js.LICENSE.txt'
+  };
+  callTestCase(filename, output);
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/__test__/removeHashFromFileName.test.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _removeHashFromFileName = require("../removeHashFromFileName");
+
+/* eslint-disable max-lines */
+function callRemoveHash(filename, output) {
+  const hashLength = 20;
+  const input = (0, _removeHashFromFileName.removeHashFromFileName)(filename, hashLength);
+  expect(input).toBe(output);
+}
+
+test('check i18n file', () => {
+  const filename = 'i18n-chunks/pl_PL/9978.1bff2fdb3a2bb05ee845.i18n.js';
+  const output = 'i18n-chunks/pl_PL/9978.i18n.js';
+  callRemoveHash(filename, output);
+});
+test('check LICENSE.txt file', () => {
+  const filename = 'js/efc.659f89ec02c7a454f167.js.LICENSE.txt';
+  const output = 'js/efc.js.LICENSE.txt';
+  callRemoveHash(filename, output);
+});
+test('check js file', () => {
+  const filename = 'smap/js/icons.32650912f9d52c500752.js';
+  const output = 'smap/js/icons.js';
+  callRemoveHash(filename, output);
+});
+test('check css file', () => {
+  const filename = 'css/styles.304e3585c48bc1da0f50.ltr.css';
+  const output = 'css/styles.ltr.css';
+  callRemoveHash(filename, output);
+});
+test('check vendor file', () => {
+  const filename = 'smap/js/vendor.d8cb6423142255fb107d.js';
+  const output = 'smap/js/vendor.js';
+  callRemoveHash(filename, output);
+});
+test('check image file', () => {
+  const filename = 'images/radarQrCode.3658d05a928b8337173f.png';
+  const output = 'images/radarQrCode.png';
+  callRemoveHash(filename, output);
+});
+test('check fonts file', () => {
+  const filename = 'fonts/DeskWhiteLogo.9bd41daeeb87d691b83c.svg';
+  const output = 'fonts/DeskWhiteLogo.svg';
+  callRemoveHash(filename, output);
+});
+test('check videos file', () => {
+  const filename = 'videos/IMBubbleMaximizedView.5d2ab1747e7d1bcd1add.mp4';
+  const output = 'videos/IMBubbleMaximizedView.mp4';
+  callRemoveHash(filename, output);
+});
+test('check html file', () => {
+  const filename = 'index.7d89d2bdec8567df96ec.html';
+  const output = 'index.html';
+  callRemoveHash(filename, output);
+});
+test('chunk name greater than hash', () => {
+  const filename = 'videos/IMBubbleMaximizedView.5d2ab1747e7d1bcd1add.mp4';
+  const output = 'videos/IMBubbleMaximizedView.mp4';
+  callRemoveHash(filename, output);
+});
+test('chunk name lesser than hash', () => {
+  const filename = 'index.7d89d2bdec8567df96ec.html';
+  const output = 'index.html';
+  callRemoveHash(filename, output);
+});
+test('check i18n.js.map file', () => {
+  const filename = 'i18n-chunks/pl_PL/9978.1bff2fdb3a2bb05ee845.i18n.js.map';
+  const output = 'i18n-chunks/pl_PL/9978.i18n.js.map';
+  callRemoveHash(filename, output);
+});
+test('check LICENSE.txt.map file', () => {
+  const filename = 'js/efc.659f89ec02c7a454f167.js.LICENSE.txt.map';
+  const output = 'js/efc.js.LICENSE.txt.map';
+  callRemoveHash(filename, output);
+});
+test('check js.map file', () => {
+  const filename = 'smap/js/icons.32650912f9d52c500752.js.map';
+  const output = 'smap/js/icons.js.map';
+  callRemoveHash(filename, output);
+});
+test('check css.map file', () => {
+  const filename = 'css/styles.304e3585c48bc1da0f50.ltr.css.map';
+  const output = 'css/styles.ltr.css.map';
+  callRemoveHash(filename, output);
+});
+test('check vendor.js.map file', () => {
+  const filename = 'smap/js/vendor.d8cb6423142255fb107d.js.map';
+  const output = 'smap/js/vendor.js.map';
+  callRemoveHash(filename, output);
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/addFilesNamesToManifestJson.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addFilesNamesToManifestJson = addFilesNamesToManifestJson;
+
+var _removeHashFromFileName = require("./removeHashFromFileName");
+
+function addFilesNamesToManifestJson({
+  manifestJson,
+  option,
+  assets,
+  hashDigestLength
+}) {
+  const json = manifestJson;
+  Object.keys(assets).forEach(filename => {
+    if (option.test(filename)) {
+      const filenameNameWithoutHash = (0, _removeHashFromFileName.removeHashFromFileName)(filename, hashDigestLength);
+      json[filenameNameWithoutHash] = filename;
+    }
+  });
+  return json;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/createInitialEntries.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createInitialEntriesForManifestJson = createInitialEntriesForManifestJson;
+
+var _removeHashFromFileName = require("./removeHashFromFileName");
+
+function createInitialEntriesForManifestJson(initialFileNames, hashLength) {
+  const initialEntries = {};
+  initialFileNames.forEach(fileName => {
+    const filenameNameWithoutHash = (0, _removeHashFromFileName.removeHashFromFileName)(fileName, hashLength);
+    initialEntries[filenameNameWithoutHash] = fileName;
+  });
+  return initialEntries;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/createManifestJson.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createManifestJson = createManifestJson;
+
+var _findInitialFileNames = require("./findInitialFileNames");
+
+var _addFilesNamesToManifestJson = require("./addFilesNamesToManifestJson");
+
+var _createInitialEntries = require("./createInitialEntries");
+
+function createManifestJson({
+  option,
+  hashDigestLength,
+  compilation,
+  assets
+}) {
+  const manifestJson = {};
+
+  if (option.needInitialEntries) {
+    const initialFileNames = (0, _findInitialFileNames.findInitialFileNames)(compilation);
+    const initialEntries = (0, _createInitialEntries.createInitialEntriesForManifestJson)(initialFileNames, hashDigestLength);
+    manifestJson.initialEntries = initialEntries;
+  }
+
+  const outputJson = (0, _addFilesNamesToManifestJson.addFilesNamesToManifestJson)({
+    manifestJson,
+    option,
+    assets,
+    hashDigestLength
+  });
+  return outputJson;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/findInitialFileNames.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findInitialFileNames = findInitialFileNames;
+
+function findInitialFileNames(compilation) {
+  const initialEntries = [];
+  compilation.entrypoints.forEach(element => {
+    element.chunks.forEach(chunk => {
+      Array.from(chunk.files).forEach(filename => {
+        initialEntries.push(filename);
+      });
+    });
+  });
+  return initialEntries;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddFileToManifestJson = void 0;
+
+var _webpack = require("webpack");
+
+var _createManifestJson = require("./createManifestJson");
+
+const pluginName = 'AddFileToManifestJson';
+
+class AddFileToManifestJson {
+  constructor(options) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
+      }, assets => {
+        const {
+          hashDigestLength
+        } = compilation.outputOptions;
+        this.options.forEach(option => {
+          const manifestJson = (0, _createManifestJson.createManifestJson)({
+            option,
+            hashDigestLength,
+            compilation,
+            assets
+          });
+          compilation.emitAsset(option.outputJsonFileName, new RawSource(JSON.stringify(manifestJson)));
+        });
+      });
+    });
+  }
+
+}
+
+exports.AddFileToManifestJson = AddFileToManifestJson;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/removeHashFromFileName.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeHashFromFileName = removeHashFromFileName;
+
+function removeHashFromFileName(fileName, hashDigestLength) {
+  let outputFileName = '';
+  fileName.split('.').forEach(iterateValue => {
+    if (outputFileName === '') {
+      outputFileName += iterateValue;
+    } else if (iterateValue.length < hashDigestLength) {
+      outputFileName += `.${iterateValue}`;
+    }
+  });
+  return outputFileName;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RTLSplitPlugin.js

@@ -0,0 +1 @@
+"use strict";

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ResourceHintsPlugin.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _webpack = require("webpack");
+
+const pluginName = 'prefetch-preload-chunk-plugin';
+/**
+ * NOTE: below functions are useable in webpack 5.79.0 as per day 28 Apr 2023
+ * Please checkout for future changes
+ * Here List of functions that take chunkId as Argument and return url without publicPath
+ * `__webpack_require__.u(chunkId)`          -  return's JS script urlPath
+ * `__webpack_require__.miniCssF(chunkId)`   -  return's CSS script urlPath
+ * `__webpack_require__.miniI18nF(chunkId)`  -  return's I18N script urlPath
+ *
+ *
+ * if url  has .undefined. then chunk or url not valid or that file nt available
+ */
+
+class ResourceHintsPlugin {
+  constructor({
+    publicPath,
+    resourceHints
+  }) {
+    this.resourceHints = resourceHints;
+    this.allowPrefetchingMultipleChunks = resourceHints.allowPrefetchingMultipleChunks;
+    this.publicPathsTemplateObj = {
+      js: publicPath,
+      css: publicPath,
+      i18n: publicPath
+    };
+  } // eslint-disable-next-line class-methods-use-this
+
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      const enabledChunks = new WeakSet();
+
+      const handler = (entryRuntimeChunk, set) => {
+        if (enabledChunks.has(entryRuntimeChunk)) {
+          return;
+        }
+
+        enabledChunks.add(entryRuntimeChunk);
+        set.add(_webpack.RuntimeGlobals.getFullHash); // set.add(RuntimeGlobals.getChunkCssFilename);
+
+        const {
+          publicPathsTemplateObj
+        } = this;
+        compilation.addRuntimeModule(entryRuntimeChunk, // eslint-disable-next-line no-use-before-define
+        new ResourceHintsRuntimePlugin(compiler, {
+          chunk: entryRuntimeChunk,
+          allowPrefetchingMultipleChunks: this.allowPrefetchingMultipleChunks,
+          publicPathsTemplateObj
+        }));
+      };
+
+      compilation.hooks.runtimeRequirementInTree.for(_webpack.RuntimeGlobals.ensureChunkHandlers).tap(pluginName, handler);
+    });
+  }
+
+}
+
+exports.default = ResourceHintsPlugin;
+
+class ResourceHintsRuntimePlugin extends _webpack.RuntimeModule {
+  constructor(compiler, {
+    chunk,
+    publicPathsTemplateObj,
+    allowPrefetchingMultipleChunks
+  }) {
+    super('ResourceHintsRuntimePlugin loading', 10);
+    this.compiler = compiler;
+    this.publicPathsTemplateObj = publicPathsTemplateObj;
+    this.allowPrefetchingMultipleChunks = allowPrefetchingMultipleChunks;
+    this.chunk = chunk;
+  }
+
+  generate() {
+    const {
+      chunk
+    } = this;
+    const idNameMap = chunk.getChunkMaps().name;
+    const nameIdMap = {};
+    let needsMap = this.allowPrefetchingMultipleChunks;
+    Object.keys(idNameMap).forEach(key => {
+      const value = idNameMap[key];
+      nameIdMap[value] = key;
+
+      if (key !== value) {
+        needsMap = true;
+      }
+    });
+    let {
+      js: jsPP,
+      css: cssPP,
+      i18n: i18nPP
+    } = this.publicPathsTemplateObj;
+    jsPP = jsPP || _webpack.RuntimeGlobals.publicPath;
+    cssPP = cssPP || _webpack.RuntimeGlobals.publicPath;
+    i18nPP = i18nPP || _webpack.RuntimeGlobals.publicPath;
+    /**
+     * naming abbr
+     * ntc -> nameToChunkIdMap
+     * cns -> chunkNames
+     * clt -> createLinkTag
+     * lpp -> loadAsPreloadOrPrefetch
+     */
+
+    return _webpack.Template.asString([`const ntc = ${JSON.stringify(needsMap ? nameIdMap : {})};
+       const cns = Object.keys(ntc);
+
+      function clt(href, rel) {
+        let link = document.createElement("link");
+        link.href = href;
+        link.rel = rel;
+        if(href.endsWith(".css")) {
+          link.as="style";
+        } else if (href.endsWith(".js")) {
+          link.as="script";
+        }
+        document.head.appendChild(link);
+      }
+      function isValidUrl(url) {
+        //return !url.includes(".undefined.");
+        return url.indexOf(".undefined.") === -1;
+      }
+      function lpp(_chunkId, rel) {
+        let chunkId = ${_webpack.RuntimeGlobals.require}.getChunkId(_chunkId);
+        // ${_webpack.RuntimeGlobals.require}.e(chunkId);
+        if(__webpack_require__.O.j(chunkId)) {
+          return;
+        }
+        const jsUrl = ${jsPP} + __webpack_require__.u(chunkId);
+        const cssUrl = ${cssPP} + __webpack_require__.miniCssF(chunkId);
+        isValidUrl(jsUrl) && clt(jsUrl, rel);
+        isValidUrl(cssUrl) && clt(cssUrl, rel);
+        if(__webpack_require__.miniI18nF) {
+          const i18nUrl = ${i18nPP} + __webpack_require__.miniI18nF(chunkId);
+          isValidUrl(i18nUrl) && clt(i18nUrl, rel);
+        }
+      }
+
+      ${_webpack.RuntimeGlobals.require}.getChunkId = function getChunkId(chunkId) {
+        ${needsMap ? 'chunkId = ntc[chunkId]||chunkId;' : ''}
+        return chunkId;
+      }
+      ${_webpack.RuntimeGlobals.require}.getChunkIds = function getChunkIds(chunkId) {
+        ${// eslint-disable-next-line no-nested-ternary
+    this.allowPrefetchingMultipleChunks ? `
+            const isRegExAsChunkId = chunkId instanceof RegExp;
+            if(isRegExAsChunkId) {
+              return cns.filter(chunkName => chunkId.test(chunkName)).map(chunkName => ntc[chunkName]);
+            }
+            return [${_webpack.RuntimeGlobals.require}.getChunkId(chunkId)];
+            ` : `return [${_webpack.RuntimeGlobals.require}.getChunkId(chunkId)];`}
+      }
+      // Prefetch a chunk (${pluginName})
+      ${_webpack.RuntimeGlobals.require}.pfc = function prefetchChunk(chunkId) {
+        ${`
+            let chunkIds = ${_webpack.RuntimeGlobals.require}.getChunkIds(chunkId);
+            chunkIds.forEach(idOfAChunk => {
+              ${_webpack.RuntimeGlobals.require}.e(idOfAChunk);
+            })`}
+      };
+
+      // Preload a chunk (${pluginName})
+      ${_webpack.RuntimeGlobals.require}.plc = function preloadChunk(chunkId) {
+            let idOfAChunk = ${_webpack.RuntimeGlobals.require}.getChunkIds(chunkId)[0];
+            lpp(idOfAChunk, "preload");
+        }
+        ` // `// Prefetch a chunk (${pluginName})`,
+    // `${RuntimeGlobals.require}.pfc = function prefetchChunk(chunkId) {`,
+    // Template.indent([
+    //   `chunkId = ${RuntimeGlobals.require}.getChunkId(chunkId)`,
+    //   `${RuntimeGlobals.require}.e(chunkId);`
+    // ]),
+    // '};',
+    // `// Preload a chunk (${pluginName})`,
+    // `${RuntimeGlobals.require}.pfc = function prefetchChunk(chunkId) {`,
+    // Template.indent([
+    //   `chunkId = ${RuntimeGlobals.require}.getChunkId(chunkId)`,
+    //   `${RuntimeGlobals.require}.e(chunkId);`
+    // ]),
+    // '};'
+    ]);
+  }
+
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/OverwriteCssPathForRTL.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+var _JavascriptModulesPlugin = _interopRequireDefault(require("webpack/lib/javascript/JavascriptModulesPlugin"));
+
+var _replaceCssDirTemplate = require("./replaceCssDirTemplate");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import { JavascriptModulesPlugin } from 'webpack';
+const pluginName = 'OverwriteCssPathForRTL';
+
+class OverwriteCssPathForRTL {
+  constructor(options = {
+    dirVarName: 'document.dir'
+  }) {
+    this.dirVarName = options.dirVarName || 'document.dir';
+    this.templateLabel = options.templateLabel || '{{--dir}}';
+  }
+
+  overwriteCssPathinHTML(compilation) {
+    // NOTE: need to reconsider It is not working as expected
+    _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tap(pluginName, data => {
+      const {
+        assets
+      } = data;
+      return { ...data,
+        assets: { ...assets,
+          css: assets.css && (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(assets.css, this.templateLabel)
+        }
+      };
+    });
+  }
+
+  overwriteCssPathinRequireEnsure(compilation, compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+
+    _JavascriptModulesPlugin.default.getCompilationHooks(compilation).renderMain.tap(pluginName, source => {
+      const templateText = `"+(${this.dirVarName} === "rtl" ? "rtl": "ltr")+"`;
+      const replacedStr = source.source().replace(/\[dir\]/g, templateText);
+      return new RawSource(replacedStr);
+    });
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      this.overwriteCssPathinHTML(compilation);
+      this.overwriteCssPathinRequireEnsure(compilation, compiler);
+    });
+  }
+
+}
+
+exports.default = OverwriteCssPathForRTL;