Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix faulty css parser processing #16864

Merged
merged 8 commits into from Apr 5, 2023
Merged

Fix faulty css parser processing #16864

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e10b29a
Fix faulty css parser processing
janlent1 Mar 25, 2023
b767e52
Fix if check error
janlent1 Mar 25, 2023
b63e28c
Fix failing browserslist test
janlent1 Mar 25, 2023
c138b12
Allow multiple parameters in not(
janlent1 Mar 26, 2023
9b63cfc
Fix test css and remove allowmodeswitch
janlent1 Mar 26, 2023
97c4037
Add same logic for :is
janlent1 Mar 27, 2023
4a41029
Adding other available pseudofunctionnames+tests
janlent1 Mar 28, 2023
d511c9f
Always add a ) when using pseudofunctions
janlent1 Apr 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 23 additions & 2 deletions lib/css/CssParser.js
View file
Open in desktop
Expand Up @@ -138,6 +138,19 @@ class CssParser extends Parser {
let singleClassSelector = undefined;
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);
Expand Down Expand Up @@ -511,6 +524,9 @@ 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 !== false) {
modeData = newModeData;
Expand Down Expand Up @@ -560,6 +576,9 @@ 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);
janlent1 marked this conversation as resolved.
Show resolved Hide resolved
} else {
modeStack.push(false);
}
Expand Down Expand Up @@ -597,8 +616,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);
Expand Down
14 changes: 14 additions & 0 deletions test/configCases/css/css-modules-in-node/index.js
View file
Open in desktop
Expand Up @@ -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",
Expand All @@ -15,6 +23,12 @@ 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",
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",
Expand Down
14 changes: 14 additions & 0 deletions test/configCases/css/css-modules/index.js
View file
Open in desktop
Expand Up @@ -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",
Expand All @@ -18,6 +26,12 @@ 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",
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",
Expand Down
55 changes: 55 additions & 0 deletions test/configCases/css/css-modules/style.module.css
View file
Open in desktop
Expand Up @@ -16,6 +16,61 @@
color: blue;
}

.local7 div:not(.disabled, .mButtonDisabled, .tipOnly) {
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;
}

.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;
}
Expand Down
10 changes: 10 additions & 0 deletions test/configCases/css/css-modules/use-style.js
View file
Open in desktop
Expand Up @@ -7,6 +7,16 @@ export default {
local: `${local1} ${local2} ${local3} ${local4}`,
local2: `${style.local5} ${style.local6}`,
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,
Expand Down