From e10b29a2e8087b7083bb015e41e31f331833bfc6 Mon Sep 17 00:00:00 2001 From: Jan Lentmaier Date: Sat, 25 Mar 2023 21:49:58 +0000 Subject: [PATCH 1/8] Fix faulty css parser processing --- 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 12df8759aff..30083505f71 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -512,7 +512,7 @@ class CssParser extends Parser { switch (mode) { case CSS_MODE_TOP_LEVEL: { const newModeData = modeStack.pop(); - if (newModeData !== false) { + if (newModeData && newModeData !== false) { modeData = newModeData; const dep = new ConstDependency("", [start, end]); module.addPresentationalDependency(dep); From b767e52c89c5a2ad0b8ac6c0c119862f23befe4d Mon Sep 17 00:00:00 2001 From: Jan Lentmaier Date: Sat, 25 Mar 2023 21:54:37 +0000 Subject: [PATCH 2/8] Fix if check error --- 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 30083505f71..63887eccb26 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -512,7 +512,7 @@ class CssParser extends Parser { switch (mode) { case CSS_MODE_TOP_LEVEL: { const newModeData = modeStack.pop(); - if (newModeData && newModeData !== false) { + if (newModeData !== undefined && newModeData !== false) { modeData = newModeData; const dep = new ConstDependency("", [start, end]); module.addPresentationalDependency(dep); From b63e28c49933d3f68642f6b4582051974cc53d27 Mon Sep 17 00:00:00 2001 From: Jan Lentmaier Date: Sat, 25 Mar 2023 22:20:22 +0000 Subject: [PATCH 3/8] Fix failing browserslist test --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 14ea915aa37..e78e5e21257 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1632,9 +1632,9 @@ camelcase@^6.2.0: integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== caniuse-lite@^1.0.30001286: - version "1.0.30001286" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001286.tgz#3e9debad420419618cfdf52dc9b6572b28a8fff6" - integrity sha512-zaEMRH6xg8ESMi2eQ3R4eZ5qw/hJiVsO/HlLwniIwErij0JDr9P+8V4dtx1l+kLq6j3yy8l8W4fst1lBnat5wQ== + version "1.0.30001469" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz" + integrity sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g== caseless@~0.12.0: version "0.12.0" From c138b127a31544005f1ff4d9686b21e15b6730b6 Mon Sep 17 00:00:00 2001 From: Jan Lentmaier Date: Sun, 26 Mar 2023 17:31:57 +0000 Subject: [PATCH 4/8] Allow multiple parameters in not( Adds a test as well. --- lib/css/CssParser.js | 15 ++++++++++++--- test/configCases/css/css-modules-in-node/index.js | 3 +++ test/configCases/css/css-modules/index.js | 3 +++ test/configCases/css/css-modules/style.module.css | 4 ++++ test/configCases/css/css-modules/use-style.js | 1 + yarn.lock | 6 +++--- 6 files changed, 26 insertions(+), 6 deletions(-) diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index 63887eccb26..8600a9feec5 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -138,6 +138,7 @@ class CssParser extends Parser { let singleClassSelector = undefined; let lastIdentifier = undefined; const modeStack = []; + let awaitRightParenthesis = false; const isTopLevelLocal = () => modeData === "local" || (this.defaultMode === "local" && modeData === undefined); @@ -511,8 +512,11 @@ class CssParser extends Parser { rightParenthesis: (input, start, end) => { switch (mode) { case CSS_MODE_TOP_LEVEL: { + if (awaitRightParenthesis) { + awaitRightParenthesis = false; + } const newModeData = modeStack.pop(); - if (newModeData !== undefined && newModeData !== false) { + if (newModeData !== false) { modeData = newModeData; const dep = new ConstDependency("", [start, end]); module.addPresentationalDependency(dep); @@ -560,6 +564,9 @@ class CssParser extends Parser { modeData = "local"; const dep = new ConstDependency("", [start, end]); module.addPresentationalDependency(dep); + } else if (this.allowModeSwitch && name === ":not") { + awaitRightParenthesis = true; + modeStack.push(false); } else { modeStack.push(false); } @@ -597,8 +604,10 @@ class CssParser extends Parser { comma: (input, start, end) => { switch (mode) { case CSS_MODE_TOP_LEVEL: - modeData = undefined; - modeStack.length = 0; + if (!awaitRightParenthesis) { + modeData = undefined; + modeStack.length = 0; + } break; case CSS_MODE_IN_LOCAL_RULE: processDeclarationValueDone(input, start); diff --git a/test/configCases/css/css-modules-in-node/index.js b/test/configCases/css/css-modules-in-node/index.js index 5f432073ae2..e5cb742b2af 100644 --- a/test/configCases/css/css-modules-in-node/index.js +++ b/test/configCases/css/css-modules-in-node/index.js @@ -15,6 +15,9 @@ it("should allow to create css modules", done => { nested: prod ? "my-app-491-RX undefined my-app-491-X2" : "./style.module.css-nested1 undefined ./style.module.css-nested3", + notWmultiParams: prod + ? "my-app-491-Kw" + : "./style.module.css-local7", 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", diff --git a/test/configCases/css/css-modules/index.js b/test/configCases/css/css-modules/index.js index 7ec402925fb..16f9de3f973 100644 --- a/test/configCases/css/css-modules/index.js +++ b/test/configCases/css/css-modules/index.js @@ -18,6 +18,9 @@ it("should allow to create css modules", done => { nested: prod ? "my-app-491-RX undefined my-app-491-X2" : "./style.module.css-nested1 undefined ./style.module.css-nested3", + notWmultiParams: prod + ? "my-app-491-Kw" + : "./style.module.css-local7", 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", diff --git a/test/configCases/css/css-modules/style.module.css b/test/configCases/css/css-modules/style.module.css index 70a1cd2facf..1c82f5f375c 100644 --- a/test/configCases/css/css-modules/style.module.css +++ b/test/configCases/css/css-modules/style.module.css @@ -16,6 +16,10 @@ color: blue; } +.local7 div:not(.disabled, .mButtonDisabled, .tipOnly) { + p-events: initial !important; +} + :global(:global(:local(.nested1)).nested2).nested3 { color: pink; } diff --git a/test/configCases/css/css-modules/use-style.js b/test/configCases/css/css-modules/use-style.js index 41f606240b7..78efff24144 100644 --- a/test/configCases/css/css-modules/use-style.js +++ b/test/configCases/css/css-modules/use-style.js @@ -7,6 +7,7 @@ export default { local: `${local1} ${local2} ${local3} ${local4}`, local2: `${style.local5} ${style.local6}`, nested: `${style.nested1} ${style.nested2} ${style.nested3}`, + notWmultiParams: `${style.local7}`, ident, keyframes: style.localkeyframes, animation: style.animation, diff --git a/yarn.lock b/yarn.lock index e78e5e21257..14ea915aa37 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1632,9 +1632,9 @@ camelcase@^6.2.0: integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== caniuse-lite@^1.0.30001286: - version "1.0.30001469" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz" - integrity sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g== + version "1.0.30001286" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001286.tgz#3e9debad420419618cfdf52dc9b6572b28a8fff6" + integrity sha512-zaEMRH6xg8ESMi2eQ3R4eZ5qw/hJiVsO/HlLwniIwErij0JDr9P+8V4dtx1l+kLq6j3yy8l8W4fst1lBnat5wQ== caseless@~0.12.0: version "0.12.0" From 9b63cfc787b0a7341b4e60ee9742038d306838c0 Mon Sep 17 00:00:00 2001 From: Jan Lentmaier Date: Sun, 26 Mar 2023 18:14:48 +0000 Subject: [PATCH 5/8] Fix test css and remove allowmodeswitch The mode switch is not needed as :not( is not a mode switch --- lib/css/CssParser.js | 2 +- test/configCases/css/css-modules/style.module.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index 8600a9feec5..51dc4132ddf 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -564,7 +564,7 @@ class CssParser extends Parser { modeData = "local"; const dep = new ConstDependency("", [start, end]); module.addPresentationalDependency(dep); - } else if (this.allowModeSwitch && name === ":not") { + } else if (name === ":not") { awaitRightParenthesis = true; modeStack.push(false); } else { diff --git a/test/configCases/css/css-modules/style.module.css b/test/configCases/css/css-modules/style.module.css index 1c82f5f375c..ce0a9f159df 100644 --- a/test/configCases/css/css-modules/style.module.css +++ b/test/configCases/css/css-modules/style.module.css @@ -17,7 +17,7 @@ } .local7 div:not(.disabled, .mButtonDisabled, .tipOnly) { - p-events: initial !important; + pointer-events: initial !important; } :global(:global(:local(.nested1)).nested2).nested3 { From 97c40376d118313f8f307478ecf6e049ac15f364 Mon Sep 17 00:00:00 2001 From: Jan Lentmaier Date: Mon, 27 Mar 2023 08:11:53 +0000 Subject: [PATCH 6/8] Add same logic for :is --- lib/css/CssParser.js | 2 +- test/configCases/css/css-modules-in-node/index.js | 3 +++ test/configCases/css/css-modules/index.js | 3 +++ test/configCases/css/css-modules/style.module.css | 9 +++++++++ test/configCases/css/css-modules/use-style.js | 1 + 5 files changed, 17 insertions(+), 1 deletion(-) diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index 51dc4132ddf..bf99aa7de44 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -564,7 +564,7 @@ class CssParser extends Parser { modeData = "local"; const dep = new ConstDependency("", [start, end]); module.addPresentationalDependency(dep); - } else if (name === ":not") { + } else if ([":not", ":is"].includes(name)) { awaitRightParenthesis = true; modeStack.push(false); } else { diff --git a/test/configCases/css/css-modules-in-node/index.js b/test/configCases/css/css-modules-in-node/index.js index e5cb742b2af..534a723ad2d 100644 --- a/test/configCases/css/css-modules-in-node/index.js +++ b/test/configCases/css/css-modules-in-node/index.js @@ -18,6 +18,9 @@ it("should allow to create css modules", done => { notWmultiParams: prod ? "my-app-491-Kw" : "./style.module.css-local7", + isWmultiParams: prod + ? "my-app-491-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", diff --git a/test/configCases/css/css-modules/index.js b/test/configCases/css/css-modules/index.js index 16f9de3f973..d893baa930e 100644 --- a/test/configCases/css/css-modules/index.js +++ b/test/configCases/css/css-modules/index.js @@ -21,6 +21,9 @@ it("should allow to create css modules", done => { notWmultiParams: prod ? "my-app-491-Kw" : "./style.module.css-local7", + isWmultiParams: prod + ? "my-app-491-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", diff --git a/test/configCases/css/css-modules/style.module.css b/test/configCases/css/css-modules/style.module.css index ce0a9f159df..9cef79ff797 100644 --- a/test/configCases/css/css-modules/style.module.css +++ b/test/configCases/css/css-modules/style.module.css @@ -20,6 +20,15 @@ pointer-events: initial !important; } +.local8 :is(div.parent1.child1.vertical-tiny, + div.parent1.child1.vertical-small, + div.otherDiv.horizontal-tiny, + div.otherDiv.horizontal-small div.description) { + max-height: 0; + margin: 0; + overflow: hidden; +} + :global(:global(:local(.nested1)).nested2).nested3 { color: pink; } diff --git a/test/configCases/css/css-modules/use-style.js b/test/configCases/css/css-modules/use-style.js index 78efff24144..70060af4bcb 100644 --- a/test/configCases/css/css-modules/use-style.js +++ b/test/configCases/css/css-modules/use-style.js @@ -8,6 +8,7 @@ export default { local2: `${style.local5} ${style.local6}`, nested: `${style.nested1} ${style.nested2} ${style.nested3}`, notWmultiParams: `${style.local7}`, + isWmultiParams: `${style.local8}`, ident, keyframes: style.localkeyframes, animation: style.animation, From 4a41029d464f173fa590d3ac1043536b85601d7f Mon Sep 17 00:00:00 2001 From: Jan Lentmaier Date: Tue, 28 Mar 2023 07:54:20 +0000 Subject: [PATCH 7/8] Adding other available pseudofunctionnames+tests --- lib/css/CssParser.js | 14 ++++++- .../css/css-modules-in-node/index.js | 8 ++++ test/configCases/css/css-modules/index.js | 8 ++++ .../css/css-modules/style.module.css | 42 +++++++++++++++++++ test/configCases/css/css-modules/use-style.js | 8 ++++ 5 files changed, 79 insertions(+), 1 deletion(-) diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index bf99aa7de44..2bcd24ad490 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -139,6 +139,18 @@ class CssParser extends Parser { let lastIdentifier = undefined; const modeStack = []; let awaitRightParenthesis = false; + const pseudoFunctionNames = [ + ":matches", + ":not", + ":is", + ":where", + ":has", + ":current", + ":past", + ":future", + "-moz-any", + "-webkit-any" + ]; const isTopLevelLocal = () => modeData === "local" || (this.defaultMode === "local" && modeData === undefined); @@ -564,7 +576,7 @@ class CssParser extends Parser { modeData = "local"; const dep = new ConstDependency("", [start, end]); module.addPresentationalDependency(dep); - } else if ([":not", ":is"].includes(name)) { + } else if (pseudoFunctionNames.includes(name)) { awaitRightParenthesis = true; modeStack.push(false); } else { diff --git a/test/configCases/css/css-modules-in-node/index.js b/test/configCases/css/css-modules-in-node/index.js index 534a723ad2d..ab401dff260 100644 --- a/test/configCases/css/css-modules-in-node/index.js +++ b/test/configCases/css/css-modules-in-node/index.js @@ -6,6 +6,14 @@ it("should allow to create css modules", done => { 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", local: prod ? "my-app-491-Zw my-app-491-yl my-app-491-J_ my-app-491-gc" : "./style.module.css-local1 ./style.module.css-local2 ./style.module.css-local3 ./style.module.css-local4", diff --git a/test/configCases/css/css-modules/index.js b/test/configCases/css/css-modules/index.js index d893baa930e..2bd832067f4 100644 --- a/test/configCases/css/css-modules/index.js +++ b/test/configCases/css/css-modules/index.js @@ -9,6 +9,14 @@ it("should allow to create css modules", done => { 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", local: prod ? "my-app-491-Zw my-app-491-yl my-app-491-J_ my-app-491-gc" : "./style.module.css-local1 ./style.module.css-local2 ./style.module.css-local3 ./style.module.css-local4", diff --git a/test/configCases/css/css-modules/style.module.css b/test/configCases/css/css-modules/style.module.css index 9cef79ff797..f3fff7baee7 100644 --- a/test/configCases/css/css-modules/style.module.css +++ b/test/configCases/css/css-modules/style.module.css @@ -29,6 +29,48 @@ overflow: hidden; } +.local9 :matches(div.parent1.child1.vertical-tiny, + div.parent1.child1.vertical-small, + div.otherDiv.horizontal-tiny, + div.otherDiv.horizontal-small div.description) { + max-height: 0; + margin: 0; + overflow: hidden; +} + +.local10 :where(div.parent1.child1.vertical-tiny, + div.parent1.child1.vertical-small, + div.otherDiv.horizontal-tiny, + div.otherDiv.horizontal-small div.description) { + max-height: 0; + margin: 0; + overflow: hidden; +} + +.local11 div:has(.disabled, .mButtonDisabled, .tipOnly) { + pointer-events: initial !important; +} + +.local12 div:current(p, span) { + background-color: yellow; +} + +.local13 div:past(p, span) { + display: none; +} + +.local14 div:future(p, span) { + background-color: yellow; +} + +.local15 div:-moz-any(ol, ul, menu, dir) { + list-style-type: square; +} + +.local16 li:-webkit-any(:first-child, :last-child) { + background-color: aquamarine; +} + :global(:global(:local(.nested1)).nested2).nested3 { color: pink; } diff --git a/test/configCases/css/css-modules/use-style.js b/test/configCases/css/css-modules/use-style.js index 70060af4bcb..28f2d0cc808 100644 --- a/test/configCases/css/css-modules/use-style.js +++ b/test/configCases/css/css-modules/use-style.js @@ -9,6 +9,14 @@ export default { nested: `${style.nested1} ${style.nested2} ${style.nested3}`, notWmultiParams: `${style.local7}`, isWmultiParams: `${style.local8}`, + matchesWmultiParams: `${style.local9}`, + whereWmultiParams: `${style.local10}`, + hasWmultiParams: `${style.local11}`, + currentWmultiParams: `${style.local12}`, + pastWmultiParams: `${style.local13}`, + futureWmultiParams: `${style.local14}`, + mozAnyWmultiParams: `${style.local15}`, + webkitAnyWmultiParams: `${style.local16}`, ident, keyframes: style.localkeyframes, animation: style.animation, From d511c9feef8ddaf55a02944a493fc37e2256686e Mon Sep 17 00:00:00 2001 From: janlent1 Date: Sat, 1 Apr 2023 13:44:24 +0200 Subject: [PATCH 8/8] Always add a ) when using pseudofunctions --- lib/css/CssParser.js | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index 2bcd24ad490..766ae6bc7b3 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -139,18 +139,6 @@ class CssParser extends Parser { let lastIdentifier = undefined; const modeStack = []; let awaitRightParenthesis = false; - const pseudoFunctionNames = [ - ":matches", - ":not", - ":is", - ":where", - ":has", - ":current", - ":past", - ":future", - "-moz-any", - "-webkit-any" - ]; const isTopLevelLocal = () => modeData === "local" || (this.defaultMode === "local" && modeData === undefined); @@ -576,10 +564,8 @@ class CssParser extends Parser { modeData = "local"; const dep = new ConstDependency("", [start, end]); module.addPresentationalDependency(dep); - } else if (pseudoFunctionNames.includes(name)) { - awaitRightParenthesis = true; - modeStack.push(false); } else { + awaitRightParenthesis = true; modeStack.push(false); } break;