Mdb-ui-kit: Build error: selectors may not contain the parent selector "&"

[ViRuSTriNiTy]

Test Case

First of all, i cannot paste a test case URL here as the build error occurs only when using a recent sass compiler like Dart sass 1.26.0 is used. If you still need a test case then please post me a message instead of closing this issue silently (as mentioned in the issue template).

Summary

My package.json looks like this:

 {
  "name": "...",
  "version": "1.0.0",
  "scripts": {
    "gulp_build": "gulp build",
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.0.2",
    "sass": "^1.26.0"
  },
  "dependencies": {
    "bootstrap": "^4.4.1",
    "bootstrap-material-design": "^4.1.2",
    "node-sass-tilde-importer": "^1.0.2"
  }
}

Now, when i compile the bootstrap material design scss files via gulp tasks i get the following error:

Message:
    node_modules\bootstrap-material-design\scss\mixins\_forms.scss
Error: 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 {
    │ └───────────────^
    ╵
  node_modules\bootstrap-material-design\scss\mixins\_forms.scss 153:3            bmd-form-color()
  node_modules\bootstrap-material-design\scss\_forms.scss 75:1                    @import
  node_modules\bootstrap-material-design\scss\_core.scss 14:9                     @import
  node_modules\bootstrap-material-design\scss\bootstrap-material-design.scss 3:9  @import
  Assets\scss\bootstrap.scss 5:9                                                  @import
  Assets\scss\site.scss 1:9                                                       root stylesheet

Expected result

No errors while compilation

Additional Information

To solve the issue i currently replace the files causing this error with a customized version according to the following solution provided by @jpaulomotta

https://github.com/FezVrasta/bootstrap-material-design/issues/1300#issuecomment-418398256

May i provide a PR for these files so that we can merge it and publish it via npm?

[FezVrasta]

Hi, yes a PR would be welcome, but it must be as narrow as possible, I can't afford to spend time on reviewing large refactors at this time, I'm sorry.

[ViRuSTriNiTy]

@FezVrasta Thanks for the super fast reply. Yeah my PR would simply replace the & with the if() approach shown in https://github.com/FezVrasta/bootstrap-material-design/issues/1300#issuecomment-418398256.

One question before i create the PR, which branch do i need to target? I tried the master branch but there were to many changes already compared to 4.1.2. Is it feasible to target 4.1.2 and you then e.g. cherry pick to master?

[FezVrasta]

if you could target master it'd be great, I'm very short on time so the plan would be to release 4.1.3 as soon your fix is merged.

[flip111]

Looks like this is already fixed in https://github.com/FezVrasta/bootstrap-material-design/commit/00b78df538b38dd3fe66cf6a0a39048f7abdbf5b#diff-4fcf7dc3cf66b28cb08274cc30798d70R151

@FezVrasta can this issue be closed now and a new release made ?

[thejoeejoee]

ping @FezVrasta :pray:

[ViRuSTriNiTy]

Side note: updating npm package bootstrap-material-design to 4.1.3 solves this issue