connectivedx / Phoenix

http://connectivedx.github.io/Phoenix/
33 stars 5 forks source link

Em and Rem Function Errors #182

Closed ajmueller closed 8 years ago

ajmueller commented 8 years ago

On the latest build with a completely clean npm install and newest release of Node (4.2.1), I'm getting the following error:

Plumber found unhandled error:
 Error in plugin 'gulp-sass'
Message:
    css/functions/_em.scss
  44:10  Undefined variable: "$output".
Details:
    formatted: Error: Undefined variable: "$output".
        on line 44 of css/functions/_em.scss
>>  @return $output;
   ---------^

    column: 10
    line: 44
    file: /Users/alex/Sites/mamp/Phoenix/Assets/src/css/functions/_em.scss
    status: 1
    messageFormatted: css/functions/_em.scss
  44:10  Undefined variable: "$output".

I'd look into this more to try and help debug, but I won't have time this morning.

kamsar commented 8 years ago

I am seeing the same error on Node 0.12.7 after clearing my node_modules.

kamsar commented 8 years ago

This also affects _rem.scss

I was able to eliminate the build error - I'm not sure if it's the 'right' solution or not - by adding a default value for the variable (similar fix to _em.scss):

@function rem($target) { $output: '';

elseloop commented 8 years ago

Thanks, @ajmueller & @kamsar. I’ve also confirmed this on a clean install. My initial guess is that the LibSass 3.3 release is causing this. I’d bet variable declarations have somehow changed. I need to dig in and read through those release notes more. (Tomorrow's Phoenix Friday, right?)

chadian commented 8 years ago

TLDR: Define variables outside conditional blocks.

Test environment:

vagrant@vagrant-ubuntu-trusty-64:/$ node-sass -v
node-sass   3.4.1   (Wrapper)   [JavaScript]
libsass     3.3.1   (Sass Compiler) [C/C++]

Running node-sass test.scss with test.scss:

Working

@function testing() {

    $output: null;

    @if (true) {
        $output: 'Hello';
    }

    @return $output;
}

@warn testing();

Output:

WARNING: Hello
    on line 12 of test.scss

Not working

@function testing() {

    @if (true) {
        $output: 'Hello';
    }

    @return $output;
}

@warn testing();

Output:

{
  "formatted": "Error: Undefined variable: \"$output\".\n        on line 7 of test.scss\n>> \t@return $output;\n   ---------^\n",
  "message": "Undefined variable: \"$output\".",
  "column": 10,
  "line": 7,
  "file": "/test.scss",
  "status": 1
}

Only difference was defining the $output at the top. My theory is that as part of the new blazing fast versions of libsass interprets variables is that it expects them to be setup/declared in the same block they are used, at compile time, not run time. Can't really find supporting evidence in changelogs or blogs, but open to other suggestions/theories. Although, it's probably a good habit if something is being returned for it to be highly visible, and not be defined nested in some if/then later.

elseloop commented 8 years ago

Fixed in 2.2.2 release