@import in @if not allowed

[lllopo]

Dart sass does not allow the following construct:

@if $enable-light-style {
  .light-style {
    @import "include";
  }
}

saying Error: This at-rule is not allowed here. , while node-sass has no problems with it. Is this by design or a bug ?

[Awjin]

Duplicate of sass/sass#451

[nex3]

Note that recent versions of LibSass and node-sass also (correctly) forbid this.

[lllopo]

Note that recent versions of LibSass and node-sass also (correctly) forbid this.

I’m using the latest node-sass and it doesn’t forbid it. I tried to switch to dart-sass, because node-sass doesn’t support @use and stumbled upon this problem. The main issue for me is, that I’m actually using a template, so it is out of my hands to correct this, but to be honest - I also can’t see a reason why this is not allowed.

[nex3]

I’m using the latest node-sass and it doesn’t forbid it.

$ cat test.scss
@if true {@import 'foo'}
$ node-sass --version
node-sass       4.14.1  (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]
$ node-sass test.scss
{
  "status": 1,
  "file": "/home/nweiz/goog/sass/dart/test.scss",
  "line": 1,
  "column": 11,
  "message": "Import directives may not be used within control directives or mixins.",
  "formatted": "Error: Import directives may not be used within control directives or mixins.\n        on line 1 of test.scss\n>> @if 
true {@import 'foo'}\n\n   ----------^\n"                                                                                            
}

I also can’t see a reason why this is not allowed.

It's not allowed because it makes the set of files that are loaded, and thus the set of variables, mixins, and functions that are available, potentially different from compilation to compilation based on the values of different variables. This makes it difficult for computers to statically analyze your files, and more importantly it makes it difficult for humans to reason about what might be defined when.

In the new module system, you can use meta.load-css() to dynamically load a module's CSS, although it has a number of caveats and should only be used with care.

[lllopo]

I’m using the latest node-sass and it doesn’t forbid it.

$ cat test.scss
@if true {@import 'foo'}
$ node-sass --version
node-sass       4.14.1  (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]
$ node-sass test.scss
{
  "status": 1,
  "file": "/home/nweiz/goog/sass/dart/test.scss",
  "line": 1,
  "column": 11,
  "message": "Import directives may not be used within control directives or mixins.",
  "formatted": "Error: Import directives may not be used within control directives or mixins.\n        on line 1 of test.scss\n>> @if 
true {@import 'foo'}\n\n   ----------^\n"                                                                                            
}

I also can’t see a reason why this is not allowed.

It's not allowed because it makes the set of files that are loaded, and thus the set of variables, mixins, and functions that are available, potentially different from compilation to compilation based on the values of different variables. This makes it difficult for computers to statically analyze your files, and more importantly it makes it difficult for humans to reason about what might be defined when.

In the new module system, you can use meta.load-css() to dynamically load a module's CSS, although it has a number of caveats and should only be used with care.

@nex3 You are right, but this is not my example. node-sass doesn't allow @import statements that placed directly to the control directive, but I if you put it inside a definition like my example - it does.

[nex3]

I see. That's certainly a bug, and not something you should rely on. I've filed sass/libsass#3097 to fix it.

[vrushank]

@lllopo, I'm facing the same issue. Have you found any solution for this?

[lllopo]

@vrushank Nope, unfortunately not.