-
-
Notifications
You must be signed in to change notification settings - Fork 55
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
Presets on uno.config.ts nuxt #154
Comments
Are you creating separate |
I was noticing this too, if you have the presets already configured inside your UnoCSS config it looks like the Anu one gets overwritten. You can test it in this reproduction link, but here's what it happens: 1. As per reproduction link: I have to specify the imports and the preset parameters to make Anu work correctly.hypothetical import { presetAnu, presetIconExtraProperties } from 'anu-vue';
import { presetThemeDefault } from '@anu-vue/preset-theme-default';
import {
defineConfig,
presetAttributify,
presetIcons,
presetTypography,
presetUno,
presetWebFonts,
transformerDirectives,
transformerVariantGroup,
} from 'unocss';
export default defineConfig({
shortcuts: [
[
'btn',
'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
],
[
'icon-btn',
'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600',
],
],
presets: [
presetUno(),
presetAttributify(),
presetIcons({
cdn: 'https://esm.sh/',
scale: 1.2,
extraProperties: presetIconExtraProperties,
}),
presetTypography(),
presetWebFonts({
fonts: {
sans: 'DM Sans',
serif: 'DM Serif Display',
mono: 'DM Mono',
},
}),
// anu-vue preset
presetAnu(),
// default theme preset
presetThemeDefault(),
],
include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
transformers: [transformerDirectives(), transformerVariantGroup()],
}); 2. removing Anu imports and presets.from the hypothetical unocss.config.ts lets remove the imports and presets, while leaving the rest as is: import {
defineConfig,
presetAttributify,
presetIcons,
presetTypography,
presetUno,
presetWebFonts,
transformerDirectives,
transformerVariantGroup,
} from 'unocss';
export default defineConfig({
shortcuts: [
[
'btn',
'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
],
[
'icon-btn',
'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600',
],
],
presets: [
presetUno(),
presetAttributify(),
presetIcons({
cdn: 'https://esm.sh/',
scale: 1.2,
}),
presetTypography(),
presetWebFonts({
fonts: {
sans: 'DM Sans',
serif: 'DM Serif Display',
mono: 'DM Mono',
},
}),
],
include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
transformers: [transformerDirectives(), transformerVariantGroup()],
});
3. If I decide to delete the presets entirelyIt happened that only once I was able to make it work (idk) in stackblitz without any preset applied, but I'm not able to anymore. import {
defineConfig,
presetAttributify,
presetIcons,
presetTypography,
presetUno,
presetWebFonts,
transformerDirectives,
transformerVariantGroup,
} from 'unocss';
export default defineConfig({
shortcuts: [
[
'btn',
'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
],
[
'icon-btn',
'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600',
],
],
include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
transformers: [transformerDirectives(), transformerVariantGroup()],
}); Since I was retrieving the icons via CDN, and I've deleted the presets entirely, they don't display at all and the ASwitch brakes completely: Currently I didn't have time to test other components, but I think that it will be a similar story. |
@Sandros94 thank you a lot! This is necessary: // anu-vue preset
presetAnu(),
// default theme preset
presetThemeDefault(), |
Yes they used to be in the doc till @jd-solanki and @cpreston321 removed them to provide a better support for nuxt in #108. Personally I would have liked a way to configure and use Anu without having to create a UPDATE: I finished reading the PR, and probably found one of the issue that cpreston321 was talking about (include not correctly working for unocss), and that is one of the reason why we could still need to use |
@andersonfelix if you are creating seperate uno.config.ts file then you need to import and register anu & theme default preset as shown in normal vuejs installation. However, if you are configuring uno via nuxt.config.ts then it will be auto included/merged. @cpreston321 if someone is creating uno.config.ts file then they have to explicitly import and register anu & theme default preset for nuxt, right? |
I was preparing an example for #155 and while doing so I erroneously blocked unocss from loading some css resets and magically Anu was able to load correctly (but of course other unocss feature stopped working). You could look here, besically up untill this commit I was extending another nuxt project, where the unocss was configured inside This is more a stream of thoughts and backlog. I preferred to share it, since In the stackblitz repro you can clearly see that Anu works, its only the styles that brakes. |
Hi @Sandros94 I tried settings Can you please confirm with fresh unocss + vue project without anu? |
I can already confirm this for a unocss + nuxt project. This is probably why we need to manually ad anu ones too. Its more like a unocss limitation |
Thanks, @Sandros94 for confirmation. I've added this note in the docs in this commit. |
When I put
presets: []
on uno config breaks the theme."@anu-vue/nuxt": "^0.13.1"
Any suggestion?
The text was updated successfully, but these errors were encountered: