Mdb-ui-kit: Build error with node-sass v4.8.2

[razorness]

Test Case

• clone repository
• execute yarn upgrade
• run npm run build

Summary

{
  "status": 1,
  "file": "/tmp/bootstrap-material-design/scss/mixins/_forms.scss",
  "line": 155,
  "column": 3,
  "message": "Base-level rules cannot contain the parent-selector-referencing character '&'.\n\nBacktrace:\n\tscss/mixins/_forms.scss:155, in mixin `bmd-form-color`\n\tscss/_forms.scss:75",
  "formatted": "Error: Base-level rules cannot contain the parent-selector-referencing character '&'.\n\n       Backtrace:\n       \tscss/mixins/_forms.scss:155, in mixin `bmd-form-color`\n       \tscss/_forms.scss:75\n        on line 155 of scss/mixins/_forms.scss\n>>   &.is-focused {\n\n   --^\n"
}

Error: Base-level rules cannot contain the parent-selector-referencing character '&'.

       Backtrace:  
           scss/mixins/_forms.scss:155, in mixin `bmd-form-color`  
           scss/_forms.scss:75
        on line 155 of scss/mixins/_forms.scss
>>   &.is-focused {

   --^

The reason is found in:

• scss/mixins/_forms.scss#L155
• scss/_forms.scss#L75

Expected result

Successful build.

[FezVrasta]

Our build uses node-sass, what version are you using? Try 4.5.3 please

[razorness]

yarn.lock is currently using v4.7.2 of node-sass, which builds sucessfully. Current version of node-sass is v4.8.2 which is legid due package.json.
But build fails with node-sass v4.8.2.

If you include bootstrap-material-design scss code in other project and run yarn upgrade/npm update, you are getting this error.

[FezVrasta]

Thanks, they introduced a breaking change in a minor version then... I'd open an issue on their repository to see if this is expected. If so, I guess we'll have to find some way to workaround the problem.

[FezVrasta]

Ok looks like that code was never supposed to work.

https://github.com/sass/libsass/issues/2581

I can't find any way to rewrite that mixin to work with the new version requirements... Help is more than welcome.

[xzyfer]

I can confirm this error is correct.

The code is invalid and should never have worked. It worked due a bug that has since been fixed.

Please see this blog post for why this isn't a breaking a change.

You cannot use & outside of a selector. In this case

• @include bmd-form-color is called outside of a selector
• inside that mixin &.is-focus is called outside of a selector

This is a error because & is essentially undefined.

[FezVrasta]

How can I tell Sass to consider & the :root scope of the DOM?

[xzyfer]

That's not how & works. & is always the parent selector.

To get to the root you can use @at-root. The following

@at-root (without: all) {
  .is-focused { ... }
}

is pretty much the same as

:root { 
  is-focused { .. } 
}

[jpaulomotta]

@FezVrasta

I've fixed this issue compiling bmd on a Ruby project that uses Sass 3.5.2.

I've replaced the buggy & for this:
#{if(&, "&", "*")}

scss/mixins/_drawer.scss

scss/mixins/_form.scss

sass/sass#1873 helped me out.

Do you want a pull request with these changes? The focus styles looks ok on my end.

[vishal423]

I don't see this issue with latest node-sass v4.9.4. Per my understanding from above discussions / blog, it's not complaint with sass specifications. @xzyfer, can you please cross check?
For reference, dart-sass v1.14.3, shows this as non compliant.

[christian-graf]

I've run into the same error while updating my dependencies.
The solution of @jpaulomotta works also in my environment :)

Is there a planed version where the fix will be released?
@FezVrasta if you need help, I can try to make the fix and send you an pull-request?

[AngelinCalu]

Any updates on this issue?

[FezVrasta]

Yea, sorry, a pull request to fix it would be great.

[klonwar]

So will you fix this bug?

[AngelinCalu]

Similar bug in node_modules\bootstrap-material-design\scss\mixins\_forms.scss 153:3, can you fix this too?

      Top-level selectors may not contain the parent selector "&".
    ╷
153 │ ┌   .is-focused,
154 │ │   // may or may not be a form-group or bmd-form-group
155 │ │   &.is-focused {
    │ └─────────-^

This should be ok in the fix but it wasn't yet merged.

@FezVrasta any idea when you could check an merge?

[klonwar]

This should be ok in the fix but it wasn't yet merged.

Yea, I'm sorry I was a little inattentive

[Trojaner]

Would be great if you could push this to npm, currently I can not build because of this:

[ptejada]

@FezVrasta Can't install this hotfix. Please push a new version tag.

---

The only workaround at the moment is to install the package referencing the GitHub repository

```
npm i --save-dev bootstrap-material-design@master

[MasterBroki]

Hey guys, I've encountered this issue, but it doesn't seems to be deployed in production. Last version is 4.1.2 and I still encounter this issue @FezVrasta

[ViRuSTriNiTy]

Push because as i encounter this issue also with sass 1.26.0 in _forms.scss as @Trojaner posted already.

[MoAqsam]

Hi please push to npm as the fix is really needed.