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

fix: Incorrect parsing of functional pseudo class css selector #169

Merged
merged 8 commits into from
Mar 25, 2024
Merged

fix: Incorrect parsing of functional pseudo class css selector #169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
edb1d8a
fix: Fix incorrect parsing of functional psuedo class css selector
billyvg Mar 21, 2024
0722035
break early if no balanced parens, more comments
billyvg Mar 21, 2024
e6bc514
Apply suggestions from code review
billyvg Mar 22, 2024
60be227
Apply formatting changes
billyvg Mar 22, 2024
d634104
fix to keep track of unbalanced parens across all selectors
billyvg Mar 22, 2024
751ab41
Update packages/rrweb-snapshot/src/css.ts
billyvg Mar 22, 2024
e63cc39
Update packages/rrweb-snapshot/test/css.test.ts
billyvg Mar 22, 2024
495fda5
missing curlies
billyvg Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 84 additions & 3 deletions packages/rrweb-snapshot/src/css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,15 +437,96 @@ export function parse(css: string, options: ParserOptions = {}) {
}
/* @fix Remove all comments from selectors
* http://ostermiller.org/findcomment.html */
return trim(m[0])
const splitSelectors = trim(m[0])
.replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
.replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (m) => {
return m.replace(/,/g, '\u200C');
})
.split(/\s*(?![^(]*\)),\s*/)
.map((s) => {
.split(/\s*(?![^(]*\)),\s*/);

if (splitSelectors.length <= 1) {
return splitSelectors.map((s) => {
return s.replace(/\u200C/g, ',');
});
}

// For each selector, need to check if we properly split on `,`
// Example case where selector is:
// .bar:has(input:is(:disabled), button:is(:disabled))
let i = 0;
let j = 0;
const len = splitSelectors.length;
const finalSelectors = [];
while (i < len) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logic is as follows:

  • Iterate through the split selectors and look for the first selector with an opening parenthesis
  • If opening paren is found, look through the rest of the selectors to look for a matching number of closing parentheses
    • If closing paren is found, merge together all selectors between the opening and closing
      • Move iterator index to the next selector and continue
    • If no closing paren is found, assume that selectors were correctly split

// Look for selectors with opening parens - `(` and search rest of
// selectors for the first one with matching number of closing
// parens `)`
const openingParensCount = (splitSelectors[i].match(/\(/g) || []).length;
const closingParensCount = (splitSelectors[i].match(/\)/g) || []).length;
let unbalancedParens = openingParensCount - closingParensCount;

if (unbalancedParens >= 1) {
// At least one opening parens was found, prepare to look through
// rest of selectors
let foundClosingSelector = false;

// Loop starting with next item in array, until we find matching
// number of ending parens
j = i + 1;
while (j < len) {
// peek into next item to count the number of closing brackets
const nextOpeningParensCount = (splitSelectors[j].match(/\(/g) || [])
.length;
const nextClosingParensCount = (splitSelectors[j].match(/\)/g) || [])
.length;
const nextUnbalancedParens =
nextClosingParensCount - nextOpeningParensCount;

if (nextUnbalancedParens === unbalancedParens) {
// Matching # of closing parens was found, join all elements
// from i to j
finalSelectors.push(splitSelectors.slice(i, j + 1).join(','));

// we will want to skip the items that we have joined together
i = j + 1;

// Use to continue the outer loop
foundClosingSelector = true;

// break out of inner loop so we found matching closing parens
break;
}

// No matching closing parens found, keep moving through index, but
// update the # of unbalanced parents still outstanding
j++;
unbalancedParens -= nextUnbalancedParens;
}

if (foundClosingSelector) {
// Matching closing selector was found, move to next selector
continue;
}

// No matching closing selector was found, either invalid CSS,
// or unbalanced number of opening parens were used as CSS
// selectors. Assume that rest of the list of selectors are
// selectors and break to avoid iterating through the list of
// selectors again.
splitSelectors
.slice(i, len)
.forEach((selector) => selector && finalSelectors.push(selector));
break;
}

// No opening parens found, contiue looking through list
splitSelectors[i] && finalSelectors.push(splitSelectors[i]);
i++;
}

return finalSelectors.map((s) => {
return s.replace(/\u200C/g, ',');
});
}

/**
Expand Down
81 changes: 81 additions & 0 deletions packages/rrweb-snapshot/test/css.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,87 @@ describe('css parser', () => {
expect(out3).toEqual('[data-aa\\:other] { color: red; }');
});

it.each([
['.foo,.bar {}', ['.foo', '.bar']],
['.bar:has(:disabled) {}', ['.bar:has(:disabled)']],
['.bar:has(input, button) {}', ['.bar:has(input, button)']],
[
'.bar:has(input:is(:disabled),button:has(:disabled)) {}',
['.bar:has(input:is(:disabled),button:has(:disabled))'],
],
[
'.bar:has(div, input:is(:disabled), button) {}',
['.bar:has(div,input:is(:disabled), button)'],
],
[
'.bar:has(div, input:is(:disabled),button:has(:disabled,.baz)) {}',
['.bar:has(div,input:is(:disabled),button:has(:disabled,.baz))'],
],
[
'.bar:has(input), .foo:has(input, button), .baz {}',
['.bar:has(input)', '.foo:has(input, button)', '.baz'],
],
[
'.bar:has(input:is(:disabled),button:has(:disabled,.baz), div:has(:disabled,.baz)){color: red;}',
[
'.bar:has(input:is(:disabled),button:has(:disabled,.baz),div:has(:disabled,.baz))',
],
],
['.bar((( {}', ['.bar(((']],
[
'.bar:has(:has(:has(a), :has(:has(:has(b, :has(a), c), e))), input:is(:disabled), button) {}',
[
'.bar:has(:has(:has(a),:has(:has(:has(b,:has(a), c), e))),input:is(:disabled), button)',
],
],
['.foo,.bar(((,.baz {}', ['.foo', '.bar(((', '.baz']],
[
'.foo,.bar:has(input:is(:disabled)){color: red;}',
['.foo', '.bar:has(input:is(:disabled))'],
],
[
'.foo,.bar:has(input:is(:disabled),button:has(:disabled,.baz)){color: red;}',
['.foo', '.bar:has(input:is(:disabled),button:has(:disabled,.baz))'],
],
[
'.foo,.bar:has(input:is(:disabled),button:has(:disabled), div:has(:disabled,.baz)){color: red;}',
[
'.foo',
'.bar:has(input:is(:disabled),button:has(:disabled),div:has(:disabled,.baz))',
],
],
[
'.foo,.bar:has(input:is(:disabled),button:has(:disabled,.baz), div:has(:disabled,.baz)){color: red;}',
[
'.foo',
'.bar:has(input:is(:disabled),button:has(:disabled,.baz),div:has(:disabled,.baz))',
],
],
['.bar:has(:disabled), .foo {}', ['.bar:has(:disabled)', '.foo']],
[
'.bar:has(input:is(:disabled),.foo,button:is(:disabled)), .foo {}',
['.bar:has(input:is(:disabled),.foo,button:is(:disabled))', '.foo'],
],
[
'.bar:has(input:is(:disabled),.foo,button:is(:disabled)), .foo:has(input, button), .baz, {}',
[
'.bar:has(input:is(:disabled),.foo,button:is(:disabled))',
'.foo:has(input, button)',
'.baz',
],
],
])(
'can parse selector(s) with functional pseudo classes: %s',
(cssText, expected) => {
expect(
parse(
cssText,
// @ts-ignore
).stylesheet?.rules[0].selectors,
).toEqual(expected);
},
);

it('parses imports with quotes correctly', () => {
const out1 = escapeImportStatement({
cssText: `@import url("/foo.css;900;800"");`,
Expand Down
Loading