Separate prefixed pseudos in nested rules to avoid CSSOM injection failures

[quantizor]

Based on my understanding of rulesheet, I think the @media {::placeholder{}} combo should be split into separate rules.

[quantizor]

@thysultan if you have any pointers for solving this, I'd be happy to try. Just haven't had much luck so far.

[Andarist]

I think that the fix would have to be applied here and somehow you'd have to recursively copy the parent rules through their .root (if there are any parent rules) and put that single prefixed rule as the "leaf" .children

[Andarist]

Almost managed to fix it - there is just one failing test case:

stylis/test/Middleware.js

Lines 84 to 87 in 5687d85

	expect(serialize(compile(`textarea::placeholder{font-size:14px;@media{font-size:16px;}}`), middleware([prefixer, stringify]))).to.equal([
	`textarea::-webkit-input-placeholder{font-size:14px;}textarea::-moz-placeholder{font-size:14px;}textarea:-ms-input-placeholder{font-size:14px;}textarea::placeholder{font-size:14px;}`,
	`@media{textarea::-webkit-input-placeholder{font-size:16px;}textarea::-moz-placeholder{font-size:16px;}textarea:-ms-input-placeholder{font-size:16px;}textarea::placeholder{font-size:16px;}}`
	].join(''))

This test tests the output and not what is passed to rulesheet (rulesheet is just a plugin), values passed to rulesheet (I tested this manually) are OK.

I'm not sure how to resolve this conflict because prefixing of those pseudo rules happens transitively here:

stylis/src/Serializer.js

Line 35 in 5687d85

return strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''

As we can see - this serializes children and uses that as part of the value. This happens when stringifying @media rule and the serialized children land within { ... }. The problem is that if we return the prefixed stuff here:

stylis/src/Middleware.js

Line 57 in 5687d85

return !element.root ? value : ''

then we end up with outputs like:

@media (min-width: 500px){a:-moz-read-only{color:red;}}
@media (min-width: 500px){@media (min-width: 500px){a:-moz-read-only{color:red;}}a:read-only{color:red;}}

We can see here that the prefixed and stringified top-level rule becomes part of the children of that top-level rule which is not what we want to achieve here.

This problem originates in the assumption that the prefixed things always become siblings of what they "cloned" but that's no longer true.

cc @thysultan

[quantizor]

Ping @thysultan, could you spare some time to look at this one? Thank you!

[thysultan]

Yes, i'll take a look at this, this weekend.

[thysultan]

@Andarist So the latest commit fixes the issue, but the order of rules are: changed to unprefixed then prefix for ::placeholder.

[thysultan]

Ok, i think i managed to preserve the prefix-first order now.

[quantizor]

Thank you @thysultan, your code wizardry is appreciated as always

[joacub]

this changes cause this error:

[Andarist]

Please share a repro case