node-sass-magic-importer icon indicating copy to clipboard operation
node-sass-magic-importer copied to clipboard

Support transforming all types of imported nodes

Open zeorin opened this issue 6 years ago • 1 comments

I tried:

@import '{ $size-large as $badge-size-large } from ../Badge/style.scss';

But got an error:

Undefined variable: "$badge-size-large".

If I don't try to transform the variable name my SCSS compiles.

I suspect this is because we can only transform CSS selectors, and not other node types (variables, mixins, etc.).

zeorin avatar Oct 21 '17 18:10 zeorin

I suspect this is because we can only transform CSS selectors, and not other node types (variables, mixins, etc.).

This is correct. I'll handle this issue as a feature request and I'll report back later if this is something I can add in a future release. Although, currently I'm sceptical -> mapping variables to other names is already not too hard to do $badge-size-large: $size-large;. But I guess it can be annoying to have a variable name like $size-large in your global scope, so I can also see how it would be useful.

One problem would be the syntax. @import '{ ... }' is already reserved for selectors and I'd rather keep it that way to avoid confusion and to keep the implementation (somewhat) simple.

So right now we have @import '{ ... }' for selectors, @import '[ ... ]' to filter nodes. It might be possible to use @import '( ... )' to import (and rename) only certain variables or mixins but this might add confusion because of the regular @import url() syntax.

I'm open for ideas how to implement this functionality in the best way, but I can't guarantee it'll happen.

Thank you for using node-sass-magic-importer.

maoberlehner avatar Oct 22 '17 08:10 maoberlehner