Repository navigation
Arbitrary variants - #8299
Arbitrary variants#8299
Conversation
| yield regex.pattern([ | ||
| // Variants | ||
| /((?=([^\s"'\\\[]+:))\2)?/, | ||
| /((?=([^\s"'\\]+:))\2)?/, |
There was a problem hiding this comment.
This will require some work to make it exactly right
There was a problem hiding this comment.
lol yep I was thinking about this. I'll throw this change against my new candidate refactor to see what breaks…
I had already tested support for arbitrary variant syntax (at least detection wise) in the form of [foo]:bar
There was a problem hiding this comment.
ngl I love this idea so much
There was a problem hiding this comment.
I pushed a regex tweak to fix the tests 👍👍
With the new `addVariant` API, we have a beautiful way of creating new
variants.
You can use it as:
```js
addVariant('children', '& > *')
```
Now you can use the `children:` variant. The API uses a `&` as a
reference for the candidate, which means that:
```html
children:pl-4
```
Will result in:
```css
.children\:pl-4 > * { .. }
```
Notice that the `&` was replaced by `.children\:pl-4`.
We can leverage this API to implement arbitrary variants, this means
that you can write those `&>*` (Notice that we don't have spaces) inside
a variant directly. An example of this can be:
```html
<ul class="[&>*]:underline">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
```
Which generates the following css:
```css
.\[\&\>\*\]\:underline > * {
text-decoration-line: underline;
}
```
Now all the children of the `ul` will have an `underline`. The selector
itself is a bit crazy since it contains the candidate which is the
selector itself, it is just escaped.
This still requires some work to the `defaultExtractor` to make sure it all works with existing code.
339939a to
7d49e55
Compare
1e0099a to
02404ac
Compare
|
This is rad! 🤙 |
|
Wow, just requested this feature about one month ago and now is coming here. Timing couldn't be better. I have a few ideas in my head to create some plugins with this. Keep up the hard work 🔥 🔥. Amazing! |
|
Added a failing test for attribute selectors like:
I think this one is going to be kind of tricky — we need to reliable extract that candidate from the template but to do that we need to worry about bracket balancing. We'll need to support multiple pairs too so the implementation probably can't be as naive as I'd wish:
|
We can now split on any character at the top level with any nesting. We don’t balance brackets directly here but this is probably “enough”
This means that the separator has to be ouside of balanced brackets
031604d to
a4cff3c
Compare
11 participants
With the new
addVariantAPI, we have a beautiful way of creating new variants.You can use it as:
Now you can use the
children:variant. The API uses a&as a reference for the candidate, which means that:Will result in:
Notice that the
&was replaced by.children\:pl-4.We can leverage this API to implement arbitrary variants, this means that you can write those
&>*(Notice that we don't have spaces) inside a variant directly. An example of this can be:Which generates the following css:
Now all the children of the
ulwill have anunderline. The selector itself is a bit crazy since it contains the candidate which is the selector itself, it is just escaped.