Using :is(a, b) selector in style tag breaks

[webgoto]

Help us to manage our issues by answering the following:

1. Describe your issue:

My css
p :is(a, span){color: red;}

is output like this
my-tag p :is(a,[is="my-tag"] p :is(a,my-tag span),[is="my-tag"] span){color: red;}

Content that should be output
my-tag p :is(a, span),[is="my-tag"] p :is(a, span){color: red;}

I think the selector is split due to the inclusion of ","
I think it also happens with :not(), :where(), etc.

2. Can you reproduce the issue?
   https://plnkr.co/edit/869A7mlEqgTxHJxA?preview

3. On which browser/OS does the issue appear?
   windows10
   Chromium: 105.0.5195.102

4. Which version of Riot does it affect?
   riot 7.0.6
   riot 3.13.2
   Please also fix v3

5. How would you tag this issue?

• Question
• Bug
• Discussion
• Feature request
• Tip
• Enhancement
• Performance

[webgoto]

Thank you for your quick fix.

I looked at the current fix and there might be a problem

I believe that if you use "is()" multiple times, it will only reflect on the right side.

For example using this selector
.foo :is(.bar,.baz) :is(.d, .e)

Isn't the output like this?
my-tag .foo :is(.bar,.baz),[data-is="my-tag"] .foo :is(.bar,.baz) :is(.d, .e)

I apologize if I'm wrong.

[GianlucaGuarini]

@webgoto no the patch works with your example as well. I have added a test for it just in case. Thank you for your feedback

[webgoto]

Thank you for confirming

[webgoto]

sorry. An incorrect example is used for testing.

For example using this selector
.foo :is(.bar,.baz) :is(.d, .e)

buggy output(used for testing)
my-tag .foo :is(.bar,.baz),[is="my-tag"] .foo :is(.bar,.baz) :is(.d, .e)

correct output
my-tag .foo :is(.bar,.baz) :is(.d, .e),[is="my-tag"] .foo :is(.bar,.baz) :is(.d, .e)

[GianlucaGuarini]

Thank you for your feedback I think now it should work fine.

[GianlucaGuarini]

This has been fixed in riot@7.0.7

[webgoto]

I'm sorry many times.
I think there is a bug when writing a normal selector after ":is".
(v7.0.7)

example

span :is(p, b) a {}

[GianlucaGuarini]

Thank you I will have a look at it

[exside]

I think this broke my app, potential reason: because i'm using escaped colons (:) e.g. \: for my utility classes, like this:

		.scale\:frame > * {
			/* 4 */
			margin: auto;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		.scale\:img {
			/* 5 */
			display: block;
			height: auto;
			max-width: 100%;
		}

possible? will quickly revert to last version of riot and confirm. It might be an edge case (don't know how many other devs write CSS classes like this, but it's valid CSS and shouldn't break imho)

the suspicion that something changed in riot came up bc my production builds are fine, but there i'm using a local copy of riot (e.g. not the newest one) while for my dev environment i'm using latest.

EDIT: Confirmed, switching back to 7.0.6 fixes the issue.

[GianlucaGuarini]

Fixed in riot@7.1.0 thank you for submitting this issue

[exside]

Thank you for fixing it, works again, awesome!