Custom CSS rule to apply icon class in tailwind.css not working after 2.18 release

jrutila commented 3 months ago

Environment

Nuxt project info:

Operating System: Linux
Node Version: v18.20.3
Nuxt Version: 3.12.4
CLI Version: 3.12.0
Nitro Version: 2.9.7
Package Manager: pnpm@8.15.6
Builder: -
User Config: modules, compatibilityDate
Runtime Modules: @nuxt/ui@2.18.3
Build Modules: -

Version

v2.18.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-ktbnby?file=README.md,app.vue,assets%2Fcss%2Ftailwind.css

Description

Before the nuxt-icon rewrite with nuxt-ui 2.18.0 you could write following kind of custom css into assets/css/tailwind.css:

@layer utilities {
  .i-lb {
    @apply scale-x-[-1];
    @apply i-heroicons-light-bulb;
  }
}

After 2.18.0 this breaks as the i-heroicons-light-bulb class does not exist anymore in that context.

Additional context

The goal is to create a custom icon (in this case i-lb) that uses existing icon but adds something more necessary, like that scale apply as an example.

Logs

[plugin:vite:css] [postcss] /home/projects/nuxt-ui/assets/css/tailwind.css:11:5: The `i-heroicons-light-bulb` class does not exist. If `i-heroicons-light-bulb` is a custom class, make sure it is defined within a `@layer` directive.

benjamincanac commented 3 months ago

It doesn't work even with the class i-heroicons:light-bulb?

jrutila commented 3 months ago

No, I tried that already. Updated the reproduction with this, too.

benjamincanac commented 3 months ago

It's kind of normal actually since we removed @egoist/tailwindcss-icons. Maybe you can leverage aliases to achieve the same result? https://github.com/nuxt/icon?tab=readme-ov-file#icon-customization

jrutila commented 3 months ago

I will try the aliasing in the repro env.

jrutila commented 3 months ago

I tried it, and it should work. This is the correct way to alias an icon name, now.

export default defineAppConfig({
  icon: {
    aliases: {
      lb: 'heroicons:light-bulb',
    },
  },
});

The downer is that I can't attach any other tailwind classes into the alias. Do you already have some idea to do it neatly?

benjamincanac commented 3 months ago

Well, the code you wrote above should work without the icon apply.

Aditya-Raj-Tiwari commented 3 months ago

same here does not work

nuxt / ui