-
-
Notifications
You must be signed in to change notification settings - Fork 812
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
Generate rules at compile that you know you will use dynamically later #511
Comments
There's undocumented safelist feature that do exactly just this. |
Are there are plans to support regexes in the safelist? https://tailwindcss.com/docs/content-configuration#using-regular-expressions |
Lightly reading the source, what I catch is that tailwind's implementation requires a default safelist tokens to be matched against. Also they have extensive config you can reverse into a working class list, so it is pre-generate-able. Since unocss' preset is mostly regex-based, It's quite difficult to pre-generate all the possible classes to be matched against. One api I know to do this is in php faker. You can try to open a PR for js-based implementation. |
There will be infinite possiblity to match a dynamic classes. Regex in safelist is not possible to support. You can use an inline function to generate the combinations you need. |
what if i want to set all of classes in safelist ? |
@im-Qarch I think the issue here is that there is no "all classes", because Uno creates class "on demand", so instead you have to tell explicitely the ones you want to generate, eg
|
I have a
<Button>
component with a prop I callintent: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
which I'd like to use to determine the background color of the button. I feel like I'm using a quite naive approach by using aswitch (intent)
to return strings like"red-500"
or"transparent"
which get added to the markup like so:This works only for background colors that were previously statically generated. My workaround for this is stacking all the classes that I want available at runtime onto a random
<div class="hidden ...">
. This seems like a smelly solution to me; I was wondering if it was a common enough use case to add a config property to define which classes will always be available.Maybe I am missing something though, and there is a more straightforward way to accomplish what I want. Otherwise, I'm a huge fan of unocss so far 👍.
The text was updated successfully, but these errors were encountered: