feature: support configure css variables generation location

[loieee]

support configure css variables generation location

Description

closes #3442 support configure css variables generation location, root element(html) or new style tag.

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

[loieee]

This is look great.

We also need to handle it in nuxt/packages. So instead of htmlAttrs we need to use content in useHead. Otherwise both style tag and html attribute will be rendered.

No, html arribute is default. It just adds an optional configuration so that we can choose to transfer the color variables to a new style tag. I don't think that I can decide where the color variables are generated (this decision should be done the vuestic-ui's owner). so I just add new optional configuration for those who need it.

[loieee]

I got some screenshot for this.

1. before, all color variables in the root (html) attributes.

2. when configuration styleTag is true. It's look tidy better.

3. and the color variable will be placed in the new generated style tag.

[m0ksem]

I added some changes related to nuxt, but there is still a small bug.

We render style tag in nuxt using useHead, but in vuestic-ui we render the same style tag using our utility. This is why we have two similar style tags in nuxt application. I think we should be able to prevent rendering any kind of style tags in ui, so it can be handled in nuxt (or another ssr solution).

Will make a different issue for that. Looks awesome for SPA btw. Thanks!

[m0ksem]

@shiina7, would you like to write docs for this feature under Services/ColorConfig?

[loieee]

@shiina7, would you like to write docs for this feature under Services/ColorConfig?

@m0ksem sure, I'd love it! I will finish it in two days (before Thursday). Thank you for your additions for nuxt and merge request.

[asvae]

@shiina7 does it make any point to keep previous solution and not just keep yours? (and get rid of styleTag)

[loieee]

@shiina7 does it make any point to keep previous solution and not just keep yours? (and get rid of styleTag)

@asvae my first point is to expend it, not change. beacuse I think that I can't decide it, but you(author) can. If you think it's okay to just keep the new style tag, I'm glad to change it. But I think it's up to you to decide it. That's why added an option to configuration.

[loieee]

@shiina7 does it make any point to keep previous solution and not just keep yours? (and get rid of styleTag)

@asvae my first point is to expend it, not change. beacuse I think that I can't decide it, but you(author) can. If you think it's okay to just keep the new style tag, I'm glad to change it. But I think it's up to you to decide it. That's why added an option to configuration.

Perhap someone needs this option and we can keep, If we want keep new tag we can set the styleTag to true by default. BTW

[m0ksem]

I think we can remove previous solution. It was made asap and not documented, so we can just drop it.

[loieee]

I think we can remove previous solution. It was made asap and not documented, so we can just drop it.

Okay, got it. It's will be change it tomorrow.

[loieee]

I think we can remove previous solution. It was made asap and not documented, so we can just drop it.

Okay, got it. It's will be change it tomorrow.

@m0ksem @asvae I removed the styleTag option and only support generated css variables to style tag now. review it please, maybe it can be included in the next version.

[asvae]

It's actually great to have in context of 1.7.0, as if something would break - users would probably somewhat expect it :D.

Thanks @shiina7 🤗