-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Arbitrary variants #8299
Arbitrary variants #8299
Conversation
src/lib/defaultExtractor.js
Outdated
@@ -19,7 +19,7 @@ export function defaultExtractor(content) { | |||
function* buildRegExps() { | |||
yield regex.pattern([ | |||
// Variants | |||
/((?=([^\s"'\\\[]+:))\2)?/, | |||
/((?=([^\s"'\\]+:))\2)?/, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This will require some work to make it exactly right
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ngl I love this idea so much
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
Hi, may I ask when will tailwindcss release next version contain this major feature ? |
Is it possible to specify a class name? Sometimes it is not possible to change all of them |
If you can specify the class name, in vue will not need to write:: v-deep and so on, you can directly modify the style of the UI library, which will greatly improve the efficiency of development |
woah! how cool 🚀 |
Cool, 👍 [&_i]:text-pink-100 👌 |
@ivanchenhz we do, but i .some class {} You have to escape the |
@RobinMalfait thanks for confirming, and yes it works, 👍 😄
|
@RobinMalfait |
Nice work! I suppose can shorten to (FYI for others), in const plugin = require("tailwindcss/plugin");
plugins: [
plugin(function({ addVariant }) {
addVariant('ch', '& > *')
})
] |
Having issues with Arbitrary variants not showing in Intellisense: |
With the new
addVariant
API, 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
ul
will have anunderline
. The selector itself is a bit crazy since it contains the candidate which is the selector itself, it is just escaped.