Latest 0.79 version issues with BS 4.3.1

[STV11C]

Hi, I downloaded the latest 0.79 version and it compiles BS 4.3.1 with no errors.
However, all my nav links and hyperlinks now have the primary background color on hover.
I have narrowed it down to the mixins/badge.scss (since that was an issue previously) and have a feeling the color and background-color are effecting non-badge related elements.
Thanks!

@mixin badge-variant($bg) {
  color: color-yiq($bg);
  background-color: $bg;

  @at-root a#{&} {
    @include hover-focus {
      color: color-yiq($bg);
      background-color: darken($bg, 10%);
    }

    &:focus,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
    }
  }
}

[cyberalien]

Try replacing this @at-root a#{&} with @at-root #{selector-unify('a', &)}

[Cerdic]

Can you provide a proper test case : input scss, expected css and what is wrong in the nowadays output?

[STV11C]

Hi guys,

Ok here is the output with the default BS4 badge scss.
Notice how the :hover and :focus is missing the badge selector class in front of it.
Also notice the double a and triple a etc. This continues adding an 'a' for the different badge classes.
Note this is just a small snippet of the badge css to convey the issue.

.badge-primary {
  color: #fff;
  background-color: #007bff; 
}
a:hover, 
a:focus {
  color: #fff;
  background-color: #0062cc; 
}
a:focus, 
a.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); 
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d; 
}
aa:hover,
aa:focus {
  color: #fff;
  background-color: #545b62;
}
aa:focus,
aa.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.badge-success {
  color: #fff;
  background-color: #28a745;
}
aaa:hover,
aaa:focus {
  color: #fff;
  background-color: #1e7e34;
}
aaa:focus,
aaa.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

[STV11C]

Now here is the output using cyberaliens suggestion:

OUTPUT:

selector-unify:hover,
selector-unify:focus {
  text-decoration: none;
}
selector-unify:hover,
selector-unify:focus {
  color: #fff;
  background-color: #0062cc; 
}
selector-unify:focus,
selector-unify.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); 
}

SHOULD BE:

a.badge:hover,
a.badge:focus {
  text-decoration: none;
}
a.badge-primary:hover,
a.badge-primary:focus {
  color: #fff;
  background-color: #0062cc;
}
a.badge-primary:focus,
a.badge-primary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

[cyberalien]

I guess selector-unify function is not implemented in this parser and it doesn't throw error.

It was a wrong workaround anyway because I incorrectly assumed you wanted to add "a" selector to parent selector, like a.foo, not just add "a" letter to whatever is passed.

[STV11C]

Thanks for the reply Cyberalien. I'm just trying to build the default BS 4.3.1 scss with no mods. I think the only thing not working correctly is the @at-root a#{&} that is within the badge scss file.

I thought version 0.79 address this issue, but for now I will continue using the previous BS4 version of badge files until it is fixed.

Cheers

[Cerdic]

Indeed, I can reproduce and confirm the compilation issue with the badge module of BS4

[Cerdic]

Simple test case:

@mixin badge-variant($bg) {
  background-color: $bg;

  @at-root a#{&} {
    &:focus,
    &.focus {
      outline: 0;
    }
  }
}

.badge-primary {
	@include badge-variant(red);
}
.badge-secondary {
	@include badge-variant(yellow);
}

That produce the false result:

.badge-primary {
  background-color: red; }
    a:focus, a.focus {
      outline: 0; }

.badge-secondary {
  background-color: yellow; }
    aa:focus, aa.focus {
      outline: 0; }

[Cerdic]

#651 is fixing that issue :)

[Cerdic]

and in fact #655 is a rework really fixing all issues on BS4 compilation

[robocoder]

I haven't actually tagged 0.7.9 yet.