Presets on uno.config.ts nuxt

[andersonfelix]

When I put presets: [] on uno config breaks the theme.

"@anu-vue/nuxt": "^0.13.1"

export default defineConfig({
  include: [/.*\/anu-vue\.js(.*)?$/, "./**/*.vue", "./**/*.md"],
  presets: [
     presetTypography(),
     presetWebFonts({
      fonts: {
        sans: "DM Sans",
        serif: "DM Serif Display",
        mono: "DM Mono",
        satisfy: "Satisfy",
      },
  ]
})

Any suggestion?

[jd-solanki]

Are you creating separate uno.config.ts file?

[sandros94]

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 unocss.config.ts:

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()],
});

Since in dark mode the ASwitch bg blends too much here is another screenshot in light mode:

3. If I decide to delete the presets entirely

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

[andersonfelix]

@sandros94 thank you a lot!

This is necessary:

// anu-vue preset
presetAnu(),

// default theme preset
presetThemeDefault(),

[sandros94]

@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.
I'm still reading the changes and discussion of that PR, so I'm still not sure if what I understood was intended or I'm off track entirely.

Personally I would have liked a way to configure and use Anu without having to create a uno.config.ts, since that wouldn't be bundled with nuxt.config.ts using the nuxt extend feature.

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 uno.config.ts.

[jd-solanki]

@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?

[sandros94]

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 unocss.config.ts and since the unocss.config didn't extent it could have been the key factor to make Anu visually render.

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.

[jd-solanki]

Hi @sandros94

I tried settings presets: [] and found that unocss also can't generate utility types without that line. So I guess when we set presets option to empty array UnoCSS stops auto assigning default presets like uno's default & anu.

Can you please confirm with fresh unocss + vue project without anu?

[sandros94]

Can you please confirm with fresh unocss + vue project without anu?

I can already confirm this for a unocss + nuxt project.
I did notice this behavior when setting presets to an empty array while testing stuff. This is especially true for presets like typography and webfonts, where they are included in the unocss/nuxt package but only usable if they are defined in the presets array.

This is probably why we need to manually ad anu ones too. Its more like a unocss limitation

[jd-solanki]

Thanks, @sandros94 for confirmation. I've added this note in the docs in this commit.