Generate rules at compile that you know you will use dynamically later

[d11z]

I have a <Button> component with a prop I call intent: '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 a switch (intent) to return strings like "red-500" or "transparent" which get added to the markup like so:

<button class="btn bg-{getBackgroundColor(intent)}" {disabled} class:bg-opacity-50={disabled}>
  <slot/>
</button>

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 👍.

[chu121su12]

There's undocumented safelist feature that do exactly just this.

Playground

[d11z]

Are there are plans to support regexes in the safelist?

https://tailwindcss.com/docs/content-configuration#using-regular-expressions

[chu121su12]

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.

https://github.com/tailwindlabs/tailwindcss/blob/bab689ca8284265f51d5b66a1f3f1007850d97c1/src/lib/setupContextUtils.js#L670-L709 (line 696)

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.

• https://fakerphp.github.io/formatters/numbers-and-strings/#regexify
  • source: https://github.com/FakerPHP/Faker/blob/34d231f7679396ed44c280e1e2b0020d04026160/src/Faker/Provider/Base.php#L493-L552
• https://github.com/icomefromthenet/ReverseRegex

[antfu]

Are there are plans to support regexes in the safelist?

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.

[im-Qarch]

Are there are plans to support regexes in the safelist?

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 ?

[maelp]

@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

["red", "green", "purple"].map((color) => `bg-${color}-500`)