Issue while compilling Bootstrap 4.2.1, cannot parse

prochor666 commented 5 years ago

parse error while parsing bootstrap-4.2.1/scss/mixins/_badge.scss on line 5. This line is a problem:

  @at-root a#{&} {

Using version 0.7.7

nicolomonili commented 5 years ago

Same problem here, with bootstrap 4.2.1

GrupoWebex commented 5 years ago

Same problem here, with bootstrap 4.2.1

nicolomonili commented 5 years ago

Same problem here, with bootstrap 4.2.1

The problems are with the files mixins/_badge.scss and _badge.scss

GrupoWebex commented 5 years ago

Same problem here, with bootstrap 4.2.1

The problems are with the files mixins/_badge.scss and _badge.scss

There is. It is a mod to working with a.badge and a.badge-primary

@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%);
    }
  }
}

.badge {
  display: inline-block;
  padding: $badge-padding-y $badge-padding-x;
  font-size: $badge-font-size;
  font-weight: $badge-font-weight;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  @include border-radius($badge-border-radius);

  @at-root a#{&} {
    @include hover-focus {
      text-decoration: none;
    }
  }

  // Empty badges collapse automatically
  &:empty {
    display: none;
  }
}

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
}

glOOmyART commented 5 years ago

to narrow it down a bit: yesterday, i needed to add some custom code to a customized _variables.scss with bootstrap 4.1.2 and it compiled just fine
this was the code:

li
{
    background: rgba($black,0.2);
    height: 13px;
    margin: 1px;

    &.active
    {
        background: rgba($primary,0.5);
    }
}

glOOmyART commented 5 years ago

by the way, here is the stacktrace:

glOOmyART commented 5 years ago

As a quick and dirty workaround I just replaced the two files mixins/_badge.scss and _badge.scss with the ones from Bootstrap 4.1 and it compiled just fine... It works for me since it's just badges and I don't use them that much...

leonardfischer commented 5 years ago

I'm having the same problems - is this related to #614 ?

GaborTorma commented 5 years ago

Changing back mixins/_badge.scss and _badge.scss files to 4.1 is solve the problem. Please, repair this isuse.

STV11C commented 5 years ago

Same issue here. Look forward to the fix and hopefully it's a quick one :)

kingyond commented 5 years ago

Try this fork https://github.com/kingyond/scssphp. Add interpolation support selector. which support #{&} as parent selector. fix at-root issue. still has issue while compiling @at-root in mixins files. you still need to remove @at-root in mixins/_badge.scss. welcome to give feedback.

hypergalaktisch commented 5 years ago

Having the same problem. Try to compile it with contao: Uncaught PHP Exception Leafo\ScssPhp\Exception\ParserException: "parse error: failed at '&} {' /[...]/bootstrap/mixins/_badge.scss on line 5"

kinsaz commented 5 years ago

I am also getting the error below compiling bootstrap@4.2.1 in node-modules

../scss/bootstrap/mixins/_badge.scss on line 5 ../vendor/leafo/scssphp/src/Parser.php:169 Exception trace: 1 Leafo\ScssPhp\Parser::throwParseError() ../vendor/leafo/scssphp/src/Parser.php:169

2 Leafo\ScssPhp\Parser::parse("@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%); } } }

Reverting to Bootstrap 4.1 isn't easy for me. Is there another solution?

glOOmyART commented 5 years ago

@kinsaz you don't need to completely revert to BS 4.1 ;) it's just the two files mixins/_badge.scss and _badge.scss which cause the problem, so if you just replace those with the BS 4.1 version you can still use BS 4.2 with badges ;)

sunpietro commented 5 years ago

Got the same issue when compiling Bootstrap 4.2.1 SASS files. Porting _badges.scss files from earlier version is not a solution for me.

pschuchmann commented 5 years ago

+1

devtroll commented 5 years ago

+1

mind-bending-forks commented 5 years ago

Using older, possibly just incompatible or bugged, versions of a couple of Bootstrap files is clearly not the answer. Please can someone confirm the following:

Is this an issue with Bootstrap using non-standard syntax in 4.2.1 - in which case we should file a bug report there; or
is this a problem with scssphp not supporting valid syntax - in which case it should be fixed here?

Thank you.

jakejohns commented 5 years ago

@kingyond in https://github.com/leafo/scssphp/issues/616#issuecomment-455481858 points to a fork that seems to possibly fix the issue? Why don't you submit a PR?

sunpietro commented 5 years ago

@mind-bending-forks this is an issue with scssphp not supporting valid syntax

mind-bending-forks commented 5 years ago

I've just tried commit cd6bedb75b1155426cd7f21de6a5314965b1cffc on @kingyond's branch, and can confirm that a) it Bootstrap 4.2.1 compiles without error and b) badges are rendering as I would expect. Assuming that @kingyond's changes haven't broken anything else that I haven't noticed, it would be great if the change could be merged into this repository.

mind-bending-forks commented 5 years ago

Hmm. I'm not if this is related (e.g. to the @at-root issue @kingyond mentioned), but custom select dropdowns have glitch when bootstrap.scss is processed with scssphp as compared to when using Bootstraps own distributed css: The select indicator up-down arrows on the right-hand side are overlain by the browser's default dropdown button when processed with scssphp, but not when Bootstrap's own version is used.

glOOmyART commented 5 years ago

The select indicator up-down arrows on the right-hand side are overlain by the browser's default dropdown button when processed with scssphp, but not when Bootstrap's own version is used.

@mind-bending-forks I've noticed this in Chrome too, but in Firefox it shows the up/down arrows.

nicolomonili commented 5 years ago

@glOOmyART @mind-bending-forks The problem with custom-select is related to Autoprefixer. https://github.com/twbs/bootstrap/issues/27181 - https://getbootstrap.com/docs/4.1/getting-started/browsers-devices/#supported-browsers

liova99 commented 5 years ago

I found a workaround. I just changed the @at-root a#{&} to &[href] like in previous bootstrap versions.

So _badge look like this:

[....]

 // changed the @at-root a#{&} to &[href]
  // due to compiling errors
 &[href] {
    @include hover-focus {
      text-decoration: none;
    }
  }

[....]

and in the mixins_badge

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

  // changed the @at-root a#{&} to &[href]
  // due to compiling errors
  &[href]  {
    @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);
    }
  }
}

Not the best solution but it seems to be working. I tested also all the badges classes, "no errors no problems".

Happy to hear your opinion.

sunpietro commented 5 years ago

@liova99 this is not a correct solution because then you cannot automate the dependency management. In short, you don't manipulate the 3rd party code, when you develop your own app. It's just a workaround that can be acceptable in personal (or agency) projects not in commercial, professional ones.

wilecoyte78 commented 5 years ago

SEE https://github.com/leafo/scssphp/issues/629

arboc commented 5 years ago

@liova99 thanks for the wirkaround.
Even though this is not a correct solution I can use your code as a workaround untill this issue is fixed.

Cerdic commented 5 years ago

This is fixed in last version with #643

Cerdic commented 5 years ago

(Can be closed @robocoder)

jonnybradley commented 5 years ago

I'm trying to run this installed from composer via packagist.org and I'm not seeing this fix. I'm on dev-master and 0.78 isn't there as noted in another issue #649 I see from the source here it has been merged into dev-master, so is packagist.org getting in the way? Or is there another issue? TIA

robocoder commented 5 years ago

@jonnybradley until #649 (packaging webhooks update) is resolved, we have to wait for packagist.org to scan the repo; I think it's weekly...

jonnybradley commented 5 years ago

Many thanks for the speedy reply @robocoder, will see if it magically fixes itself next week! 👍

leonardfischer commented 5 years ago

According to https://packagist.org/about#update-schedule it SHOULD be crawled once a week, but my issue is now three weeks old (exactly 21 days today). And since then nothing happened... Even the dev-master is outdated (points to a commit from 2019-03-15 16:20 UTC) :(

leafo / scssphp

Issue while compilling Bootstrap 4.2.1, cannot parse #616