broken style since 1.2.0

[ricardo17coelho]

v.1.5.0

v.1.2.1

[benjivm]

#88

[sadeghbarati]

Hi, can you guys provide a Stackblitz or Codesandbox playground?

[ricardo17coelho]

I use vue-sonnar in a vue, vuetify 3 app.

Looks like the problem is the paddingthat is not applied properly because vuetify has this css:

* {
    padding: 0;
    margin: 0;
} 

this avoids the vue-sonnar padding to be applied:

padding: 16px;

=> https://github.com/xiaoluoboding/vue-sonner/blob/main/packages/styles.css#L92

But this is strange. I have only 1 project with this issue. All others are OK.
I need to invesigate deeper..

[jstarfruits]

@sadeghbarati I believe this issue may be related to the Vite environment. The CSS generated by vue-sonner is placed before the CSS generated by Vite, causing the site's CSS to overwrite the padding styles. Increasing the specificity by using !important or nesting the class selectors should help stabilize the behavior.

[ricardo17coelho]

Funny. In Production is fine.
But in DEV mode looks like the screenshot.
Maybe @jstarfruits has right

[jstarfruits]

@sadeghbarati
I have created a repository to reproduce the issue mentioned in #89. The reproduction code is available at test_vue_sonner.

Steps to reproduce:

1. Clone the repository:

   git clone https://github.com/jstarfruits/test_vue_sonner.git
   cd test_vue_sonner

2. Install dependencies:

   composer install
   yarn install

3. Run the development servers in separate terminals:

   • Laravel server:

     php artisan serve --port=8888

   • Vite development server:

     yarn run dev

4. Access the application at http://localhost:8888 to view the issue.

[sadeghbarati]

The problem is because of inline-css feature we added in vite.config

In order to make it work in Nuxt project without using Nuxt transpile option in nuxt.config we inject CSS in the head tag

Which may cause problems in dev mode for some of the projects,

We need time to investigate to see if it's possible to bundle vue files without transpile them into js/cjs

nuxt/nuxt#15321 (comment)