Problem

I have setup PHP Flasher with Webpack Encore in Symfony 6.x, but I noticed when I wanted to add a theme for SweetAlert2, the theme styles were getting overridden by some inline CSS that flasher had added to the DOM.

Example code

main.js

import Swal from 'sweetalert2'
global.Swal = Swal;

import flasher from '@flasher/flasher';
global.flasher = flasher;

import sweetalert from '@flasher/flasher-sweetalert';
global.sweetalert = sweetalert;

flasher.yaml

flasher:
  default: sweetalert
  root_script: ~
  use_cdn: false
  auto_translate: true
  auto_render: true
  flash_bag:
    enabled: true
    mapping:
      success: [ 'success' ]
      error: [ 'error', 'danger' ]
      warning: [ 'warning', 'alarm' ]
      info: [ 'info', 'notice', 'alert' ]
  filter_criteria:
    limit: 5

  presets:
    login:
      type: 'info'
      message: 'Welcome back'
      options:
        toast: true
        position: bottom-end
        showConfirmButton: false
        timer: 30000

    logout:
      type: 'info'
      message: 'Have a nice day'
      options:
        toast: true
        position: bottom-end
        showConfirmButton: false
        timer: 30000

flasher_sweetalert:
  scripts: ~

Result in DOM

I'm not sure why, and what the purpose is of this, but I'm getting atleast 4 additional style elements added to the DOM.

• Three entries starting with .swal2-popup.swal2-toast (See line 4031 and line 4038):

• One entry starting with .fl-main-container (see this code):

Note: All these entries are added after my existing application <style> tags, and before the first <script> tag, so it will always override additional SweetAlert2 theme styles.

Desired solution

As the additional/unnecessary CSS styling added to the DOM breaks theme styling for SweetAlert2, I want to know how I can prevent flasher from adding these styles. Is this maybe a config setting, or something I have to do when importing the modules, or is this is a bug?

I propose to separate JS and CSS for all the packages (not just SweetAlert2).

I'm using webpack 5 for my project and in case anyone needs this. I was able to get a global instance of Flasher working using the following method.

webpack config:

module: {
        rules: [
            {
                test: require.resolve("toastr"),
                loader: "expose-loader",
                options: {
                    exposes: ["toastr"],
                },
            },
            {
                test: require.resolve("@flasher/flasher"),
                loader: "expose-loader",
                options: {
                    exposes: ["Flasher"],
                },
            }
        ]
}

in app.js:

import toastr from "toastr";

// toastr defaults
toastr.options.timeOut = 10000;
toastr.options.closeButton = true;
toastr.options.escapeHtml = true;
toastr.options.progressBar = true;
toastr.options.closeOnHover = false;

import { default as Flasher } from "@flasher/flasher";
import { default as ToastrFactory } from "@flasher/flasher-toastr";
Flasher.getInstance().addFactory("toastr", new ToastrFactory());