Resulting css rule for bottom-center container is syntactically wrong

[maninak]

Versions

• 1.7.6

Describe the bug

When not using the css import directly, but scss is preferred, i.e.:

// when not this in `main.ts` (or whichever file)
import 'vue-toastification/dist/index.css'

// and instead doing this in `_vue-toastification.override.scss` (or whichever file)
@import 'vue-toastification/src/scss/_toastContainer'; // <-- I guess this is the 

The resulting css is not valid which brakes the positioning of the toast if bottom-center placement is chosen.

@media only screen and (min-width: 600px)
.Vue-Toastification__container.top-center, .Vue-Toastification__container.bottom-center {
  left: 50%;
  margin-left: -600px !important/2; // <-- this is not valid syntax
}

Expected behavior

1. The resulting scss should be syntactically valid. Probably along the lines of:

@media only screen and (min-width: 600px)
.Vue-Toastification__container.top-center, .Vue-Toastification__container.bottom-center {
  left: 50%;
  margin-left: calc(-600px / 2) !important;
}

2. If I choose to import styles selectively via scss, I don't want to have to import the css file too!

Steps to reproduce

Reproduction demo. Steps:

1. Install normally
2. Set up plugin
3. ...

Your Environment

Environment Info:

  System:
    OS: Linux 4.15 Linux Mint 19.1 (Tessa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 14.3.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.97
    Firefox: 77.0.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.4.1 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.4.1 
    @vue/cli-plugin-babel: ^4.4.1 => 4.4.1 
    @vue/cli-plugin-router: ^4.4.1 => 4.4.1 
    @vue/cli-plugin-typescript: ^4.4.1 => 4.4.1 
    @vue/cli-plugin-unit-jest: ^4.4.1 => 4.4.1 
    @vue/cli-plugin-vuex: ^4.4.1 => 4.4.1 
    @vue/cli-service: ^4.4.1 => 4.4.1 
    @vue/cli-shared-utils:  4.4.1 
    @vue/component-compiler-utils:  3.1.2 
    @vue/eslint-config-typescript:  5.0.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: ^1.0.0-beta.31 => 1.0.0-beta.31 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue:  6.2.2 
    jest-serializer-vue:  2.0.2 
    typescript: ~3.9.3 => 3.9.3 
    vue: ^2.6.11 => 2.6.11 
    vue-eslint-parser:  7.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-jest:  3.0.5 
    vue-loader:  15.9.2 
    vue-router: ^3.1.6 => 3.2.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vue-toastification: ^1.7.6 => 1.7.6 
    vuex: ^3.1.3 => 3.4.0 
  npmGlobalPackages:
    @vue/cli: 4.3.1

Additional context

import { POSITION } from 'vue-toastification'
import { PluginOptions } from 'vue-toastification/dist/types/src/types'

export const VUE_TOASTIFICATION_CONFIG: PluginOptions = {
  position: POSITION.BOTTOM_CENTER,
  closeOnClick: true,
  showCloseButtonOnHover: true,
  hideProgressBar: true,
  transition: 'Vue-Toastification__fade',
  transitionDuration: {
    enter: 100,
    leave: 700,
  },
  maxToasts: 3,
} as const

import Vue from 'vue'
import Toast from 'vue-toastification'
import * as firebase from 'firebase/app'
import { FIREBASE_CONFIG, VUE_TOASTIFICATION_CONFIG } from '@/config'
import { router } from '@/router'
import { rootStore } from '@/store'

import App from './App.vue'

import 'firebase/auth'
import 'vue-toastification/dist/index.css'

Vue.config.productionTip = false

Vue.use(Toast, VUE_TOASTIFICATION_CONFIG)

firebase.initializeApp(FIREBASE_CONFIG)
firebase.auth().languageCode = process.env.VUE_APP_I18N_LOCALE

let app: Vue | undefined = undefined
// ensure firebase is booted up
firebase.auth().onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      store: rootStore,
      render: (h) => h(App),
    }).$mount('#app')
  }
})

// and instead doing this in `_vue-toastification.override.scss` (or whichever file)
// Overrides plugin defaults
// Source: https://github.com/Maronato/vue-toastification/blob/master/src/scss/_variables.scss
@use 'sass:color';

@import '@/styles/constants/_colors';

$vt-toast-min-width: 334px !important;
$vt-toast-min-height: 48px !important;
$vt-toast-max-width: 600px !important;
$vt-toast-max-height: 800px !important;

$vt-color-default: color.scale($color-va-blau-100, $lightness: 85%) !important;
$vt-text-color-default: color.scale($color-va-blau-100, $lightness: -15%) !important;
$vt-color-info: color.scale($color-jet, $lightness: 85%) !important;
$vt-text-color-info: $color-jet !important;
$vt-color-success: color.scale($color-va-gruen-100, $lightness: 65%) !important;
$vt-text-color-success: color.scale($color-va-gruen-100, $lightness: -50%) !important;
$vt-color-warning: color.scale($color-va-gelb-100, $lightness: 65%) !important;
$vt-text-color-warning: color.scale($color-va-gelb-100, $lightness: -50%) !important;
$vt-color-error: color.scale($color-red, $lightness: 80%) !important;
$vt-text-color-error: color.scale($color-red, $lightness: -20%) !important;

.Vue-Toastification__toast {
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-family: 'voestalpine', Arial, Helvetica, sans-serif !important;
  font-weight: 300;

  &:hover .Vue-Toastification__close-button {
    color: inherit !important;
  }
}

.Vue-Toastification__toast--default .Vue-Toastification__icon {
  display: none;
}

@import 'vue-toastification/src/scss/_variables';
@import 'vue-toastification/src/scss/_toastContainer'; // <-- I guess this is the important bit in this bug report
@import 'vue-toastification/src/scss/_toast';
@import 'vue-toastification/src/scss/_closeButton';
@import 'vue-toastification/src/scss/_progressBar';
@import 'vue-toastification/src/scss/_icon';
@import 'vue-toastification/src/scss/animations/_fade';

NOTES:

Loving this library and how the author goes about it, maintenance, perf, api and stuff. Keep it up! :clap:

[Maronato]

Hello! Thanks for reporting :)

The issue seems to be your use of !important on your variables. Are you sure you need to set it to important? They are defined with default, so just declaring them should be enough.

More specifically, it's due to this line: https://github.com/Maronato/vue-toastification/blob/96c6a5f4e630a5ad1fe9cdbad15aa8ef308a9a00/src/scss/_toastContainer.scss#L54

You can see that by adding !important to the variable declaration, the syntax may become invalid. You can probably remove it and everything should work fine.

[maninak]

I figured as much, that's why I listed the full file of my overrides.

And yeah, I'm aware of the !default specifier, but (I guess I was doing something wrong?) I couldn't get the styles to override with my values without using that ugly !important.

For some reason now that I tried again, style overrides worked smoothly without !important (perhaps some refactoring I added after opening the bug report?)

FWIW here's my updated overrides file:

@use 'sass:color';

@import '@/styles/constants/_colors';

$vt-toast-min-width: 334px;
$vt-toast-min-height: 48px;
$vt-toast-max-width: 600px;
$vt-toast-max-height: 96px;

$vt-color-default: color.scale($color-va-blau-100, $lightness: 85%);
$vt-text-color-default: color.scale($color-va-blau-100, $lightness: -15%);
$vt-color-info: color.scale($color-jet, $lightness: 85%);
$vt-text-color-info: $color-jet;
$vt-color-success: color.scale($color-va-gruen-100, $lightness: 65%);
$vt-text-color-success: color.scale($color-va-gruen-100, $lightness: -50%);
$vt-color-warning: color.scale($color-va-gelb-100, $lightness: 65%);
$vt-text-color-warning: color.scale($color-va-gelb-100, $lightness: -50%);
$vt-color-error: color.scale($color-red, $lightness: 80%);
$vt-text-color-error: color.scale($color-red, $lightness: -20%);

$vt-font-family: 'voestalpine', Arial, Helvetica, sans-serif;

.Vue-Toastification__toast {
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-weight: 300;

  &:hover .Vue-Toastification__close-button {
    color: inherit;
  }
}

.Vue-Toastification__toast--default .Vue-Toastification__icon {
  display: none;
}

@import 'vue-toastification/src/scss/_variables';
@import 'vue-toastification/src/scss/_toastContainer';
@import 'vue-toastification/src/scss/_toast';
@import 'vue-toastification/src/scss/_closeButton';
@import 'vue-toastification/src/scss/_progressBar';
@import 'vue-toastification/src/scss/_icon';
@import 'vue-toastification/src/scss/animations/_fade';

And of course I am now able to remove the offending

import 'vue-toastification/dist/index.css'

with no regressions, which was my goal.

As far as I'm concerned this is resolved, feel free to close the issue. Thank you for your help!

[Maronato]

Great! If you find any other issues along the way, don't hesitate to report back :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.