Handling Bootstrap @extends when prefixing

[ciar4n]

First of all thank you for such an excellent tool 👍

I am trying to import selected parts of Bootstrap. All imported classes I am looking to prefix (eg with x-).

I run in to the following issue when Bootstrap attempts to extend a selector. I suspect this issue is related to prefixing all classes. Bootstrap is looking to extend a selector that has been already prefixed, therefore no longer available in the original naming.

@import '{
  /\.form-control(.*)/ as .x-form-control$1
} from ../../../media/vendor/bootstrap/scss/forms';

@import '{
  /\.input-group(.*)/ as .x-input-group$1
} from ../../../media/vendor/bootstrap/scss/input-group';

The above gives me the following error..

".x-input-group-lg > .form-control" failed to @extend ".form-control-lg".
The selector ".form-control-lg" was not found.
Use "@extend .form-control-lg !optional" if the extend should be able to fail.

@extend ".form-control-lg" --- https://github.com/twbs/bootstrap/blob/v4-dev/scss/_input-group.scss#L123

Is prefixing all classes in Bootstrap beyond what the importer is currently capable of?

[maoberlehner]

Hey @ciar4n,

thank you for your bug report and the nice words at the beginning.

You're correct, node-sass-magic-importer is currently not supporting this "edge case". Tough, it is also kind of a bug.

I think of it as an "edge case" because in my opinion, using @extend is an anti pattern (Harry Roberts wrote an article about it: https://csswizardry.com/2016/02/mixins-better-for-performance/).

But still, @extend is a valid SASS functionality and (sadly) bootstrap makes use of it, so node-sass-magic-importer should definitely support it.

I'll think about a solution – but to be honest, don't expect a very fast solution for this. Pull requests are very welcome tough :)