From 85e69a81ea82da98a2d5ddd88bb7cabf4476593b Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Sat, 9 Oct 2021 15:17:55 +0300 Subject: [PATCH] fix: classes generation for client and server bundling --- .../__snapshots__/modules-option.test.js.snap | 171 ++++++++++++++++++ test/modules-option.test.js | 68 +++++++ 2 files changed, 239 insertions(+) diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index 6dcffc05a..e5c9240b0 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -1979,6 +1979,177 @@ Array [ exports[`"modules" option should work and correctly replace escaped symbols: warnings 1`] = `Array []`; +exports[`"modules" option should work and generate the same classes for client and server: client errors 1`] = `Array []`; + +exports[`"modules" option should work and generate the same classes for client and server: client module 1`] = ` +"// extracted by mini-css-extract-plugin +export default {\\"123\\":\\"_Oc_nRVO4GQ7K00YULUr\\",\\"test\\":\\"HovVWrUTjN5P06AwS5hN\\",\\"_test\\":\\"_1mLQ0KYr3ydD9bSOOL1\\",\\"className\\":\\"MMk_yFMICywUeqR0iepY\\",\\"someId\\":\\"f_mZz_4mbpipziaiwoW7\\",\\"subClass\\":\\"FYyIWexDGlFG5gXl93Xj\\",\\"-a0-34a___f\\":\\"r_hifewiIojngzs4DOcu\\",\\"m_x_@\\":\\"yUrnJ_pW2ADLHyYLqUNl\\",\\"B&W?\\":\\"O_Xkei1DAX2qh34wT83c\\",\\":\`(\\":\\"_rpCeu5pHk92Z3qzqY_z\\",\\"1a2b3c\\":\\"mxXeAFeh5Mboa3cSbvJV\\",\\"#fake-id\\":\\"_92k79k_uZJspC9mIPTv\\",\\"-a-b-c-\\":\\"c0kkJWClscbZOtfilBcE\\",\\"©\\":\\"DLosMLOukp7Tp4hO7jL0\\",\\"♥\\":\\"HQMfjUZeec5zWyS66OmG\\",\\"“‘’”\\":\\"bS0LrUqKBV4iaTBAKsMY\\",\\"☺☃\\":\\"F0_yWUDvkyhteJA00zkw\\",\\"⌘⌥\\":\\"VyeHlHnBWZuQCsFzscUO\\",\\"𝄞♪♩♫♬\\":\\"Qi7pfuLhD35O0Cedn4XB\\",\\"💩\\":\\"CjG3lWNhvVCcm5R6oxYM\\",\\"?\\":\\"heeATAtrwLqLPvwgoctG\\",\\"@\\":\\"YofbbuSihGYM9Du0fcYK\\",\\".\\":\\"_29WwWt8JVmDYN7Z_26q\\",\\":)\\":\\"I_4AeARK9lm4N7TVyuAb\\",\\"

\\":\\"KBVLvvCBhxVgvzXe27HR\\",\\"<><<<>><>\\":\\"vOWmh2fN7CCzZsQKNPLz\\",\\"++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.\\":\\"_D32kH5S0xGxuC7YOC_W\\",\\"#\\":\\"LpBEGYchm65LG8_V9AYi\\",\\"##\\":\\"wZKDT2QRg1jShfVg3_E4\\",\\"#.#.#\\":\\"oGI7_ChvpMbDAwYUoeH1\\",\\"_\\":\\"myeULb2GLN5e3KYA4yxA\\",\\"{}\\":\\"Mae71ybFnDtrq6WgUsIc\\",\\"foo.bar\\":\\"TpLCT2g4E__O5IMrfhLJ\\",\\":hover\\":\\"l6Av_vs8d_tfpiyTm4bl\\",\\":hover:focus:active\\":\\"ZGmd9HMc_iPx6487LarY\\",\\"[attr=value]\\":\\"KPlJewNi3KC23yxaC_Se\\",\\"f/o/o\\":\\"DIrFdFnBQ9zTR508DSWD\\",\\"f\\\\\\\\o\\\\\\\\o\\":\\"H1knt1tAX5P0sDfLK_9n\\",\\"f*o*o\\":\\"_vAKu2IlrR_fciB3Sosm\\",\\"f!o!o\\":\\"APY_BKpa8G_34n1qfebn\\",\\"f'o'o\\":\\"jTuAkufdKA9r5gtN7Tkc\\",\\"f~o~o\\":\\"S4VvFBeH35ONqPvY3XAy\\",\\"f+o+o\\":\\"AWIsfyEkWwVCslashhSx\\",\\"foo/bar\\":\\"DhIde1WbgzO_4SPrpPoE\\",\\"foo\\\\\\\\bar\\":\\"aeKkgCs_2D8eu6BLa0Ea\\",\\"foo/bar/baz\\":\\"QFT18bFiHRmL7zKaOBRZ\\",\\"foo\\\\\\\\bar\\\\\\\\baz\\":\\"uM3RYQs79zwACaTJ3vBh\\"};" +`; + +exports[`"modules" option should work and generate the same classes for client and server: client result 1`] = ` +Object { + "#": "LpBEGYchm65LG8_V9AYi", + "##": "wZKDT2QRg1jShfVg3_E4", + "#.#.#": "oGI7_ChvpMbDAwYUoeH1", + "#fake-id": "_92k79k_uZJspC9mIPTv", + "++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.": "_D32kH5S0xGxuC7YOC_W", + "-a-b-c-": "c0kkJWClscbZOtfilBcE", + "-a0-34a___f": "r_hifewiIojngzs4DOcu", + ".": "_29WwWt8JVmDYN7Z_26q", + "123": "_Oc_nRVO4GQ7K00YULUr", + "1a2b3c": "mxXeAFeh5Mboa3cSbvJV", + ":)": "I_4AeARK9lm4N7TVyuAb", + ":\`(": "_rpCeu5pHk92Z3qzqY_z", + ":hover": "l6Av_vs8d_tfpiyTm4bl", + ":hover:focus:active": "ZGmd9HMc_iPx6487LarY", + "<><<<>><>": "vOWmh2fN7CCzZsQKNPLz", + "

": "KBVLvvCBhxVgvzXe27HR", + "?": "heeATAtrwLqLPvwgoctG", + "@": "YofbbuSihGYM9Du0fcYK", + "B&W?": "O_Xkei1DAX2qh34wT83c", + "[attr=value]": "KPlJewNi3KC23yxaC_Se", + "_": "myeULb2GLN5e3KYA4yxA", + "_test": "_1mLQ0KYr3ydD9bSOOL1", + "className": "MMk_yFMICywUeqR0iepY", + "f!o!o": "APY_BKpa8G_34n1qfebn", + "f'o'o": "jTuAkufdKA9r5gtN7Tkc", + "f*o*o": "_vAKu2IlrR_fciB3Sosm", + "f+o+o": "AWIsfyEkWwVCslashhSx", + "f/o/o": "DIrFdFnBQ9zTR508DSWD", + "f\\\\o\\\\o": "H1knt1tAX5P0sDfLK_9n", + "foo.bar": "TpLCT2g4E__O5IMrfhLJ", + "foo/bar": "DhIde1WbgzO_4SPrpPoE", + "foo/bar/baz": "QFT18bFiHRmL7zKaOBRZ", + "foo\\\\bar": "aeKkgCs_2D8eu6BLa0Ea", + "foo\\\\bar\\\\baz": "uM3RYQs79zwACaTJ3vBh", + "f~o~o": "S4VvFBeH35ONqPvY3XAy", + "m_x_@": "yUrnJ_pW2ADLHyYLqUNl", + "someId": "f_mZz_4mbpipziaiwoW7", + "subClass": "FYyIWexDGlFG5gXl93Xj", + "test": "HovVWrUTjN5P06AwS5hN", + "{}": "Mae71ybFnDtrq6WgUsIc", + "©": "DLosMLOukp7Tp4hO7jL0", + "“‘’”": "bS0LrUqKBV4iaTBAKsMY", + "⌘⌥": "VyeHlHnBWZuQCsFzscUO", + "☺☃": "F0_yWUDvkyhteJA00zkw", + "♥": "HQMfjUZeec5zWyS66OmG", + "𝄞♪♩♫♬": "Qi7pfuLhD35O0Cedn4XB", + "💩": "CjG3lWNhvVCcm5R6oxYM", +} +`; + +exports[`"modules" option should work and generate the same classes for client and server: client warnings 1`] = `Array []`; + +exports[`"modules" option should work and generate the same classes for client and server: server errors 1`] = `Array []`; + +exports[`"modules" option should work and generate the same classes for client and server: server module 1`] = ` +"// Exports +export default { + \\"123\\": \\"_Oc_nRVO4GQ7K00YULUr\\", + \\"test\\": \\"HovVWrUTjN5P06AwS5hN\\", + \\"_test\\": \\"_1mLQ0KYr3ydD9bSOOL1\\", + \\"className\\": \\"MMk_yFMICywUeqR0iepY\\", + \\"someId\\": \\"f_mZz_4mbpipziaiwoW7\\", + \\"subClass\\": \\"FYyIWexDGlFG5gXl93Xj\\", + \\"-a0-34a___f\\": \\"r_hifewiIojngzs4DOcu\\", + \\"m_x_@\\": \\"yUrnJ_pW2ADLHyYLqUNl\\", + \\"B&W?\\": \\"O_Xkei1DAX2qh34wT83c\\", + \\":\`(\\": \\"_rpCeu5pHk92Z3qzqY_z\\", + \\"1a2b3c\\": \\"mxXeAFeh5Mboa3cSbvJV\\", + \\"#fake-id\\": \\"_92k79k_uZJspC9mIPTv\\", + \\"-a-b-c-\\": \\"c0kkJWClscbZOtfilBcE\\", + \\"©\\": \\"DLosMLOukp7Tp4hO7jL0\\", + \\"♥\\": \\"HQMfjUZeec5zWyS66OmG\\", + \\"“‘’”\\": \\"bS0LrUqKBV4iaTBAKsMY\\", + \\"☺☃\\": \\"F0_yWUDvkyhteJA00zkw\\", + \\"⌘⌥\\": \\"VyeHlHnBWZuQCsFzscUO\\", + \\"𝄞♪♩♫♬\\": \\"Qi7pfuLhD35O0Cedn4XB\\", + \\"💩\\": \\"CjG3lWNhvVCcm5R6oxYM\\", + \\"?\\": \\"heeATAtrwLqLPvwgoctG\\", + \\"@\\": \\"YofbbuSihGYM9Du0fcYK\\", + \\".\\": \\"_29WwWt8JVmDYN7Z_26q\\", + \\":)\\": \\"I_4AeARK9lm4N7TVyuAb\\", + \\"

\\": \\"KBVLvvCBhxVgvzXe27HR\\", + \\"<><<<>><>\\": \\"vOWmh2fN7CCzZsQKNPLz\\", + \\"++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.\\": \\"_D32kH5S0xGxuC7YOC_W\\", + \\"#\\": \\"LpBEGYchm65LG8_V9AYi\\", + \\"##\\": \\"wZKDT2QRg1jShfVg3_E4\\", + \\"#.#.#\\": \\"oGI7_ChvpMbDAwYUoeH1\\", + \\"_\\": \\"myeULb2GLN5e3KYA4yxA\\", + \\"{}\\": \\"Mae71ybFnDtrq6WgUsIc\\", + \\"foo.bar\\": \\"TpLCT2g4E__O5IMrfhLJ\\", + \\":hover\\": \\"l6Av_vs8d_tfpiyTm4bl\\", + \\":hover:focus:active\\": \\"ZGmd9HMc_iPx6487LarY\\", + \\"[attr=value]\\": \\"KPlJewNi3KC23yxaC_Se\\", + \\"f/o/o\\": \\"DIrFdFnBQ9zTR508DSWD\\", + \\"f\\\\\\\\o\\\\\\\\o\\": \\"H1knt1tAX5P0sDfLK_9n\\", + \\"f*o*o\\": \\"_vAKu2IlrR_fciB3Sosm\\", + \\"f!o!o\\": \\"APY_BKpa8G_34n1qfebn\\", + \\"f'o'o\\": \\"jTuAkufdKA9r5gtN7Tkc\\", + \\"f~o~o\\": \\"S4VvFBeH35ONqPvY3XAy\\", + \\"f+o+o\\": \\"AWIsfyEkWwVCslashhSx\\", + \\"foo/bar\\": \\"DhIde1WbgzO_4SPrpPoE\\", + \\"foo\\\\\\\\bar\\": \\"aeKkgCs_2D8eu6BLa0Ea\\", + \\"foo/bar/baz\\": \\"QFT18bFiHRmL7zKaOBRZ\\", + \\"foo\\\\\\\\bar\\\\\\\\baz\\": \\"uM3RYQs79zwACaTJ3vBh\\" +}; +" +`; + +exports[`"modules" option should work and generate the same classes for client and server: server result 1`] = ` +Object { + "#": "LpBEGYchm65LG8_V9AYi", + "##": "wZKDT2QRg1jShfVg3_E4", + "#.#.#": "oGI7_ChvpMbDAwYUoeH1", + "#fake-id": "_92k79k_uZJspC9mIPTv", + "++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.": "_D32kH5S0xGxuC7YOC_W", + "-a-b-c-": "c0kkJWClscbZOtfilBcE", + "-a0-34a___f": "r_hifewiIojngzs4DOcu", + ".": "_29WwWt8JVmDYN7Z_26q", + "123": "_Oc_nRVO4GQ7K00YULUr", + "1a2b3c": "mxXeAFeh5Mboa3cSbvJV", + ":)": "I_4AeARK9lm4N7TVyuAb", + ":\`(": "_rpCeu5pHk92Z3qzqY_z", + ":hover": "l6Av_vs8d_tfpiyTm4bl", + ":hover:focus:active": "ZGmd9HMc_iPx6487LarY", + "<><<<>><>": "vOWmh2fN7CCzZsQKNPLz", + "

": "KBVLvvCBhxVgvzXe27HR", + "?": "heeATAtrwLqLPvwgoctG", + "@": "YofbbuSihGYM9Du0fcYK", + "B&W?": "O_Xkei1DAX2qh34wT83c", + "[attr=value]": "KPlJewNi3KC23yxaC_Se", + "_": "myeULb2GLN5e3KYA4yxA", + "_test": "_1mLQ0KYr3ydD9bSOOL1", + "className": "MMk_yFMICywUeqR0iepY", + "f!o!o": "APY_BKpa8G_34n1qfebn", + "f'o'o": "jTuAkufdKA9r5gtN7Tkc", + "f*o*o": "_vAKu2IlrR_fciB3Sosm", + "f+o+o": "AWIsfyEkWwVCslashhSx", + "f/o/o": "DIrFdFnBQ9zTR508DSWD", + "f\\\\o\\\\o": "H1knt1tAX5P0sDfLK_9n", + "foo.bar": "TpLCT2g4E__O5IMrfhLJ", + "foo/bar": "DhIde1WbgzO_4SPrpPoE", + "foo/bar/baz": "QFT18bFiHRmL7zKaOBRZ", + "foo\\\\bar": "aeKkgCs_2D8eu6BLa0Ea", + "foo\\\\bar\\\\baz": "uM3RYQs79zwACaTJ3vBh", + "f~o~o": "S4VvFBeH35ONqPvY3XAy", + "m_x_@": "yUrnJ_pW2ADLHyYLqUNl", + "someId": "f_mZz_4mbpipziaiwoW7", + "subClass": "FYyIWexDGlFG5gXl93Xj", + "test": "HovVWrUTjN5P06AwS5hN", + "{}": "Mae71ybFnDtrq6WgUsIc", + "©": "DLosMLOukp7Tp4hO7jL0", + "“‘’”": "bS0LrUqKBV4iaTBAKsMY", + "⌘⌥": "VyeHlHnBWZuQCsFzscUO", + "☺☃": "F0_yWUDvkyhteJA00zkw", + "♥": "HQMfjUZeec5zWyS66OmG", + "𝄞♪♩♫♬": "Qi7pfuLhD35O0Cedn4XB", + "💩": "CjG3lWNhvVCcm5R6oxYM", +} +`; + +exports[`"modules" option should work and generate the same classes for client and server: server warnings 1`] = `Array []`; + exports[`"modules" option should work and has "undefined" context if no context was given: errors 1`] = `Array []`; exports[`"modules" option should work and has "undefined" context if no context was given: module 1`] = ` diff --git a/test/modules-option.test.js b/test/modules-option.test.js index e152679c7..7c020ea5a 100644 --- a/test/modules-option.test.js +++ b/test/modules-option.test.js @@ -2113,4 +2113,72 @@ describe('"modules" option', () => { expect(getWarnings(stats)).toMatchSnapshot("warnings"); expect(getErrors(stats)).toMatchSnapshot("errors"); }); + + it("should work and generate the same classes for client and server", async () => { + const clientCompiler = getCompiler( + "./modules/localIdentName/localIdentName.js", + {}, + { + module: { + rules: [ + { + test: /\.css$/i, + use: [ + { + loader: MiniCssExtractPlugin.loader, + }, + { + loader: path.resolve(__dirname, "../src"), + options: { + modules: true, + }, + }, + ], + }, + ], + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: "[name].css", + chunkFilename: "[id].css", + }), + ], + } + ); + const clientStats = await compile(clientCompiler); + + expect( + getModuleSource( + "./modules/localIdentName/localIdentName.css", + clientStats + ) + ).toMatchSnapshot("client module"); + expect( + getExecutedCode("main.bundle.js", clientCompiler, clientStats) + ).toMatchSnapshot("client result"); + expect(getWarnings(clientStats)).toMatchSnapshot("client warnings"); + expect(getErrors(clientStats)).toMatchSnapshot("client errors"); + + const serverCompiler = getCompiler( + "./modules/localIdentName/localIdentName.js", + { + modules: { + exportOnlyLocals: true, + }, + } + ); + const serverStats = await compile(serverCompiler); + + expect( + getModuleSource( + "./modules/localIdentName/localIdentName.css", + serverStats + ) + ).toMatchSnapshot("server module"); + expect( + getExecutedCode("main.bundle.js", serverCompiler, serverStats) + ).toMatchSnapshot("server result"); + expect(getWarnings(serverStats)).toMatchSnapshot("server warnings"); + expect(getErrors(serverStats)).toMatchSnapshot("server errors"); + }); });