Skip to content

Fix & substitutions in functional pseudo classes #353

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

Open
Andarist wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix & substitutions in functional pseudo classes #353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
24 changes: 18 additions & 6 deletions src/Parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {COMMENT, RULESET, DECLARATION} from './Enum.js'
import {abs, charat, trim, from, sizeof, strlen, substr, append, replace, indexof} from './Utility.js'
import {abs, charat, trim, from, sizeof, strlen, substr, append, replace} from './Utility.js'
import {node, char, prev, next, peek, token, caret, alloc, dealloc, delimit, whitespace, escaping, identifier, commenter} from './Tokenizer.js'

/**
Expand Down Expand Up @@ -32,6 +32,7 @@ export function parse (value, root, parent, rule, rules, rulesets, pseudo, point
var variable = 1
var scanning = 1
var ampersand = 1
var parens = 0
var character = 0
var type = ''
var props = rules
Expand All @@ -43,17 +44,23 @@ export function parse (value, root, parent, rule, rules, rulesets, pseudo, point
switch (previous = character, character = next()) {
// (
case 40:
if (previous != 108 && charat(characters, length - 1) == 58) {
if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f', abs(index ? points[index - 1] : 0)) != -1)
ampersand = -1
break
}
if (previous != 108 && charat(characters, length - 1) == 58) parens++, characters += '('
else characters += delimit(character)
break
// )
case 41:
parens--, characters += ')'
break
// " ' [
case 34: case 39: case 91:
characters += delimit(character)
break
// \t \n \r \s
case 9: case 10: case 13: case 32:
if (parens > 0) {
characters += from(character)
break
}
Comment on lines +60 to +63
Copy link
Copy Markdown
Collaborator Author

@Andarist Andarist Mar 19, 2026

Choose a reason for hiding this comment

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

this one is potentially redundant but I erred on the side of keeping the current parsing output in regards to the whitespace within the parenthesis

I couldn't quite find a reason to justify whitespace preservation in this context but I vaguely recall that was made on purpose (I can't find an issue reference or anything like that though)

characters += whitespace(previous)
break
// \
Expand All @@ -76,6 +83,10 @@ export function parse (value, root, parent, rule, rules, rulesets, pseudo, point
points[index++] = strlen(characters) * ampersand
// } ; \0
case 125 * variable: case 59: case 0:
if (parens > 0 && character) {
characters += from(character)
break
}
switch (character) {
// \0 }
case 0: case 125: scanning = 0
Expand Down Expand Up @@ -130,6 +141,7 @@ export function parse (value, root, parent, rule, rules, rulesets, pseudo, point
break
// ,
case 44:
if (parens > 0) break
points[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1
break
// @
Expand Down
4 changes: 2 additions & 2 deletions src/Prefixer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export function prefix (value, length, children) {
// grid-(row|column)-start
case 4384: case 3616:
if (children && children.some(function (element, index) { return length = index, match(element.props, /grid-\w+-end/) })) {
return ~indexof(value + (children = children[length].value), 'span', 0) ? value : (MS + replace(value, '-start', '') + value + MS + 'grid-row-span:' + (~indexof(children, 'span', 0) ? match(children, /\d+/) : +match(children, /\d+/) - +match(value, /\d+/)) + ';')
return ~indexof(value + (children = children[length].value), 'span') ? value : (MS + replace(value, '-start', '') + value + MS + 'grid-row-span:' + (~indexof(children, 'span') ? match(children, /\d+/) : +match(children, /\d+/) - +match(value, /\d+/)) + ';')
}
return MS + replace(value, '-start', '') + value
// grid-(row|column)-end
Expand All @@ -116,7 +116,7 @@ export function prefix (value, length, children) {
return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value
// (s)tretch
case 115:
return ~indexof(value, 'stretch', 0) ? prefix(replace(value, 'stretch', 'fill-available'), length, children) + value : value
return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length, children) + value : value
}
break
// grid-(column|row)
Expand Down
5 changes: 2 additions & 3 deletions src/Utility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,10 @@ export function replace (value, pattern, replacement) {
/**
* @param {string} value
* @param {string} search
* @param {number} position
* @return {number}
*/
export function indexof (value, search, position) {
return value.indexOf(search, position)
export function indexof (value, search) {
return value.indexOf(search)
}

/**
Expand Down
30 changes: 30 additions & 0 deletions test/Parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,26 @@ describe('Parser', () => {
).to.equal(`.user [href="https://css-tricks.com?a=1&b=2"]{color:red;}`)
})

test('multiple & references inside selector pseudo functions (#350)', () => {
expect(
stylis(`
:is(&:hover, .other:hover &, [href="a&b"]) .target {
color:red;
}
:where(&:focus, .other:focus &) .target {
color:blue;
}
:has(> &, + &) {
color:green;
}
`, '.parent .child')
).to.equal([
`:is(.parent .child:hover, .other:hover .parent .child, [href="a&b"]) .target{color:red;}`,
`:where(.parent .child:focus, .other:focus .parent .child) .target{color:blue;}`,
`:has(> .parent .child, + .parent .child){color:green;}`
].join(''))
})

test('& root should be removed', () => {
expect(
stylis(`
Expand Down Expand Up @@ -677,6 +697,14 @@ describe('Parser', () => {
}
`)
).to.equal(`h1:matches(.user,[href="https://css-tricks.com?a=1&b=2"]){display:none;}`)

expect(
stylis(`
h1:matches([href="https://css-tricks.com?a=1&b=2"], &) {
display: none
}
`)
).to.equal(`h1:matches([href="https://css-tricks.com?a=1&b=2"], .user){display:none;}`)
})

test('@keyframes', () => {
Expand Down Expand Up @@ -1083,6 +1111,7 @@ describe('Parser', () => {
--cdo-at-top-level: <!--;
--cdc-at-top-level: -->;
--semicolon-not-top-level: (;);
--curly-not-top-level: foo({bar});
--cdo-not-top-level: (<!--);
--cdc-not-top-level: (-->);
--ampersand-preserved: foo & bar;
Expand All @@ -1094,6 +1123,7 @@ describe('Parser', () => {
`--cdo-at-top-level:<!--;`,
`--cdc-at-top-level:-->;`,
`--semicolon-not-top-level:(;);`,
`--curly-not-top-level:foo({bar});`,
`--cdo-not-top-level:(<!--);`,
`--cdc-not-top-level:(-->);`,
`--ampersand-preserved:foo & bar;`
Expand Down
Loading