Bootstrap scss toCSS minify btn-close

support
1

I’m not sure if this is a bootstrap issue or hugo, but when my scss files are compiled it seems to remove some background properties for bootstrap’s .btn-close class. I recently upgraded from bootstrap v 5.2 (working) to v 5.3.1 and they made some property changes.
The scss file:
background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat;
The scss compiled and minified:
background: var(--bs-btn-close-bg)/1em no-repeat;

Bootstrap v 5.2
scss:
background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat;
compiled and minified:
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")50%/1em no-repeat;

The compiled and minified styles is copied from google devtools. Using devtools if I add 50% before /1em no-repeat; it works.

2

Huh, I have exactly the same issue as you, but with Boostrap 5.3. Almost like we are actually compiling in a different version of Bootstrap than we think we are but I can’t figure it out.

3

Assuming without hugo 5.3 works fine.

If I were you I would add the hugo context.

  • layout of sources
  • code to include
  • simple example
4

Funny thing is that I’m not using hugo at all, I just Googled the compiled CSS line and stumbled onto here, I’m compiling scss and then minifying it the same library that hugo uses to minify css. It’s a problem with the minifier. Once I figure out the fix, I’ll post it.

5

Maybe this one

6

Yup, minify library was the culprit, it was solved very shortly after this issue was created here actually: CSS background attribute bug · Issue #603 · tdewolff/minify · GitHub

I’ve updated my go.mod to include the latest and it is working as expected.