From d06b22d9b4bfb0d76239b43a784c7515e2d2731c Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Sun, 18 Jun 2023 21:51:48 +0530 Subject: [PATCH 01/11] feat: use css/auto as default css type --- lib/config/defaults.js | 6 +++--- lib/css/CssParser.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/config/defaults.js b/lib/config/defaults.js index ecede401145..75883090d25 100644 --- a/lib/config/defaults.js +++ b/lib/config/defaults.js @@ -15,7 +15,7 @@ const { JAVASCRIPT_MODULE_TYPE_DYNAMIC, WEBASSEMBLY_MODULE_TYPE_SYNC, ASSET_MODULE_TYPE, - CSS_MODULE_TYPE + CSS_MODULE_TYPE_AUTO } = require("../ModuleTypeConstants"); const Template = require("../Template"); const { cleverMerge } = require("../util/cleverMerge"); @@ -709,14 +709,14 @@ const applyModuleDefaults = ( } if (css) { const cssRule = { - type: CSS_MODULE_TYPE, + type: CSS_MODULE_TYPE_AUTO, resolve: { fullySpecified: true, preferRelative: true } }; const cssModulesRule = { - type: "css/module", + type: CSS_MODULE_TYPE_AUTO, resolve: { fullySpecified: true } diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index c8789c713c4..074dd4f838c 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -39,7 +39,7 @@ const IMAGE_SET_FUNCTION = /^(-\w+-)?image-set$/i; const OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE = /^@(-\w+-)?keyframes$/; const OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY = /^(-\w+-)?animation(-name)?$/i; -const IS_MODULES = /\.module(s)?\.\w+$/i; +const IS_MODULES = /\.module(s)?\.[\w-]+$/i; /** * @param {string} str url string From 991280588fc8875364b3597a2d83834886671dc5 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Sun, 18 Jun 2023 21:52:08 +0530 Subject: [PATCH 02/11] test: update snapshots --- test/Defaults.unittest.js | 8 ++++---- test/__snapshots__/ConfigTestCases.basictest.js.snap | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/test/Defaults.unittest.js b/test/Defaults.unittest.js index 09a47695ea1..3d97e8c4a8c 100644 --- a/test/Defaults.unittest.js +++ b/test/Defaults.unittest.js @@ -2242,14 +2242,14 @@ describe("snapshots", () => { + "fullySpecified": true, + }, + "test": /\\.module\\.css$/i, - + "type": "css/module", + + "type": "css/auto", + }, + Object { + "resolve": Object { + "fullySpecified": true, + "preferRelative": true, + }, - + "type": "css", + + "type": "css/auto", + }, + ], + "test": /\\.css$/i, @@ -2259,7 +2259,7 @@ describe("snapshots", () => { + "resolve": Object { + "fullySpecified": true, + }, - + "type": "css/module", + + "type": "css/auto", + }, + Object { + "mimetype": "text/css", @@ -2267,7 +2267,7 @@ describe("snapshots", () => { + "fullySpecified": true, + "preferRelative": true, + }, - + "type": "css", + + "type": "css/auto", + }, + Object { @@ ... @@ diff --git a/test/__snapshots__/ConfigTestCases.basictest.js.snap b/test/__snapshots__/ConfigTestCases.basictest.js.snap index 6c4e2c09e44..67ea085bf3b 100644 --- a/test/__snapshots__/ConfigTestCases.basictest.js.snap +++ b/test/__snapshots__/ConfigTestCases.basictest.js.snap @@ -1244,7 +1244,7 @@ body { background: red; } -head{--webpack-main:https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external\\\\.css,\\\\/\\\\/example\\\\.com\\\\/style\\\\.css,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Roboto,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Noto\\\\+Sans\\\\+TC,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Noto\\\\+Sans\\\\+TC\\\\|Roboto,https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external1\\\\.css,https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external2\\\\.css,\\\\.\\\\/node_modules\\\\/style-library\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/main-field\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/package-with-exports\\\\/style\\\\.css,\\\\.\\\\/extensions-imported\\\\.mycss,\\\\.\\\\/file\\\\.less,\\\\.\\\\/with-less-import\\\\.css,\\\\.\\\\/prefer-relative\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style\\\\/default\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-mode\\\\/mode\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-subpath\\\\/dist\\\\/custom\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-subpath-extra\\\\/dist\\\\/custom\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-less\\\\/default\\\\.less,\\\\.\\\\/node_modules\\\\/condition-names-custom-name\\\\/custom-name\\\\.css,\\\\.\\\\/node_modules\\\\/style-and-main-library\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-webpack\\\\/webpack\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-nested\\\\/default\\\\.css,\\\\.\\\\/style-import\\\\.css,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=10,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=12,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=13,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=14,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=15,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=16,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=17,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=18,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=19,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=20,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=21,\\\\.\\\\/imported\\\\.css\\\\?2fc7,\\\\.\\\\/imported\\\\.css\\\\?8e23,\\\\.\\\\/imported\\\\.css\\\\?daf4,\\\\.\\\\/imported\\\\.css\\\\?7a8d,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/style2\\\\.css\\\\?3989,\\\\.\\\\/style2\\\\.css\\\\?1933,\\\\.\\\\/style2\\\\.css\\\\?6611,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1\\\\#hash\\\\?0d7a,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1\\\\#hash\\\\?2c9a,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=1,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=2,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=3,\\\\.\\\\/style3\\\\.css\\\\?\\\\=bar4,\\\\.\\\\/styl\\\\'le7\\\\.css,\\\\.\\\\/styl\\\\'le7\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\ test\\\\.css,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/test\\\\.css,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/test\\\\ test\\\\.css\\\\?fpp\\\\=10,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=bazz,\\\\.\\\\/string-loader\\\\.js\\\\?esModule\\\\=false\\\\!\\\\.\\\\/test\\\\.css\\\\?023f,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=bar,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=bar\\\\#hash,\\\\.\\\\/style4\\\\.css\\\\?\\\\#hash,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/string-loader\\\\.js\\\\?esModule\\\\=false\\\\!\\\\.\\\\/test\\\\.css\\\\?4a4a,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\,a\\\\%20\\\\%7B\\\\%0D\\\\%0A\\\\%20\\\\%20color\\\\%3A\\\\%20red\\\\%3B\\\\%0D\\\\%0A\\\\%7D,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\,a\\\\%20\\\\%7B\\\\%0D\\\\%0A\\\\%20\\\\%20color\\\\%3A\\\\%20blue\\\\%3B\\\\%0D\\\\%0A\\\\%7D,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\;base64\\\\,YSB7DQogIGNvbG9yOiByZWQ7DQp9,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=3\\\\?14ba,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=3\\\\?0e0d,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style6\\\\.css,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=10,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=12,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=13,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=14,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=15,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=16,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=17,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=18,\\\\.\\\\/style8\\\\.css\\\\?5018,\\\\.\\\\/style8\\\\.css\\\\?204b,\\\\.\\\\/style8\\\\.css\\\\?63b0,\\\\.\\\\/style8\\\\.css\\\\?edb8,\\\\.\\\\/style8\\\\.css\\\\?6154,\\\\.\\\\/style8\\\\.css\\\\?8c51,\\\\.\\\\/style8\\\\.css\\\\?ced0,\\\\.\\\\/style8\\\\.css\\\\?d3b8,\\\\.\\\\/style8\\\\.css\\\\?3557,\\\\.\\\\/style8\\\\.css\\\\?ae6e,\\\\.\\\\/style8\\\\.css\\\\?d078,\\\\.\\\\/style8\\\\.css\\\\?ae8b,\\\\.\\\\/style2\\\\.css\\\\?ee8c,\\\\.\\\\/style9\\\\.css\\\\?5f26,\\\\.\\\\/style9\\\\.css\\\\?6536,\\\\.\\\\/style11\\\\.css,\\\\.\\\\/style12\\\\.css,\\\\.\\\\/style10\\\\.css,\\\\.\\\\/media-deep-deep-nested\\\\.css\\\\?1b5b,\\\\.\\\\/media-deep-nested\\\\.css,\\\\.\\\\/media-nested\\\\.css,\\\\.\\\\/supports-deep-deep-nested\\\\.css,\\\\.\\\\/supports-deep-nested\\\\.css,\\\\.\\\\/supports-nested\\\\.css,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?2bf1,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?3469,\\\\.\\\\/layer-nested\\\\.css,\\\\.\\\\/all-deep-deep-nested\\\\.css\\\\?a7dd,\\\\.\\\\/all-deep-nested\\\\.css\\\\?5612,\\\\.\\\\/all-nested\\\\.css\\\\?a3fd,\\\\.\\\\/mixed-deep-deep-nested\\\\.css,\\\\.\\\\/mixed-deep-nested\\\\.css,\\\\.\\\\/mixed-nested\\\\.css,\\\\.\\\\/anonymous-deep-deep-nested\\\\.css\\\\?8f95,\\\\.\\\\/anonymous-deep-nested\\\\.css\\\\?40b5,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?e681,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?dc2a,\\\\.\\\\/anonymous-nested\\\\.css\\\\?8aa8,\\\\.\\\\/media-deep-deep-nested\\\\.css\\\\?3aba,\\\\.\\\\/style8\\\\.css\\\\?83bd,\\\\.\\\\/duplicate-nested\\\\.css,\\\\.\\\\/anonymous-deep-deep-nested\\\\.css\\\\?384f,\\\\.\\\\/anonymous-deep-nested\\\\.css\\\\?8c49,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?17f5,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?c345,\\\\.\\\\/anonymous-nested\\\\.css\\\\?d028,\\\\.\\\\/all-deep-deep-nested\\\\.css\\\\?220a,\\\\.\\\\/all-deep-nested\\\\.css\\\\?7c65,\\\\.\\\\/all-nested\\\\.css\\\\?5ae5,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=6,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=7,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=8,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown2,\\\\.\\\\/style2\\\\.css\\\\?unknown3,\\\\.\\\\/style2\\\\.css\\\\?after-namespace,\\\\.\\\\/style2\\\\.css\\\\?multiple\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?multiple\\\\=3,\\\\.\\\\/style2\\\\.css\\\\?strange\\\\=3,\\\\.\\\\/style\\\\.css;}", +head{--webpack-main:https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external\\\\.css,\\\\/\\\\/example\\\\.com\\\\/style\\\\.css,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Roboto,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Noto\\\\+Sans\\\\+TC,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Noto\\\\+Sans\\\\+TC\\\\|Roboto,https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external1\\\\.css,https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external2\\\\.css,\\\\.\\\\/node_modules\\\\/style-library\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/main-field\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/package-with-exports\\\\/style\\\\.css,\\\\.\\\\/extensions-imported\\\\.mycss,\\\\.\\\\/file\\\\.less,\\\\.\\\\/with-less-import\\\\.css,\\\\.\\\\/prefer-relative\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style\\\\/default\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-mode\\\\/mode\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-subpath\\\\/dist\\\\/custom\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-subpath-extra\\\\/dist\\\\/custom\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-less\\\\/default\\\\.less,\\\\.\\\\/node_modules\\\\/condition-names-custom-name\\\\/custom-name\\\\.css,\\\\.\\\\/node_modules\\\\/style-and-main-library\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-webpack\\\\/webpack\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-nested\\\\/default\\\\.css,\\\\.\\\\/style-import\\\\.css,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=10,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=12,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=13,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=14,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=15,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=16,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=17,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=18,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=19,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=20,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=21,\\\\.\\\\/imported\\\\.css\\\\?1832,\\\\.\\\\/imported\\\\.css\\\\?e0bb,\\\\.\\\\/imported\\\\.css\\\\?769a,\\\\.\\\\/imported\\\\.css\\\\?d4d6,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/style2\\\\.css\\\\?cf0d,\\\\.\\\\/style2\\\\.css\\\\?dfe6,\\\\.\\\\/style2\\\\.css\\\\?7d49,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1\\\\#hash\\\\?63d2,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1\\\\#hash\\\\?e75b,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=1,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=2,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=3,\\\\.\\\\/style3\\\\.css\\\\?\\\\=bar4,\\\\.\\\\/styl\\\\'le7\\\\.css,\\\\.\\\\/styl\\\\'le7\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\ test\\\\.css,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/test\\\\.css,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/test\\\\ test\\\\.css\\\\?fpp\\\\=10,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=bazz,\\\\.\\\\/string-loader\\\\.js\\\\?esModule\\\\=false\\\\!\\\\.\\\\/test\\\\.css\\\\?10e0,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=bar,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=bar\\\\#hash,\\\\.\\\\/style4\\\\.css\\\\?\\\\#hash,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/string-loader\\\\.js\\\\?esModule\\\\=false\\\\!\\\\.\\\\/test\\\\.css\\\\?6393,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\,a\\\\%20\\\\%7B\\\\%0D\\\\%0A\\\\%20\\\\%20color\\\\%3A\\\\%20red\\\\%3B\\\\%0D\\\\%0A\\\\%7D,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\,a\\\\%20\\\\%7B\\\\%0D\\\\%0A\\\\%20\\\\%20color\\\\%3A\\\\%20blue\\\\%3B\\\\%0D\\\\%0A\\\\%7D,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\;base64\\\\,YSB7DQogIGNvbG9yOiByZWQ7DQp9,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=3\\\\?1ab5,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=3\\\\?19e1,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style6\\\\.css,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=10,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=12,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=13,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=14,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=15,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=16,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=17,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=18,\\\\.\\\\/style8\\\\.css\\\\?b84b,\\\\.\\\\/style8\\\\.css\\\\?5dc5,\\\\.\\\\/style8\\\\.css\\\\?71be,\\\\.\\\\/style8\\\\.css\\\\?386a,\\\\.\\\\/style8\\\\.css\\\\?568a,\\\\.\\\\/style8\\\\.css\\\\?b9af,\\\\.\\\\/style8\\\\.css\\\\?7300,\\\\.\\\\/style8\\\\.css\\\\?6efd,\\\\.\\\\/style8\\\\.css\\\\?288c,\\\\.\\\\/style8\\\\.css\\\\?1094,\\\\.\\\\/style8\\\\.css\\\\?38bf,\\\\.\\\\/style8\\\\.css\\\\?d697,\\\\.\\\\/style2\\\\.css\\\\?0aae,\\\\.\\\\/style9\\\\.css\\\\?8e91,\\\\.\\\\/style9\\\\.css\\\\?71b5,\\\\.\\\\/style11\\\\.css,\\\\.\\\\/style12\\\\.css,\\\\.\\\\/style10\\\\.css,\\\\.\\\\/media-deep-deep-nested\\\\.css\\\\?ef21,\\\\.\\\\/media-deep-nested\\\\.css,\\\\.\\\\/media-nested\\\\.css,\\\\.\\\\/supports-deep-deep-nested\\\\.css,\\\\.\\\\/supports-deep-nested\\\\.css,\\\\.\\\\/supports-nested\\\\.css,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?5660,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?9fd1,\\\\.\\\\/layer-nested\\\\.css,\\\\.\\\\/all-deep-deep-nested\\\\.css\\\\?af0a,\\\\.\\\\/all-deep-nested\\\\.css\\\\?4e94,\\\\.\\\\/all-nested\\\\.css\\\\?c0fa,\\\\.\\\\/mixed-deep-deep-nested\\\\.css,\\\\.\\\\/mixed-deep-nested\\\\.css,\\\\.\\\\/mixed-nested\\\\.css,\\\\.\\\\/anonymous-deep-deep-nested\\\\.css\\\\?1f16,\\\\.\\\\/anonymous-deep-nested\\\\.css\\\\?c0a8,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?4bce,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?a03f,\\\\.\\\\/anonymous-nested\\\\.css\\\\?390d,\\\\.\\\\/media-deep-deep-nested\\\\.css\\\\?7047,\\\\.\\\\/style8\\\\.css\\\\?8af1,\\\\.\\\\/duplicate-nested\\\\.css,\\\\.\\\\/anonymous-deep-deep-nested\\\\.css\\\\?9cec,\\\\.\\\\/anonymous-deep-nested\\\\.css\\\\?dea4,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?4897,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?4579,\\\\.\\\\/anonymous-nested\\\\.css\\\\?df05,\\\\.\\\\/all-deep-deep-nested\\\\.css\\\\?55ab,\\\\.\\\\/all-deep-nested\\\\.css\\\\?1513,\\\\.\\\\/all-nested\\\\.css\\\\?ccc9,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=6,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=7,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=8,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown2,\\\\.\\\\/style2\\\\.css\\\\?unknown3,\\\\.\\\\/style2\\\\.css\\\\?after-namespace,\\\\.\\\\/style2\\\\.css\\\\?multiple\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?multiple\\\\=3,\\\\.\\\\/style2\\\\.css\\\\?strange\\\\=3,\\\\.\\\\/style\\\\.css;}", ] `; From 1d69cffbbe18b9911e3f39d17cded1572b2234fc Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Mon, 19 Jun 2023 08:59:24 +0530 Subject: [PATCH 03/11] refactor: rewrite defaults --- lib/config/defaults.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/lib/config/defaults.js b/lib/config/defaults.js index 75883090d25..c730dbd3042 100644 --- a/lib/config/defaults.js +++ b/lib/config/defaults.js @@ -15,7 +15,9 @@ const { JAVASCRIPT_MODULE_TYPE_DYNAMIC, WEBASSEMBLY_MODULE_TYPE_SYNC, ASSET_MODULE_TYPE, - CSS_MODULE_TYPE_AUTO + CSS_MODULE_TYPE_AUTO, + CSS_MODULE_TYPE, + CSS_MODULE_TYPE_MODULE } = require("../ModuleTypeConstants"); const Template = require("../Template"); const { cleverMerge } = require("../util/cleverMerge"); @@ -709,6 +711,13 @@ const applyModuleDefaults = ( } if (css) { const cssRule = { + type: CSS_MODULE_TYPE, + resolve: { + fullySpecified: true, + preferRelative: true + } + }; + const cssRuleAuto = { type: CSS_MODULE_TYPE_AUTO, resolve: { fullySpecified: true, @@ -716,22 +725,14 @@ const applyModuleDefaults = ( } }; const cssModulesRule = { - type: CSS_MODULE_TYPE_AUTO, + type: CSS_MODULE_TYPE_MODULE, resolve: { fullySpecified: true } }; rules.push({ test: /\.css$/i, - oneOf: [ - { - test: /\.module\.css$/i, - ...cssModulesRule - }, - { - ...cssRule - } - ] + ...cssRuleAuto }); rules.push({ mimetype: "text/css+module", From 510849cf368dfe9d106c866475f536e9a7740439 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Mon, 19 Jun 2023 09:03:13 +0530 Subject: [PATCH 04/11] test: update snapshots --- test/Defaults.unittest.js | 37 ++++++++++++++----------------------- 1 file changed, 14 insertions(+), 23 deletions(-) diff --git a/test/Defaults.unittest.js b/test/Defaults.unittest.js index 3d97e8c4a8c..b24979c13b8 100644 --- a/test/Defaults.unittest.js +++ b/test/Defaults.unittest.js @@ -2208,6 +2208,8 @@ describe("snapshots", () => { + }, + "futureDefaults": true, @@ ... @@ + + }, + + Object { + "rules": Array [ + Object { + "descriptionData": Object { @@ -2236,40 +2238,28 @@ describe("snapshots", () => { + "type": "webassembly/async", + }, + Object { - + "oneOf": Array [ - + Object { - + "resolve": Object { - + "fullySpecified": true, - + }, - + "test": /\\.module\\.css$/i, - + "type": "css/auto", - + }, - + Object { - + "resolve": Object { - + "fullySpecified": true, - + "preferRelative": true, - + }, - + "type": "css/auto", - + }, - + ], + + "resolve": Object { + + "fullySpecified": true, + + "preferRelative": true, + + }, + "test": /\\.css$/i, + + "type": "css/auto", + }, + Object { + "mimetype": "text/css+module", + "resolve": Object { + "fullySpecified": true, + }, - + "type": "css/auto", + + "type": "css/module", + }, + Object { + "mimetype": "text/css", + "resolve": Object { + "fullySpecified": true, + "preferRelative": true, - + }, - + "type": "css/auto", + @@ ... @@ + + "type": "css", + }, - + Object { @@ ... @@ + "exportsPresence": "error", @@ ... @@ @@ -2287,6 +2277,9 @@ describe("snapshots", () => { + "hashDigestLength": 16, + "hashFunction": "xxhash64", @@ ... @@ + + "...", + + ], + + }, + "css-import": Object { + "conditionNames": Array [ + "webpack", @@ -2298,10 +2291,8 @@ describe("snapshots", () => { + ], + "mainFields": Array [ + "style", - + "...", - + ], + @@ ... @@ + "mainFiles": Array [], - + }, @@ ... @@ - "/node_modules/", + /^(.+?[\\\\/]node_modules[\\\\/])/, From bb04b0f562b2d0bcbaf7322aba52f2490c5dc56d Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Mon, 19 Jun 2023 09:16:06 +0530 Subject: [PATCH 05/11] test: update tests --- .../css/conflicting-order/webpack.config.js | 2 +- .../css/css-modules-broken-keyframes/index.js | 2 +- .../css/css-modules-in-node/index.js | 86 +++++++++---------- test/configCases/css/css-modules/index.js | 76 ++++++++-------- test/configCases/css/large/index.js | 2 +- 5 files changed, 84 insertions(+), 84 deletions(-) diff --git a/test/configCases/css/conflicting-order/webpack.config.js b/test/configCases/css/conflicting-order/webpack.config.js index 010963e47ec..a5f3136eaa4 100644 --- a/test/configCases/css/conflicting-order/webpack.config.js +++ b/test/configCases/css/conflicting-order/webpack.config.js @@ -9,7 +9,7 @@ module.exports = { splitChunks: { cacheGroups: { css: { - type: "css", + type: "css/auto", enforce: true, name: "css" } diff --git a/test/configCases/css/css-modules-broken-keyframes/index.js b/test/configCases/css/css-modules-broken-keyframes/index.js index c75a12a839d..a94e3dcf226 100644 --- a/test/configCases/css/css-modules-broken-keyframes/index.js +++ b/test/configCases/css/css-modules-broken-keyframes/index.js @@ -7,7 +7,7 @@ it("should allow to create css modules", done => { import("./use-style.js").then(({ default: x }) => { try { expect(x).toEqual({ - class: prod ? "my-app-491-S" : "./style.module.css-class", + class: prod ? "my-app-274-S" : "./style.module.css-class", }); } catch (e) { return done(e); diff --git a/test/configCases/css/css-modules-in-node/index.js b/test/configCases/css/css-modules-in-node/index.js index 534e395927e..21cc4a7c80a 100644 --- a/test/configCases/css/css-modules-in-node/index.js +++ b/test/configCases/css/css-modules-in-node/index.js @@ -5,95 +5,95 @@ it("should allow to create css modules", done => { try { expect(x).toEqual({ global: undefined, - class: prod ? "my-app-491-S" : "./style.module.css-class", - currentWmultiParams: prod ? "my-app-491-yK" : "./style.module.css-local12", - futureWmultiParams: prod ? "my-app-491-Y4" : "./style.module.css-local14", - hasWmultiParams: prod ? "my-app-491-PK" : "./style.module.css-local11", - matchesWmultiParams: prod ? "my-app-491-$Y" : "./style.module.css-local9", - mozAnyWmultiParams: prod ? "my-app-491-TT" : "./style.module.css-local15", - pastWmultiParams: prod ? "my-app-491-P_" : "./style.module.css-local13", - webkitAnyWmultiParams: prod ? "my-app-491-rT" : "./style.module.css-local16", - whereWmultiParams: prod ? "my-app-491-ie" : "./style.module.css-local10", + class: prod ? "my-app-274-S" : "./style.module.css-class", + currentWmultiParams: prod ? "my-app-274-yK" : "./style.module.css-local12", + futureWmultiParams: prod ? "my-app-274-Y4" : "./style.module.css-local14", + hasWmultiParams: prod ? "my-app-274-PK" : "./style.module.css-local11", + matchesWmultiParams: prod ? "my-app-274-$Y" : "./style.module.css-local9", + mozAnyWmultiParams: prod ? "my-app-274-TT" : "./style.module.css-local15", + pastWmultiParams: prod ? "my-app-274-P_" : "./style.module.css-local13", + webkitAnyWmultiParams: prod ? "my-app-274-rT" : "./style.module.css-local16", + whereWmultiParams: prod ? "my-app-274-ie" : "./style.module.css-local10", local: prod - ? "my-app-491-Zw my-app-491-yl my-app-491-J_ my-app-491-gc" + ? "my-app-274-Zw my-app-274-yl my-app-274-J_ my-app-274-gc" : "./style.module.css-local1 ./style.module.css-local2 ./style.module.css-local3 ./style.module.css-local4", local2: prod - ? "my-app-491-Xg my-app-491-AY" + ? "my-app-274-Xg my-app-274-AY" : "./style.module.css-local5 ./style.module.css-local6", nested: prod - ? "my-app-491-RX undefined my-app-491-X2" + ? "my-app-274-RX undefined my-app-274-X2" : "./style.module.css-nested1 undefined ./style.module.css-nested3", notWmultiParams: prod - ? "my-app-491-Kw" + ? "my-app-274-Kw" : "./style.module.css-local7", isWmultiParams: prod - ? "my-app-491-rw" + ? "my-app-274-rw" : "./style.module.css-local8", - ident: prod ? "my-app-491-yR" : "./style.module.css-ident", - keyframes: prod ? "my-app-491-y3" : "./style.module.css-localkeyframes", - animation: prod ? "my-app-491-oQ" : "./style.module.css-animation", + ident: prod ? "my-app-274-yR" : "./style.module.css-ident", + keyframes: prod ? "my-app-274-y3" : "./style.module.css-localkeyframes", + animation: prod ? "my-app-274-oQ" : "./style.module.css-animation", vars: prod - ? "--my-app-491-y4 my-app-491-gR undefined my-app-491-xk" + ? "--my-app-274-y4 my-app-274-gR undefined my-app-274-xk" : "--./style.module.css-local-color ./style.module.css-vars undefined ./style.module.css-globalVars", media: prod - ? "my-app-491-w7" + ? "my-app-274-w7" : "./style.module.css-wideScreenClass", mediaWithOperator: prod - ? "my-app-491-J" + ? "my-app-274-J" : "./style.module.css-narrowScreenClass", supports: prod - ? "my-app-491-T$" + ? "my-app-274-T$" : "./style.module.css-displayGridInSupports", supportsWithOperator: prod - ? "my-app-491-zz" + ? "my-app-274-zz" : "./style.module.css-floatRightInNegativeSupports", mediaInSupports: prod - ? "my-app-491-Kr" + ? "my-app-274-Kr" : "./style.module.css-displayFlexInMediaInSupports", supportsInMedia: prod - ? "my-app-491-SQ" + ? "my-app-274-SQ" : "./style.module.css-displayFlexInSupportsInMedia", displayFlexInSupportsInMediaUpperCase: prod - ? "my-app-491-XM" + ? "my-app-274-XM" : "./style.module.css-displayFlexInSupportsInMediaUpperCase", keyframesUPPERCASE: prod - ? "my-app-491-T4" + ? "my-app-274-T4" : "./style.module.css-localkeyframesUPPERCASE", localkeyframes2UPPPERCASE: prod - ? "my-app-491-Xi" + ? "my-app-274-Xi" : "./style.module.css-localkeyframes2UPPPERCASE", VARS: prod - ? "--my-app-491-DJ my-app-491-ms undefined my-app-491-cU" + ? "--my-app-274-DJ my-app-274-ms undefined my-app-274-cU" : "--./style.module.css-LOCAL-COLOR ./style.module.css-VARS undefined ./style.module.css-globalVarsUpperCase", inSupportScope: prod - ? "my-app-491-FO" + ? "my-app-274-FO" : "./style.module.css-inSupportScope", animationName: prod - ? "my-app-491-w3" + ? "my-app-274-w3" : "./style.module.css-animationName", mozAnimationName: prod - ? "my-app-491-t6" + ? "my-app-274-t6" : "./style.module.css-mozAnimationName", myColor: prod - ? "--my-app-491-lC" + ? "--my-app-274-lC" : "--./style.module.css-my-color", paddingLg: prod - ? "my-app-491-FP" + ? "my-app-274-FP" : "./style.module.css-padding-lg", paddingSm: prod - ? "my-app-491-zE" + ? "my-app-274-zE" : "./style.module.css-padding-sm", classLocalScope: prod - ? "my-app-491-gz" + ? "my-app-274-gz" : "./style.module.css-class-local-scope", inLocalGlobalScope: prod - ? "my-app-491-Zv" + ? "my-app-274-Zv" : "./style.module.css-in-local-global-scope", classInContainer: prod - ? "my-app-491-Gp" + ? "my-app-274-Gp" : "./style.module.css-class-in-container", deepClassInContainer: prod - ? "my-app-491-rn" + ? "my-app-274-rn" : "./style.module.css-deep-class-in-container", }); } catch (e) { @@ -106,17 +106,17 @@ it("should allow to create css modules", done => { import * as style from "../css-modules/style.module.css"; it("should allow to import css modules", () => { - expect(style.class).toBe(prod ? "my-app-491-S" : "./style.module.css-class"); + expect(style.class).toBe(prod ? "my-app-274-S" : "./style.module.css-class"); expect(style.local1).toBe( - prod ? "my-app-491-Zw" : "./style.module.css-local1" + prod ? "my-app-274-Zw" : "./style.module.css-local1" ); expect(style.local2).toBe( - prod ? "my-app-491-yl" : "./style.module.css-local2" + prod ? "my-app-274-yl" : "./style.module.css-local2" ); expect(style.local3).toBe( - prod ? "my-app-491-J_" : "./style.module.css-local3" + prod ? "my-app-274-J_" : "./style.module.css-local3" ); expect(style.local4).toBe( - prod ? "my-app-491-gc" : "./style.module.css-local4" + prod ? "my-app-274-gc" : "./style.module.css-local4" ); }); diff --git a/test/configCases/css/css-modules/index.js b/test/configCases/css/css-modules/index.js index d78771321c0..f74eda364b2 100644 --- a/test/configCases/css/css-modules/index.js +++ b/test/configCases/css/css-modules/index.js @@ -8,107 +8,107 @@ it("should allow to create css modules", done => { try { expect(x).toEqual({ global: undefined, - class: prod ? "my-app-491-S" : "./style.module.css-class", + class: prod ? "my-app-274-S" : "./style.module.css-class", currentWmultiParams: prod - ? "my-app-491-yK" + ? "my-app-274-yK" : "./style.module.css-local12", futureWmultiParams: prod - ? "my-app-491-Y4" + ? "my-app-274-Y4" : "./style.module.css-local14", - hasWmultiParams: prod ? "my-app-491-PK" : "./style.module.css-local11", + hasWmultiParams: prod ? "my-app-274-PK" : "./style.module.css-local11", matchesWmultiParams: prod - ? "my-app-491-$Y" + ? "my-app-274-$Y" : "./style.module.css-local9", mozAnyWmultiParams: prod - ? "my-app-491-TT" + ? "my-app-274-TT" : "./style.module.css-local15", - pastWmultiParams: prod ? "my-app-491-P_" : "./style.module.css-local13", + pastWmultiParams: prod ? "my-app-274-P_" : "./style.module.css-local13", webkitAnyWmultiParams: prod - ? "my-app-491-rT" + ? "my-app-274-rT" : "./style.module.css-local16", whereWmultiParams: prod - ? "my-app-491-ie" + ? "my-app-274-ie" : "./style.module.css-local10", local: prod - ? "my-app-491-Zw my-app-491-yl my-app-491-J_ my-app-491-gc" + ? "my-app-274-Zw my-app-274-yl my-app-274-J_ my-app-274-gc" : "./style.module.css-local1 ./style.module.css-local2 ./style.module.css-local3 ./style.module.css-local4", local2: prod - ? "my-app-491-Xg my-app-491-AY" + ? "my-app-274-Xg my-app-274-AY" : "./style.module.css-local5 ./style.module.css-local6", nested: prod - ? "my-app-491-RX undefined my-app-491-X2" + ? "my-app-274-RX undefined my-app-274-X2" : "./style.module.css-nested1 undefined ./style.module.css-nested3", notWmultiParams: prod - ? "my-app-491-Kw" + ? "my-app-274-Kw" : "./style.module.css-local7", isWmultiParams: prod - ? "my-app-491-rw" + ? "my-app-274-rw" : "./style.module.css-local8", - ident: prod ? "my-app-491-yR" : "./style.module.css-ident", - keyframes: prod ? "my-app-491-y3" : "./style.module.css-localkeyframes", - animation: prod ? "my-app-491-oQ" : "./style.module.css-animation", + ident: prod ? "my-app-274-yR" : "./style.module.css-ident", + keyframes: prod ? "my-app-274-y3" : "./style.module.css-localkeyframes", + animation: prod ? "my-app-274-oQ" : "./style.module.css-animation", vars: prod - ? "--my-app-491-y4 my-app-491-gR undefined my-app-491-xk" + ? "--my-app-274-y4 my-app-274-gR undefined my-app-274-xk" : "--./style.module.css-local-color ./style.module.css-vars undefined ./style.module.css-globalVars", media: prod - ? "my-app-491-w7" + ? "my-app-274-w7" : "./style.module.css-wideScreenClass", mediaWithOperator: prod - ? "my-app-491-J" + ? "my-app-274-J" : "./style.module.css-narrowScreenClass", supports: prod - ? "my-app-491-T$" + ? "my-app-274-T$" : "./style.module.css-displayGridInSupports", supportsWithOperator: prod - ? "my-app-491-zz" + ? "my-app-274-zz" : "./style.module.css-floatRightInNegativeSupports", mediaInSupports: prod - ? "my-app-491-Kr" + ? "my-app-274-Kr" : "./style.module.css-displayFlexInMediaInSupports", supportsInMedia: prod - ? "my-app-491-SQ" + ? "my-app-274-SQ" : "./style.module.css-displayFlexInSupportsInMedia", displayFlexInSupportsInMediaUpperCase: prod - ? "my-app-491-XM" + ? "my-app-274-XM" : "./style.module.css-displayFlexInSupportsInMediaUpperCase", keyframesUPPERCASE: prod - ? "my-app-491-T4" + ? "my-app-274-T4" : "./style.module.css-localkeyframesUPPERCASE", localkeyframes2UPPPERCASE: prod - ? "my-app-491-Xi" + ? "my-app-274-Xi" : "./style.module.css-localkeyframes2UPPPERCASE", VARS: prod - ? "--my-app-491-DJ my-app-491-ms undefined my-app-491-cU" + ? "--my-app-274-DJ my-app-274-ms undefined my-app-274-cU" : "--./style.module.css-LOCAL-COLOR ./style.module.css-VARS undefined ./style.module.css-globalVarsUpperCase", inSupportScope: prod - ? "my-app-491-FO" + ? "my-app-274-FO" : "./style.module.css-inSupportScope", animationName: prod - ? "my-app-491-w3" + ? "my-app-274-w3" : "./style.module.css-animationName", mozAnimationName: prod - ? "my-app-491-t6" + ? "my-app-274-t6" : "./style.module.css-mozAnimationName", myColor: prod - ? "--my-app-491-lC" + ? "--my-app-274-lC" : "--./style.module.css-my-color", paddingLg: prod - ? "my-app-491-FP" + ? "my-app-274-FP" : "./style.module.css-padding-lg", paddingSm: prod - ? "my-app-491-zE" + ? "my-app-274-zE" : "./style.module.css-padding-sm", classLocalScope: prod - ? "my-app-491-gz" + ? "my-app-274-gz" : "./style.module.css-class-local-scope", inLocalGlobalScope: prod - ? "my-app-491-Zv" + ? "my-app-274-Zv" : "./style.module.css-in-local-global-scope", classInContainer: prod - ? "my-app-491-Gp" + ? "my-app-274-Gp" : "./style.module.css-class-in-container", deepClassInContainer: prod - ? "my-app-491-rn" + ? "my-app-274-rn" : "./style.module.css-deep-class-in-container", }); } catch (e) { diff --git a/test/configCases/css/large/index.js b/test/configCases/css/large/index.js index fcca1174376..4af1d3654d6 100644 --- a/test/configCases/css/large/index.js +++ b/test/configCases/css/large/index.js @@ -8,7 +8,7 @@ it("should allow to create css modules", done => { try { expect(x).toEqual({ placeholder: prod - ? "26-uhHx" + ? "252-uhHx" : "my-app-./tailwind.module.css-placeholder-gray-700" }); } catch (e) { From aaadc24daf1d1ef3217b90bdfc65c56c96c2655c Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Mon, 19 Jun 2023 09:22:20 +0530 Subject: [PATCH 06/11] test: update snapshots --- test/__snapshots__/ConfigCacheTestCases.longtest.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap b/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap index fd825140d75..03e9ebb428e 100644 --- a/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap +++ b/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap @@ -1244,7 +1244,7 @@ body { background: red; } -head{--webpack-main:https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external\\\\.css,\\\\/\\\\/example\\\\.com\\\\/style\\\\.css,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Roboto,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Noto\\\\+Sans\\\\+TC,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Noto\\\\+Sans\\\\+TC\\\\|Roboto,https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external1\\\\.css,https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external2\\\\.css,\\\\.\\\\/node_modules\\\\/style-library\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/main-field\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/package-with-exports\\\\/style\\\\.css,\\\\.\\\\/extensions-imported\\\\.mycss,\\\\.\\\\/file\\\\.less,\\\\.\\\\/with-less-import\\\\.css,\\\\.\\\\/prefer-relative\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style\\\\/default\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-mode\\\\/mode\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-subpath\\\\/dist\\\\/custom\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-subpath-extra\\\\/dist\\\\/custom\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-less\\\\/default\\\\.less,\\\\.\\\\/node_modules\\\\/condition-names-custom-name\\\\/custom-name\\\\.css,\\\\.\\\\/node_modules\\\\/style-and-main-library\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-webpack\\\\/webpack\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-nested\\\\/default\\\\.css,\\\\.\\\\/style-import\\\\.css,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=10,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=12,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=13,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=14,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=15,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=16,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=17,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=18,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=19,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=20,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=21,\\\\.\\\\/imported\\\\.css\\\\?2fc7,\\\\.\\\\/imported\\\\.css\\\\?8e23,\\\\.\\\\/imported\\\\.css\\\\?daf4,\\\\.\\\\/imported\\\\.css\\\\?7a8d,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/style2\\\\.css\\\\?3989,\\\\.\\\\/style2\\\\.css\\\\?1933,\\\\.\\\\/style2\\\\.css\\\\?6611,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1\\\\#hash\\\\?0d7a,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1\\\\#hash\\\\?2c9a,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=1,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=2,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=3,\\\\.\\\\/style3\\\\.css\\\\?\\\\=bar4,\\\\.\\\\/styl\\\\'le7\\\\.css,\\\\.\\\\/styl\\\\'le7\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\ test\\\\.css,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/test\\\\.css,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/test\\\\ test\\\\.css\\\\?fpp\\\\=10,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=bazz,\\\\.\\\\/string-loader\\\\.js\\\\?esModule\\\\=false\\\\!\\\\.\\\\/test\\\\.css\\\\?023f,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=bar,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=bar\\\\#hash,\\\\.\\\\/style4\\\\.css\\\\?\\\\#hash,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/string-loader\\\\.js\\\\?esModule\\\\=false\\\\!\\\\.\\\\/test\\\\.css\\\\?4a4a,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\,a\\\\%20\\\\%7B\\\\%0D\\\\%0A\\\\%20\\\\%20color\\\\%3A\\\\%20red\\\\%3B\\\\%0D\\\\%0A\\\\%7D,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\,a\\\\%20\\\\%7B\\\\%0D\\\\%0A\\\\%20\\\\%20color\\\\%3A\\\\%20blue\\\\%3B\\\\%0D\\\\%0A\\\\%7D,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\;base64\\\\,YSB7DQogIGNvbG9yOiByZWQ7DQp9,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=3\\\\?14ba,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=3\\\\?0e0d,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style6\\\\.css,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=10,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=12,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=13,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=14,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=15,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=16,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=17,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=18,\\\\.\\\\/style8\\\\.css\\\\?5018,\\\\.\\\\/style8\\\\.css\\\\?204b,\\\\.\\\\/style8\\\\.css\\\\?63b0,\\\\.\\\\/style8\\\\.css\\\\?edb8,\\\\.\\\\/style8\\\\.css\\\\?6154,\\\\.\\\\/style8\\\\.css\\\\?8c51,\\\\.\\\\/style8\\\\.css\\\\?ced0,\\\\.\\\\/style8\\\\.css\\\\?d3b8,\\\\.\\\\/style8\\\\.css\\\\?3557,\\\\.\\\\/style8\\\\.css\\\\?ae6e,\\\\.\\\\/style8\\\\.css\\\\?d078,\\\\.\\\\/style8\\\\.css\\\\?ae8b,\\\\.\\\\/style2\\\\.css\\\\?ee8c,\\\\.\\\\/style9\\\\.css\\\\?5f26,\\\\.\\\\/style9\\\\.css\\\\?6536,\\\\.\\\\/style11\\\\.css,\\\\.\\\\/style12\\\\.css,\\\\.\\\\/style10\\\\.css,\\\\.\\\\/media-deep-deep-nested\\\\.css\\\\?1b5b,\\\\.\\\\/media-deep-nested\\\\.css,\\\\.\\\\/media-nested\\\\.css,\\\\.\\\\/supports-deep-deep-nested\\\\.css,\\\\.\\\\/supports-deep-nested\\\\.css,\\\\.\\\\/supports-nested\\\\.css,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?2bf1,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?3469,\\\\.\\\\/layer-nested\\\\.css,\\\\.\\\\/all-deep-deep-nested\\\\.css\\\\?a7dd,\\\\.\\\\/all-deep-nested\\\\.css\\\\?5612,\\\\.\\\\/all-nested\\\\.css\\\\?a3fd,\\\\.\\\\/mixed-deep-deep-nested\\\\.css,\\\\.\\\\/mixed-deep-nested\\\\.css,\\\\.\\\\/mixed-nested\\\\.css,\\\\.\\\\/anonymous-deep-deep-nested\\\\.css\\\\?8f95,\\\\.\\\\/anonymous-deep-nested\\\\.css\\\\?40b5,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?e681,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?dc2a,\\\\.\\\\/anonymous-nested\\\\.css\\\\?8aa8,\\\\.\\\\/media-deep-deep-nested\\\\.css\\\\?3aba,\\\\.\\\\/style8\\\\.css\\\\?83bd,\\\\.\\\\/duplicate-nested\\\\.css,\\\\.\\\\/anonymous-deep-deep-nested\\\\.css\\\\?384f,\\\\.\\\\/anonymous-deep-nested\\\\.css\\\\?8c49,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?17f5,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?c345,\\\\.\\\\/anonymous-nested\\\\.css\\\\?d028,\\\\.\\\\/all-deep-deep-nested\\\\.css\\\\?220a,\\\\.\\\\/all-deep-nested\\\\.css\\\\?7c65,\\\\.\\\\/all-nested\\\\.css\\\\?5ae5,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=6,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=7,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=8,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown2,\\\\.\\\\/style2\\\\.css\\\\?unknown3,\\\\.\\\\/style2\\\\.css\\\\?after-namespace,\\\\.\\\\/style2\\\\.css\\\\?multiple\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?multiple\\\\=3,\\\\.\\\\/style2\\\\.css\\\\?strange\\\\=3,\\\\.\\\\/style\\\\.css;}", +head{--webpack-main:https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external\\\\.css,\\\\/\\\\/example\\\\.com\\\\/style\\\\.css,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Roboto,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Noto\\\\+Sans\\\\+TC,https\\\\:\\\\/\\\\/fonts\\\\.googleapis\\\\.com\\\\/css\\\\?family\\\\=Noto\\\\+Sans\\\\+TC\\\\|Roboto,https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external1\\\\.css,https\\\\:\\\\/\\\\/test\\\\.cases\\\\/path\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/\\\\.\\\\.\\\\/configCases\\\\/css\\\\/css-import\\\\/external2\\\\.css,\\\\.\\\\/node_modules\\\\/style-library\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/main-field\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/package-with-exports\\\\/style\\\\.css,\\\\.\\\\/extensions-imported\\\\.mycss,\\\\.\\\\/file\\\\.less,\\\\.\\\\/with-less-import\\\\.css,\\\\.\\\\/prefer-relative\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style\\\\/default\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-mode\\\\/mode\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-subpath\\\\/dist\\\\/custom\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-subpath-extra\\\\/dist\\\\/custom\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-less\\\\/default\\\\.less,\\\\.\\\\/node_modules\\\\/condition-names-custom-name\\\\/custom-name\\\\.css,\\\\.\\\\/node_modules\\\\/style-and-main-library\\\\/styles\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-webpack\\\\/webpack\\\\.css,\\\\.\\\\/node_modules\\\\/condition-names-style-nested\\\\/default\\\\.css,\\\\.\\\\/style-import\\\\.css,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=10,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=12,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=13,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=14,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=15,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=16,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=17,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=18,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=19,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=20,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=21,\\\\.\\\\/imported\\\\.css\\\\?1832,\\\\.\\\\/imported\\\\.css\\\\?e0bb,\\\\.\\\\/imported\\\\.css\\\\?769a,\\\\.\\\\/imported\\\\.css\\\\?d4d6,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/style2\\\\.css\\\\?cf0d,\\\\.\\\\/style2\\\\.css\\\\?dfe6,\\\\.\\\\/style2\\\\.css\\\\?7d49,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1\\\\#hash\\\\?63d2,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1\\\\&bar\\\\=1\\\\#hash\\\\?e75b,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=1,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=2,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=3,\\\\.\\\\/style3\\\\.css\\\\?\\\\=bar4,\\\\.\\\\/styl\\\\'le7\\\\.css,\\\\.\\\\/styl\\\\'le7\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\ test\\\\.css,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/test\\\\.css,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/test\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/test\\\\ test\\\\.css\\\\?fpp\\\\=10,\\\\.\\\\/test\\\\ test\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=bazz,\\\\.\\\\/string-loader\\\\.js\\\\?esModule\\\\=false\\\\!\\\\.\\\\/test\\\\.css\\\\?10e0,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=bar,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=bar\\\\#hash,\\\\.\\\\/style4\\\\.css\\\\?\\\\#hash,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/string-loader\\\\.js\\\\?esModule\\\\=false\\\\!\\\\.\\\\/test\\\\.css\\\\?6393,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\,a\\\\%20\\\\%7B\\\\%0D\\\\%0A\\\\%20\\\\%20color\\\\%3A\\\\%20red\\\\%3B\\\\%0D\\\\%0A\\\\%7D,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\,a\\\\%20\\\\%7B\\\\%0D\\\\%0A\\\\%20\\\\%20color\\\\%3A\\\\%20blue\\\\%3B\\\\%0D\\\\%0A\\\\%7D,data\\\\:text\\\\/css\\\\;charset\\\\=utf-8\\\\;base64\\\\,YSB7DQogIGNvbG9yOiByZWQ7DQp9,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style5\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=3\\\\?1ab5,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=3\\\\?19e1,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/layer\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style6\\\\.css,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=10,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=12,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=13,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=14,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=15,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=16,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=17,\\\\.\\\\/style6\\\\.css\\\\?foo\\\\=18,\\\\.\\\\/style8\\\\.css\\\\?b84b,\\\\.\\\\/style8\\\\.css\\\\?5dc5,\\\\.\\\\/style8\\\\.css\\\\?71be,\\\\.\\\\/style8\\\\.css\\\\?386a,\\\\.\\\\/style8\\\\.css\\\\?568a,\\\\.\\\\/style8\\\\.css\\\\?b9af,\\\\.\\\\/style8\\\\.css\\\\?7300,\\\\.\\\\/style8\\\\.css\\\\?6efd,\\\\.\\\\/style8\\\\.css\\\\?288c,\\\\.\\\\/style8\\\\.css\\\\?1094,\\\\.\\\\/style8\\\\.css\\\\?38bf,\\\\.\\\\/style8\\\\.css\\\\?d697,\\\\.\\\\/style2\\\\.css\\\\?0aae,\\\\.\\\\/style9\\\\.css\\\\?8e91,\\\\.\\\\/style9\\\\.css\\\\?71b5,\\\\.\\\\/style11\\\\.css,\\\\.\\\\/style12\\\\.css,\\\\.\\\\/style10\\\\.css,\\\\.\\\\/media-deep-deep-nested\\\\.css\\\\?ef21,\\\\.\\\\/media-deep-nested\\\\.css,\\\\.\\\\/media-nested\\\\.css,\\\\.\\\\/supports-deep-deep-nested\\\\.css,\\\\.\\\\/supports-deep-nested\\\\.css,\\\\.\\\\/supports-nested\\\\.css,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?5660,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?9fd1,\\\\.\\\\/layer-nested\\\\.css,\\\\.\\\\/all-deep-deep-nested\\\\.css\\\\?af0a,\\\\.\\\\/all-deep-nested\\\\.css\\\\?4e94,\\\\.\\\\/all-nested\\\\.css\\\\?c0fa,\\\\.\\\\/mixed-deep-deep-nested\\\\.css,\\\\.\\\\/mixed-deep-nested\\\\.css,\\\\.\\\\/mixed-nested\\\\.css,\\\\.\\\\/anonymous-deep-deep-nested\\\\.css\\\\?1f16,\\\\.\\\\/anonymous-deep-nested\\\\.css\\\\?c0a8,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?4bce,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?a03f,\\\\.\\\\/anonymous-nested\\\\.css\\\\?390d,\\\\.\\\\/media-deep-deep-nested\\\\.css\\\\?7047,\\\\.\\\\/style8\\\\.css\\\\?8af1,\\\\.\\\\/duplicate-nested\\\\.css,\\\\.\\\\/anonymous-deep-deep-nested\\\\.css\\\\?9cec,\\\\.\\\\/anonymous-deep-nested\\\\.css\\\\?dea4,\\\\.\\\\/layer-deep-deep-nested\\\\.css\\\\?4897,\\\\.\\\\/layer-deep-nested\\\\.css\\\\?4579,\\\\.\\\\/anonymous-nested\\\\.css\\\\?df05,\\\\.\\\\/all-deep-deep-nested\\\\.css\\\\?55ab,\\\\.\\\\/all-deep-nested\\\\.css\\\\?1513,\\\\.\\\\/all-nested\\\\.css\\\\?ccc9,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=6,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=7,\\\\.\\\\/style2\\\\.css\\\\?warning\\\\=8,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=unknown2,\\\\.\\\\/style2\\\\.css\\\\?unknown3,\\\\.\\\\/style2\\\\.css\\\\?after-namespace,\\\\.\\\\/style2\\\\.css\\\\?multiple\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?multiple\\\\=3,\\\\.\\\\/style2\\\\.css\\\\?strange\\\\=3,\\\\.\\\\/style\\\\.css;}", ] `; From d2bc40cf733068407ee367bdd6038f96b43f14e4 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Mon, 19 Jun 2023 21:36:01 +0530 Subject: [PATCH 07/11] feat: update regex to match valid css file names --- lib/css/CssParser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index 074dd4f838c..84b52eb630f 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -39,7 +39,7 @@ const IMAGE_SET_FUNCTION = /^(-\w+-)?image-set$/i; const OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE = /^@(-\w+-)?keyframes$/; const OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY = /^(-\w+-)?animation(-name)?$/i; -const IS_MODULES = /\.module(s)?\.[\w-]+$/i; +const IS_MODULES = /\.module(s)?\.[^.]+$/i; /** * @param {string} str url string From 53df4b0222f8885bf5f6cd34ea32e1e52fe603bf Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Mon, 19 Jun 2023 22:07:37 +0530 Subject: [PATCH 08/11] test: add tests for module extensions --- test/configCases/css/css-modules/index.js | 6 +++++ .../css/css-modules/style.module.css.invalid | 3 +++ .../css/css-modules/style.module.my-css | 3 +++ test/configCases/css/css-modules/use-style.js | 4 ++++ .../css/css-modules/webpack.config.js | 24 +++++++++++++++++++ 5 files changed, 40 insertions(+) create mode 100644 test/configCases/css/css-modules/style.module.css.invalid create mode 100644 test/configCases/css/css-modules/style.module.my-css diff --git a/test/configCases/css/css-modules/index.js b/test/configCases/css/css-modules/index.js index f74eda364b2..48b9b88ac4c 100644 --- a/test/configCases/css/css-modules/index.js +++ b/test/configCases/css/css-modules/index.js @@ -110,6 +110,12 @@ it("should allow to create css modules", done => { deepClassInContainer: prod ? "my-app-274-rn" : "./style.module.css-deep-class-in-container", + cssModuleWithCustomFileExtension: prod + ? "my-app-444-s" + : "./style.module.my-css-myCssClass", + notAValidCssModuleExtension: prod + ? "my-app-438-W" + : "./style.module.css.invalid-notACssModule" }); } catch (e) { return done(e); diff --git a/test/configCases/css/css-modules/style.module.css.invalid b/test/configCases/css/css-modules/style.module.css.invalid new file mode 100644 index 00000000000..58b844a1e19 --- /dev/null +++ b/test/configCases/css/css-modules/style.module.css.invalid @@ -0,0 +1,3 @@ +.notACssModule { + color: teal; +} \ No newline at end of file diff --git a/test/configCases/css/css-modules/style.module.my-css b/test/configCases/css/css-modules/style.module.my-css new file mode 100644 index 00000000000..4f4f0b7f873 --- /dev/null +++ b/test/configCases/css/css-modules/style.module.my-css @@ -0,0 +1,3 @@ +.myCssClass { + color: red; +} diff --git a/test/configCases/css/css-modules/use-style.js b/test/configCases/css/css-modules/use-style.js index 838b4990b2b..ca759ecd0dc 100644 --- a/test/configCases/css/css-modules/use-style.js +++ b/test/configCases/css/css-modules/use-style.js @@ -1,5 +1,7 @@ import * as style from "./style.module.css"; import { local1, local2, local3, local4, ident } from "./style.module.css"; +import { myCssClass } from "./style.module.my-css"; +import { notACssModule } from "./style.module.css.invalid" export default { global: style.global, @@ -41,4 +43,6 @@ export default { classLocalScope: style['class-local-scope'], classInContainer: style['class-in-container'], deepClassInContainer: style['deep-class-in-container'], + cssModuleWithCustomFileExtension: myCssClass, + notAValidCssModuleExtension: notACssModule }; diff --git a/test/configCases/css/css-modules/webpack.config.js b/test/configCases/css/css-modules/webpack.config.js index e3493b98ce0..778801a54a5 100644 --- a/test/configCases/css/css-modules/webpack.config.js +++ b/test/configCases/css/css-modules/webpack.config.js @@ -8,6 +8,18 @@ module.exports = (env, { testPath }) => [ mode: "development", experiments: { css: true + }, + module: { + rules: [ + { + test: /\.my-css$/i, + type: "css/auto" + }, + { + test: /\.invalid$/i, + type: "css/auto" + } + ] } }, { @@ -19,6 +31,18 @@ module.exports = (env, { testPath }) => [ experiments: { css: true }, + module: { + rules: [ + { + test: /\.my-css$/i, + type: "css/auto" + }, + { + test: /\.invalid$/i, + type: "css/auto" + } + ] + }, plugins: [ new webpack.ids.DeterministicModuleIdsPlugin({ maxLength: 3, From 5d54a5e5bbed5ec8b20cac3b5ee20cdbfa8606e6 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Tue, 20 Jun 2023 09:22:46 +0530 Subject: [PATCH 09/11] test: fix tests --- .../css/css-modules-in-node/index.js | 6 +++ .../css/css-modules-in-node/webpack.config.js | 40 ++++++++++++++++++- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/test/configCases/css/css-modules-in-node/index.js b/test/configCases/css/css-modules-in-node/index.js index 21cc4a7c80a..ffaca48128e 100644 --- a/test/configCases/css/css-modules-in-node/index.js +++ b/test/configCases/css/css-modules-in-node/index.js @@ -95,6 +95,12 @@ it("should allow to create css modules", done => { deepClassInContainer: prod ? "my-app-274-rn" : "./style.module.css-deep-class-in-container", + cssModuleWithCustomFileExtension: prod + ? "my-app-444-s" + : "./style.module.my-css-myCssClass", + notAValidCssModuleExtension: prod + ? "my-app-438-W" + : "./style.module.css.invalid-notACssModule" }); } catch (e) { return done(e); diff --git a/test/configCases/css/css-modules-in-node/webpack.config.js b/test/configCases/css/css-modules-in-node/webpack.config.js index a1efc6dc0aa..6de693f81b0 100644 --- a/test/configCases/css/css-modules-in-node/webpack.config.js +++ b/test/configCases/css/css-modules-in-node/webpack.config.js @@ -10,6 +10,18 @@ module.exports = (env, { testPath }) => [ mode: "development", experiments: { css: true + }, + module: { + rules: [ + { + test: /\.my-css$/i, + type: "css/auto" + }, + { + test: /\.invalid$/i, + type: "css/auto" + } + ] } }, { @@ -30,7 +42,19 @@ module.exports = (env, { testPath }) => [ fixedLength: true, test: m => m.type.startsWith("css") }) - ] + ], + module: { + rules: [ + { + test: /\.my-css$/i, + type: "css/auto" + }, + { + test: /\.invalid$/i, + type: "css/auto" + } + ] + } }, { context: path.join(__dirname, "../css-modules"), @@ -49,6 +73,18 @@ module.exports = (env, { testPath }) => [ path: path.resolve(testPath, "../css-modules/module-ids.json"), mode: "read" }) - ] + ], + module: { + rules: [ + { + test: /\.my-css$/i, + type: "css/auto" + }, + { + test: /\.invalid$/i, + type: "css/auto" + } + ] + } } ]; From 694aee940d63871e3647bdd87f2e144e6e147f99 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 20 Jun 2023 23:03:02 +0300 Subject: [PATCH 10/11] test: prefer relative --- lib/config/defaults.js | 31 ++++++------------- test/Defaults.unittest.js | 8 +++-- .../css/css-modules/style.module.css.invalid | 2 +- test/configCases/css/prefer-relative/bar.css | 7 +++++ test/configCases/css/prefer-relative/foo.css | 7 +++++ test/configCases/css/prefer-relative/index.js | 12 +++++++ .../node_modules/bar.css/package.json | 4 +++ .../node_modules/bar.css/style.css | 3 ++ .../node_modules/foo.css/package.json | 4 +++ .../node_modules/foo.css/style.css | 3 ++ .../configCases/css/prefer-relative/style.css | 1 + .../css/prefer-relative/style.modules.css | 1 + .../css/prefer-relative/test.config.js | 8 +++++ .../css/prefer-relative/webpack.config.js | 8 +++++ 14 files changed, 73 insertions(+), 26 deletions(-) create mode 100644 test/configCases/css/prefer-relative/bar.css create mode 100644 test/configCases/css/prefer-relative/foo.css create mode 100644 test/configCases/css/prefer-relative/index.js create mode 100644 test/configCases/css/prefer-relative/node_modules/bar.css/package.json create mode 100644 test/configCases/css/prefer-relative/node_modules/bar.css/style.css create mode 100644 test/configCases/css/prefer-relative/node_modules/foo.css/package.json create mode 100644 test/configCases/css/prefer-relative/node_modules/foo.css/style.css create mode 100644 test/configCases/css/prefer-relative/style.css create mode 100644 test/configCases/css/prefer-relative/style.modules.css create mode 100644 test/configCases/css/prefer-relative/test.config.js create mode 100644 test/configCases/css/prefer-relative/webpack.config.js diff --git a/lib/config/defaults.js b/lib/config/defaults.js index c730dbd3042..097e62ea0e0 100644 --- a/lib/config/defaults.js +++ b/lib/config/defaults.js @@ -710,37 +710,24 @@ const applyModuleDefaults = ( }); } if (css) { - const cssRule = { - type: CSS_MODULE_TYPE, - resolve: { - fullySpecified: true, - preferRelative: true - } - }; - const cssRuleAuto = { - type: CSS_MODULE_TYPE_AUTO, - resolve: { - fullySpecified: true, - preferRelative: true - } - }; - const cssModulesRule = { - type: CSS_MODULE_TYPE_MODULE, - resolve: { - fullySpecified: true - } + const resolve = { + fullySpecified: true, + preferRelative: true }; rules.push({ test: /\.css$/i, - ...cssRuleAuto + type: CSS_MODULE_TYPE_AUTO, + resolve }); rules.push({ mimetype: "text/css+module", - ...cssModulesRule + type: CSS_MODULE_TYPE_MODULE, + resolve }); rules.push({ mimetype: "text/css", - ...cssRule + type: CSS_MODULE_TYPE, + resolve }); } rules.push( diff --git a/test/Defaults.unittest.js b/test/Defaults.unittest.js index b24979c13b8..ea1ac1546b0 100644 --- a/test/Defaults.unittest.js +++ b/test/Defaults.unittest.js @@ -2232,12 +2232,12 @@ describe("snapshots", () => { + }, + "resolve": Object { + "fullySpecified": true, - + }, + @@ ... @@ + }, + ], + "type": "webassembly/async", + }, - + Object { + @@ ... @@ + "resolve": Object { + "fullySpecified": true, + "preferRelative": true, @@ -2249,6 +2249,7 @@ describe("snapshots", () => { + "mimetype": "text/css+module", + "resolve": Object { + "fullySpecified": true, + + "preferRelative": true, + }, + "type": "css/module", + }, @@ -2257,9 +2258,10 @@ describe("snapshots", () => { + "resolve": Object { + "fullySpecified": true, + "preferRelative": true, - @@ ... @@ + + }, + "type": "css", + }, + + Object { @@ ... @@ + "exportsPresence": "error", @@ ... @@ diff --git a/test/configCases/css/css-modules/style.module.css.invalid b/test/configCases/css/css-modules/style.module.css.invalid index 58b844a1e19..0762d404a79 100644 --- a/test/configCases/css/css-modules/style.module.css.invalid +++ b/test/configCases/css/css-modules/style.module.css.invalid @@ -1,3 +1,3 @@ .notACssModule { color: teal; -} \ No newline at end of file +} diff --git a/test/configCases/css/prefer-relative/bar.css b/test/configCases/css/prefer-relative/bar.css new file mode 100644 index 00000000000..212af39cfba --- /dev/null +++ b/test/configCases/css/prefer-relative/bar.css @@ -0,0 +1,7 @@ +body { + color: red; +} + +.bar { + color: red; +} diff --git a/test/configCases/css/prefer-relative/foo.css b/test/configCases/css/prefer-relative/foo.css new file mode 100644 index 00000000000..bb644f91459 --- /dev/null +++ b/test/configCases/css/prefer-relative/foo.css @@ -0,0 +1,7 @@ +body { + background: red; +} + +.foo { + color: red; +} diff --git a/test/configCases/css/prefer-relative/index.js b/test/configCases/css/prefer-relative/index.js new file mode 100644 index 00000000000..9555d7360b4 --- /dev/null +++ b/test/configCases/css/prefer-relative/index.js @@ -0,0 +1,12 @@ +import * as styles1 from "./style.css"; +import * as styles2 from "./style.modules.css"; + +it("should prefer relative", () => { + expect(styles1).toEqual(nsObj({})); + expect(styles2).toEqual(nsObj({})); + + const style = getComputedStyle(document.body); + + expect(style.getPropertyValue("background")).toBe(" red"); + expect(style.getPropertyValue("color")).toBe(" red"); +}); diff --git a/test/configCases/css/prefer-relative/node_modules/bar.css/package.json b/test/configCases/css/prefer-relative/node_modules/bar.css/package.json new file mode 100644 index 00000000000..f273efd2294 --- /dev/null +++ b/test/configCases/css/prefer-relative/node_modules/bar.css/package.json @@ -0,0 +1,4 @@ +{ + "name": "foo.css", + "main": "style.css" +} diff --git a/test/configCases/css/prefer-relative/node_modules/bar.css/style.css b/test/configCases/css/prefer-relative/node_modules/bar.css/style.css new file mode 100644 index 00000000000..36505138bc9 --- /dev/null +++ b/test/configCases/css/prefer-relative/node_modules/bar.css/style.css @@ -0,0 +1,3 @@ +body { + color: blue; +} diff --git a/test/configCases/css/prefer-relative/node_modules/foo.css/package.json b/test/configCases/css/prefer-relative/node_modules/foo.css/package.json new file mode 100644 index 00000000000..f273efd2294 --- /dev/null +++ b/test/configCases/css/prefer-relative/node_modules/foo.css/package.json @@ -0,0 +1,4 @@ +{ + "name": "foo.css", + "main": "style.css" +} diff --git a/test/configCases/css/prefer-relative/node_modules/foo.css/style.css b/test/configCases/css/prefer-relative/node_modules/foo.css/style.css new file mode 100644 index 00000000000..eedeb9d0ff9 --- /dev/null +++ b/test/configCases/css/prefer-relative/node_modules/foo.css/style.css @@ -0,0 +1,3 @@ +body { + background: blue; +} diff --git a/test/configCases/css/prefer-relative/style.css b/test/configCases/css/prefer-relative/style.css new file mode 100644 index 00000000000..a295e227118 --- /dev/null +++ b/test/configCases/css/prefer-relative/style.css @@ -0,0 +1 @@ +@import 'foo.css'; diff --git a/test/configCases/css/prefer-relative/style.modules.css b/test/configCases/css/prefer-relative/style.modules.css new file mode 100644 index 00000000000..50fef3dda28 --- /dev/null +++ b/test/configCases/css/prefer-relative/style.modules.css @@ -0,0 +1 @@ +@import 'bar.css'; diff --git a/test/configCases/css/prefer-relative/test.config.js b/test/configCases/css/prefer-relative/test.config.js new file mode 100644 index 00000000000..0590757288f --- /dev/null +++ b/test/configCases/css/prefer-relative/test.config.js @@ -0,0 +1,8 @@ +module.exports = { + moduleScope(scope) { + const link = scope.window.document.createElement("link"); + link.rel = "stylesheet"; + link.href = "bundle0.css"; + scope.window.document.head.appendChild(link); + } +}; diff --git a/test/configCases/css/prefer-relative/webpack.config.js b/test/configCases/css/prefer-relative/webpack.config.js new file mode 100644 index 00000000000..cfb8e5c0346 --- /dev/null +++ b/test/configCases/css/prefer-relative/webpack.config.js @@ -0,0 +1,8 @@ +/** @type {import("../../../../").Configuration} */ +module.exports = { + target: "web", + mode: "development", + experiments: { + css: true + } +}; From f778bde634f44b9776ba01a571b1f6951873686c Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 20 Jun 2023 23:40:47 +0300 Subject: [PATCH 11/11] fix: bug with css/auto --- lib/css/CssParser.js | 10 ++++++++++ test/configCases/css/css-modules-in-node/index.js | 4 +--- test/configCases/css/css-modules/index.js | 4 +--- .../css/css-modules/style.module.css.invalid | 2 +- test/configCases/css/css-modules/use-style.js | 7 +++++-- .../css/prefer-relative/{bar.css => bar.modules.css} | 0 test/configCases/css/prefer-relative/index.js | 4 +++- .../prefer-relative/node_modules/bar.css/package.json | 4 ---- .../node_modules/bar.modules.css/package.json | 4 ++++ .../{bar.css => bar.modules.css}/style.css | 0 test/configCases/css/prefer-relative/style.css | 4 ++++ test/configCases/css/prefer-relative/style.modules.css | 6 +++++- 12 files changed, 34 insertions(+), 15 deletions(-) rename test/configCases/css/prefer-relative/{bar.css => bar.modules.css} (100%) delete mode 100644 test/configCases/css/prefer-relative/node_modules/bar.css/package.json create mode 100644 test/configCases/css/prefer-relative/node_modules/bar.modules.css/package.json rename test/configCases/css/prefer-relative/node_modules/{bar.css => bar.modules.css}/style.css (100%) diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index 84b52eb630f..98a937d93a8 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -172,12 +172,18 @@ class CssParser extends Parser { } const module = state.module; + + /** @type {string | undefined} */ + let oldDefaultMode; + if ( module.type === CSS_MODULE_TYPE_AUTO && IS_MODULES.test( parseResource(module.matchResource || module.resource).path ) ) { + oldDefaultMode = this.defaultMode; + this.defaultMode = "local"; } @@ -1013,6 +1019,10 @@ class CssParser extends Parser { } }); + if (oldDefaultMode) { + this.defaultMode = oldDefaultMode; + } + module.buildInfo.strict = true; module.buildMeta.exportsType = "namespace"; module.addDependency(new StaticExportsDependency([], true)); diff --git a/test/configCases/css/css-modules-in-node/index.js b/test/configCases/css/css-modules-in-node/index.js index ffaca48128e..7094f961cfe 100644 --- a/test/configCases/css/css-modules-in-node/index.js +++ b/test/configCases/css/css-modules-in-node/index.js @@ -98,9 +98,7 @@ it("should allow to create css modules", done => { cssModuleWithCustomFileExtension: prod ? "my-app-444-s" : "./style.module.my-css-myCssClass", - notAValidCssModuleExtension: prod - ? "my-app-438-W" - : "./style.module.css.invalid-notACssModule" + notAValidCssModuleExtension: true }); } catch (e) { return done(e); diff --git a/test/configCases/css/css-modules/index.js b/test/configCases/css/css-modules/index.js index 48b9b88ac4c..26e1f273aec 100644 --- a/test/configCases/css/css-modules/index.js +++ b/test/configCases/css/css-modules/index.js @@ -113,9 +113,7 @@ it("should allow to create css modules", done => { cssModuleWithCustomFileExtension: prod ? "my-app-444-s" : "./style.module.my-css-myCssClass", - notAValidCssModuleExtension: prod - ? "my-app-438-W" - : "./style.module.css.invalid-notACssModule" + notAValidCssModuleExtension: true }); } catch (e) { return done(e); diff --git a/test/configCases/css/css-modules/style.module.css.invalid b/test/configCases/css/css-modules/style.module.css.invalid index 0762d404a79..953e362ee15 100644 --- a/test/configCases/css/css-modules/style.module.css.invalid +++ b/test/configCases/css/css-modules/style.module.css.invalid @@ -1,3 +1,3 @@ -.notACssModule { +.class { color: teal; } diff --git a/test/configCases/css/css-modules/use-style.js b/test/configCases/css/css-modules/use-style.js index ca759ecd0dc..6654df9c96d 100644 --- a/test/configCases/css/css-modules/use-style.js +++ b/test/configCases/css/css-modules/use-style.js @@ -1,7 +1,10 @@ import * as style from "./style.module.css"; import { local1, local2, local3, local4, ident } from "./style.module.css"; import { myCssClass } from "./style.module.my-css"; -import { notACssModule } from "./style.module.css.invalid" +import * as notACssModule from "./style.module.css.invalid"; + +// To prevent analysis export +const isNotACSSModule = typeof notACssModule["c" + "lass"] === "undefined"; export default { global: style.global, @@ -44,5 +47,5 @@ export default { classInContainer: style['class-in-container'], deepClassInContainer: style['deep-class-in-container'], cssModuleWithCustomFileExtension: myCssClass, - notAValidCssModuleExtension: notACssModule + notAValidCssModuleExtension: isNotACSSModule }; diff --git a/test/configCases/css/prefer-relative/bar.css b/test/configCases/css/prefer-relative/bar.modules.css similarity index 100% rename from test/configCases/css/prefer-relative/bar.css rename to test/configCases/css/prefer-relative/bar.modules.css diff --git a/test/configCases/css/prefer-relative/index.js b/test/configCases/css/prefer-relative/index.js index 9555d7360b4..aeb24a334df 100644 --- a/test/configCases/css/prefer-relative/index.js +++ b/test/configCases/css/prefer-relative/index.js @@ -3,7 +3,9 @@ import * as styles2 from "./style.modules.css"; it("should prefer relative", () => { expect(styles1).toEqual(nsObj({})); - expect(styles2).toEqual(nsObj({})); + expect(styles2).toEqual(nsObj({ + "style-module": "./style.modules.css-style-module", + })); const style = getComputedStyle(document.body); diff --git a/test/configCases/css/prefer-relative/node_modules/bar.css/package.json b/test/configCases/css/prefer-relative/node_modules/bar.css/package.json deleted file mode 100644 index f273efd2294..00000000000 --- a/test/configCases/css/prefer-relative/node_modules/bar.css/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "foo.css", - "main": "style.css" -} diff --git a/test/configCases/css/prefer-relative/node_modules/bar.modules.css/package.json b/test/configCases/css/prefer-relative/node_modules/bar.modules.css/package.json new file mode 100644 index 00000000000..bfdbb88698b --- /dev/null +++ b/test/configCases/css/prefer-relative/node_modules/bar.modules.css/package.json @@ -0,0 +1,4 @@ +{ + "name": "bar.modules.css", + "main": "style.css" +} diff --git a/test/configCases/css/prefer-relative/node_modules/bar.css/style.css b/test/configCases/css/prefer-relative/node_modules/bar.modules.css/style.css similarity index 100% rename from test/configCases/css/prefer-relative/node_modules/bar.css/style.css rename to test/configCases/css/prefer-relative/node_modules/bar.modules.css/style.css diff --git a/test/configCases/css/prefer-relative/style.css b/test/configCases/css/prefer-relative/style.css index a295e227118..7aed5ec6680 100644 --- a/test/configCases/css/prefer-relative/style.css +++ b/test/configCases/css/prefer-relative/style.css @@ -1 +1,5 @@ @import 'foo.css'; + +.style { + color: red; +} diff --git a/test/configCases/css/prefer-relative/style.modules.css b/test/configCases/css/prefer-relative/style.modules.css index 50fef3dda28..69dc14ca454 100644 --- a/test/configCases/css/prefer-relative/style.modules.css +++ b/test/configCases/css/prefer-relative/style.modules.css @@ -1 +1,5 @@ -@import 'bar.css'; +@import 'bar.modules.css'; + +.style-module { + color: red; +}