Disable automatic styles added by Swup Progress plugin

[ionurboz]

I'm using the Swup Progress plugin (https://github.com/swup/progress-plugin).

The plugin automatically:

<style data-progressbar-styles="" data-swup-theme="">
.progress-bar {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: black;
z-index: 9999;
transition:
transform 300ms ease-out,
opacity 150ms 150ms ease-in;
transform: translate3d(0, 0, 0) scaleX(var(--progress, 0));
transform-origin: 0;
}
</style>

This inserts the style inline. But this overrides my own custom styles, and the style breaks down.

I also don't want to add any extra code (<style>). I want to manage the styling entirely. Just dynamically changing "--progress" is sufficient.

Is this possible?

[hirasso]

@ionurboz Please stop adding 👀 or any other reactions to your own issues. Thank you.

[daun]

You could set a custom class name that doesn't exist. Then it shouldn't conflict with your markup.

{
  className: 'class-that-does-not-exist'
}

[ionurboz]

Thanks, my goal is to disable the inline <style> and also style the swup's progress bar. I can't style it if I give it another selector.

const progressPlugin = new SwupProgressPlugin({...});
progressPlugin.progressBar.styleElement = "";

I came up with a solution like this, but I'm not sure if it's really the right way.

I noticed that when I added the empty string styleElement to the swup like this { plugins: [ progressPlugin ] }, nothing was added to the DOM.

Do you think this is a good solution?

[daun]

Oh, right. I guess your solution works. Or you could just overwrite the styles with your own. I wouldn‘t be against having the stylesheet be optional if you submit a PR.

[hirasso]

@ionurboz alternatively, if you only want to overwrite some styles without the need for an additional inline <style> tag, you can do so like this in your own CSS:

.progress-bar.progress-bar {
    top: auto;
    bottom: 0;
}

Using .classname.classname is a simple alternative to using ! important throughout your overrides.