v0.9.1 generates wrong css?

[ModyQyW]

https://unocss.dev/play/?html=DwZwDghgdgBAxgGwiEBeARADxALgC4CmmeAtJgugHyEh7AD040lQA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAqrhJQL5xZQQhwDkAV1YBjOnX5JQkWNVoMYAFQAWGEBi48%2BQ0eIC0Neoz0xV6yUgwAPGfExYAhoIA2d7HkLEyACmSpDCnQAXHAA2lT%2B8owsEN4AlJSokUZKZhi%2BEUmmahghfkkFzsCkyjB5mQWoAEa0DgDWkHgwwYhwVi38AAxgVvzkcHQgIfwA7ABsABw9fXAgaMMAnAsATNP9zqTDAIzLnd29-VbO2yv7-HDsFUnsiZWoaA5QdeV3BTUY9Y24zXltHWf9QbDcZTA6zeYCJarMEbba7AFtY4CLanaYXK6oS53LHXOJUAC6HDxQA&css=Q&options=N4IgLgTghgdgzgMwPYQLYgFwKgGzgUwF8g

It seems that v0.9.1 hasn't generated the css var --un-preset-theme-breakpoints-xs but used it.

Am I doing wrong or is this a bug?

[Dunqing]

I think it's a bug, the output should contain all used theme configuration

[ModyQyW]

After I add the support and want to send a PR, I found out that Variables do not work inside media queries and container queries. ... 😅 What a life waste...

[Dunqing]

Ah, Now you can send a PR to avoid breakpoints apply css variables

[ModyQyW]

I can think of 3 possibilities.

1. generates

@media (min-width: 0px){
.xs\:text-xl{font-size:1.25rem;line-height:1.75rem;}
}

instead of

@media (min-width: var(--un-preset-theme-breakpoints-xs)){
.xs\:text-xl{font-size:1.25rem;line-height:1.75rem;}
}

However, this is unexpected if I want different breakpoints for different themes. Another possible way is custom media query which is not launched for now and can not be used here.

2. ignore generations and let users override in their config files.

3. accept the generation for :root and ignore others' generations. I think this one is fine and prefer this one for now.

Which one do you prefer? If I am wrong, please correct me. Thanks! 🙏

[ModyQyW]

I find a new resolution in my case.

https://github.com/ModyQyW/unocss-preset-element-plus/blob/main/src/index.ts#L7-L38

If someone is interested in it, please carry on. Thanks! 🙏

[Dunqing]

Looks like good, you can go ahead