ronaldtreur / stss Goto Github PK

View Code? Open in Web Editor NEW

51.0 51.0 17.0 111 KB

Sassy TSS, or Sassy Titanium Style Sheets.

JavaScript 100.00%

stss's People

Contributors

Stargazers

Watchers

Forkers

nvdnkpr fokkezb jvandijk appcelerator-forks clairecoloma winsonet kopiro xavierlacot dbankier sg552 theerapat-y roldanunne pebblecode matiseams ooga aaloul

stss's Issues

Arrays contained in a media query won't be parsed

As mentioned by @jvandijk in #10 (comment), arrays aren't parsed correctly when inside a media query:

Window {
    orientation-modes: [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT];
    @media ios {
        extendEdges: [Ti.UI.EXTEND_EDGE_ALL];
    }
}

you'll get the following error:

STSS/lib/renderer/css2json.js:134
            v = special['array'][arrayNr][valueNr][0];
                                ^
TypeError: Cannot read property '2' of undefined
    at STSS/lib/renderer/css2json.js:134:24
    at String.replace (native)
    at parseSpecialValue (STSS/lib/renderer/css2json.js:132:15)
    at parseDeclaration (STSS/lib/renderer/css2json.js:187:11)
    at STSS/lib/renderer/css2json.js:335:14
    at Array.forEach (native)
    at parseNormalRule (STSS/lib/renderer/css2json.js:330:20)
    at STSS/lib/renderer/css2json.js:398:4
    at Array.forEach (native)
    at parseAST (STSS/lib/renderer/css2json.js:396:8)

feature suggestion

Hi, thank you for this great project! It's can save many of my time! But I have a suggestion I don't know whether can do that, can you get the alloy globals value in the stss file? for example, I set a device width to a global value like this:

Alloy.Globals.DeviceWidth = Ti.Platform.displayCaps.platformWidth

if I can get this in stss, I want to do some checking or calculation, like following

#content{
    height: 200dp;
    width: Alloy.Globals.DeviceWidth / 2;
}

Is this possible?

Thanks!

Alpha transparent background colors

Last week I came across this blogpost : http://www.appcelerator.com/blog/2014/11/adding-transparent-background/

The cross platform solution:

".myview":{
    backgroundColor : "#80FF0000"
}

is something you'd like to use in STSS of course. Unfortunately you can't, because it seems to be limited to 6 characters, which of course is quite right according to SCSS parsing.

Any idea if this could be solved?

Using @extend with existing complex structure in parent

Hey Ronald,

While using @extend I ran into an issue when extending a class that has a font definition in it.

With the following base STSS setup:

.textField {
    color: $black;
    font: {
        family: $primaryFont;
        size: $secondaryFontSize;
    }
    left: "3%";
    @media ios {
        width: "94%";
    }
    @media android {
        width: "94%";
    }
}

.textfieldWithLabel {
    @extend .textField;
    @media ios {
        width: "88%";
    }
    @media android {
        width: "88%";
    }
}

The TSS output is as follows, take note of the font definition:

".textField": {
    color: "#000000",
    font: {
        fontFamily: "RobotoSlab-Bold",
        fontSize: "20dp"
    },
    left: "3%"
},
".textfieldWithLabel": {
    color: "#000000",
    font: "-stss-ph1",
    left: "3%"
},
".textField[platform=ios]": {
    width: "94%"
},
".textField[platform=android]": {
    width: "94%"
},
".textfieldWithLabel[platform=ios]": {
    width: "88%"
},
".textfieldWithLabel[platform=android]": {
    width: "88%"
}

I really don't what is going on there....

multiple @extends are not being processed as they should

@RonaldTreur , just wanted to start by saying great work on this feature and it is a real time saver. That said I noticed that there seems to be some confusion around "@extend" that STSS is having a bit of difficulty getting right.

STSS File

/* Center text */
.center {
    text-align: center;
}

.padded {
    left: 10dp;
    right: 10dp;
}

.padded-centered {
    @extend .padded;
    @extend .center;
}

outputs:

TSS File
".center": {
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
},
".padded": {
    left: "10dp",
    right: "10dp"
},
".padded-centered": {
    left: "10dp",
    right: "10dp"
}

Any help would be appreciated and thanks again!

Separator to camelCase only works for 1 separator

Hey @RonaldTreur,

In the documentation you state that you can use CSS syntax to create TSS files. This works, but not completely. See the following code snippet:

Window {
    background-color: "#2e2d2b";
    @media ios {
        nav-bar-hidden: true;
        top: -20;
        barColor: $backgroundColor;
        barImage: '/images/transparent.png';
        hideShadow: true;
    }
}

Mind the nav-bar-hidden syntax I used, the output is as follows:

"Window": {
        backgroundColor: "#2e2d2b"
},
"Window[platform=ios]": {
        navBar: {
                hidden: true
        },
        top: -20,
        barColor: "#8cc63f",
        barImage: "/images/\"transparent.png\"",
        hideShadow: true
}

It just dropped the 3rd part into a level deeper. Is that an expected behavior for other situations I don't know of... or do we need to enhance the documentation on the separator syntax?

Problems with []

It seems not to like Javascript Array notation when compiling.

Error is :
/usr/local/lib/node_modules/stss/node_modules/node-sass/sass.js:129
output = options.file? binding.renderFileSync(options) : binding.renderSync(
^
source string:27: error: error reading values after :

When in my file, from line 13 to 32 is :
#header {
top: 0;
height: 60dp;
width: fill;
backgroundGradient: {
type: linear;
startPoint: {
x: 0%;
y: 0%;
};
endPoint: {
x: 0%;
y: 100%;
};
colors: [
{ color: #B3C618; offset: 0.0; },
{ color: #BDC47D; offset: 1.0; }
];
};
}
(line 27 is "colors: [" )

backgroundGradient property applies to all button

Whether using mixin or directly to the stss file, once you use backgroundGradient property in one of the buttons, it will also apply the same backgroundGradient "color" when you try to use a different one on the other buttons when compiled.

Here's a screenshot of my STSS:

Here's the compiled TSS:

STSS combined with TiShadow

Hey @RonaldTreur & @dbankier,

Have you already used STSS in combination with TiShadow express? There is a bit of a problem which triggers double updates to TiShadow. It's perfect that STSS is generated into TSS, but both changes are triggering a TiShadow update when running in express mode. My config doesn't always like that, resulting in a necessary restart of the TiShadow express mode. Is there a way to get around this?

multiple os/media query fail

(hey, I'm back for new bugs \o/)
I'm trying to write specific but grouped query to match the differences between Android and iOS (well at least the case of tabs which are up on Android and down on iOS)

#form_short[ios], #form_full[ios], #container_photo[ios], #form_cotation[ios] {
    bottom: 0;
}
#form_short[android], #form_full[android], #container_photo[android], #form_cotation[android] {
    top: 0;
}

In the outputted TSS :

"#form_short[platform=ios platform=ios platform=ios platform=ios]": {
    bottom: 0
},
"#form_short[platform=android platform=android platform=android platform=android]": {
    top: 0
},

Maybe it's not the perfect way to write this, maybe there is a more concise way ?
Anyway, it's not rendering in the TSS as expected ;)

Error with decimals numbers

(or just decimals % ?)

/usr/local/lib/node_modules/stss/node_modules/node-sass/sass.js:129
output = options.file? binding.renderFileSync(options) : binding.renderSync(
^
source string:83: error: error reading values after %

my STSS rule concerned :

#btnAddFiche, #btnViewFiche, #btnGoSync, #btnGoUser {
    width: 42.5%;
    height: 42.5%;
}

Nested object-values are misinterpreted

#header {
    backgroundGradient: {
        type: linear;
        startPoint: {
            x: 0%;
            y: 0%;
        };
        endPoint: {
            x: 0%;
            y: 100%;
        };
    };
}

converts to:

"#header": {
    backgroundGradient: {
        type: "linear",
        startPoint: "0%",
        endPoint: "100%"
    }
}

Brackets

How would I write the following in STSS?

'.gradient-top-left': {
backgroundGradient: {
type: 'radial',
startPoint: {
x: 50,
y: 50
},
endPoint: {
x: 50,
y: 50
},
colors: ['red', 'blue'],
startRadius: '100%',
endRadius: 0,
backfillStart: true
}
},

Quoted text creates unpexpected output

Hey @RonaldTreur,

I hope you don't mind I keep sending in issues... I've found another one.
The following scss snippet:

Window {
    background-color: "#2e2d2b";
    backButtonTitle: "";
    @media ios {
        navBarHidden: true;
        top: -20;
        barColor: $backgroundColor;
        barImage: '/images/transparent.png';
        hideShadow: true;
    }
}

Generates this TSS output:

"Window": {
        backgroundColor: "#2e2d2b",
        backButtonTitle: "\"\""
},
"Window[platform=ios]": {
        navBarHidden: true,
        top: -20,
        barColor: "#8cc63f",
        barImage: "/images/\"transparent.png\"",
        hideShadow: true
}

See the quoting on the barImage and backButtonTitle properties. Those references will fail to work.

Arrays can't contain SCSS variables

As mentioned here: #3 (comment)

Arrays can't contain SCSS variables, due to how arrays are currently implemented in STSS.

it's seems cannot use the backgroundImage in the stss

when I try to set the backgroundImage, it's always failed :(
For example, I set the bg image like below:

#Wrapper {
    layout: 'composite';
    backgroundImage: 'Default.png';
}

there are following errors:

[ERROR] :  Error processing style "..../app/styles/home.tss"
[ERROR] :  Expected "Alloy", "L", "Ti", "Titanium", "WPATH", "[", "false", "null", "true", "undefined", "{", comment, end of line, number, string or whitespace but "D" found.
[ERROR] :
[ERROR] :  - line:    4
[ERROR] :  - column:  19
[ERROR] :  - offset:  56
[ERROR] :  Alloy compiler failed

when I set the bg image like below:

#Wrapper {
    layout: 'composite';
    backgroundImage: '/images/Default.png';
}

there is no error, but the result is:

#Wrapper {
    layout: 'composite';
    backgroundImage: "/images/\"Default.png\""
}

and this path will cannot work, I don't know why it will auto add the double quote when there is a '/' in the path :(

Arrays can only contain objects, "simple" values won't work

As mentioned here: http://www.tidev.io/2014/08/20/sassy-tss-an-introduction/#comment-11088

Arrays do not work for values, only for objects.

Specifically:

orientationModes: [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]

does not process correctly.

Can't install it

I'm getting these errors:

~ $ sudo npm install stss -g
Password:
|
> [email protected] install /usr/local/lib/node_modules/stss/node_modules/node-sass
> node build.js

child_process: customFds option is deprecated, use stdio instead.
child_process: customFds option is deprecated, use stdio instead.
  CXX(target) Release/obj.target/binding/binding.o
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:339:13: error: no member named 'New' in 'v8::String'
    return  _NAN_ERROR(v8::Exception::Error, errmsg);
            ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:343:5: error: no member named 'ThrowException' in namespace 'v8'
    _NAN_THROW_ERROR(v8::Exception::Error, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:11: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
      ~~~~^
../node_modules/nan/nan.h:343:5: error: no member named 'New' in 'v8::String'
    _NAN_THROW_ERROR(v8::Exception::Error, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:26: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
                         ^~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:348:9: error: no type named 'ThrowException' in namespace 'v8'
    v8::ThrowException(error);
    ~~~~^
../node_modules/nan/nan.h:355:65: error: no member named 'New' in 'v8::String'
    v8::Local<v8::Value> err = v8::Exception::Error(v8::String::New(msg));
                                                    ~~~~~~~~~~~~^
../node_modules/nan/nan.h:357:26: error: no member named 'New' in 'v8::String'
    obj->Set(v8::String::New("code"), v8::Int32::New(errorNumber));
             ~~~~~~~~~~~~^
../node_modules/nan/nan.h:369:12: error: no member named 'New' in 'v8::String'
    return _NAN_ERROR(v8::Exception::TypeError, errmsg);
           ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:373:5: error: no member named 'ThrowException' in namespace 'v8'
    _NAN_THROW_ERROR(v8::Exception::TypeError, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:11: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
      ~~~~^
../node_modules/nan/nan.h:373:5: error: no member named 'New' in 'v8::String'
    _NAN_THROW_ERROR(v8::Exception::TypeError, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:26: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
                         ^~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:377:12: error: no member named 'New' in 'v8::String'
    return _NAN_ERROR(v8::Exception::RangeError, errmsg);
           ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:381:5: error: no member named 'ThrowException' in namespace 'v8'
    _NAN_THROW_ERROR(v8::Exception::RangeError, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:11: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
      ~~~~^
../node_modules/nan/nan.h:381:5: error: no member named 'New' in 'v8::String'
    _NAN_THROW_ERROR(v8::Exception::RangeError, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:26: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
                         ^~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:727:49: error: too few arguments to function call, single argument 'isolate' was not
      specified
    v8::Local<v8::Object> obj = v8::Object::New();
                                ~~~~~~~~~~~~~~~ ^
/Users/danilo/.node-gyp/0.12.0/deps/v8/include/v8.h:2388:3: note: 'New' declared here
  static Local<Object> New(Isolate* isolate);
  ^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:733:49: error: too few arguments to function call, single argument 'isolate' was not
      specified
    v8::Local<v8::Object> obj = v8::Object::New();
                                ~~~~~~~~~~~~~~~ ^
/Users/danilo/.node-gyp/0.12.0/deps/v8/include/v8.h:2388:3: note: 'New' declared here
  static Local<Object> New(Isolate* isolate);
  ^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:740:12: error: no member named 'Dispose' in 'v8::Persistent<v8::Object,
      v8::NonCopyablePersistentTraits<v8::Object> >'
    handle.Dispose();
    ~~~~~~ ^
../node_modules/nan/nan.h:741:12: error: no member named 'Clear' in 'v8::Persistent<v8::Object,
      v8::NonCopyablePersistentTraits<v8::Object> >'
    handle.Clear();
    ~~~~~~ ^
../node_modules/nan/nan.h:746:39: error: no member named 'NewSymbol' in 'v8::String'; did you mean 'IsSymbol'?
    NanPersistentToLocal(handle)->Set(NanSymbol("callback"), fn);
                                      ^~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:181:38: note: expanded from macro 'NanSymbol'
#define NanSymbol(value) v8::String::NewSymbol(value)
                         ~~~~~~~~~~~~^
/Users/danilo/.node-gyp/0.12.0/deps/v8/include/v8.h:1379:8: note: 'IsSymbol' declared here
  bool IsSymbol() const;
       ^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:746:39: error: call to non-static member function without an object argument
    NanPersistentToLocal(handle)->Set(NanSymbol("callback"), fn);
                                      ^~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:181:38: note: expanded from macro 'NanSymbol'
#define NanSymbol(value) v8::String::NewSymbol(value)
                         ~~~~~~~~~~~~^~~~~~~~~
../node_modules/nan/nan.h:750:46: error: no member named 'NewSymbol' in 'v8::String'; did you mean 'IsSymbol'?
    return NanPersistentToLocal(handle)->Get(NanSymbol("callback"))
                                             ^~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:181:38: note: expanded from macro 'NanSymbol'
#define NanSymbol(value) v8::String::NewSymbol(value)
                         ~~~~~~~~~~~~^
/Users/danilo/.node-gyp/0.12.0/deps/v8/include/v8.h:1379:8: note: 'IsSymbol' declared here
  bool IsSymbol() const;
       ^
fatal error: too many errors emitted, stopping now [-ferror-limit=]
20 errors generated.
make: *** [Release/obj.target/binding/binding.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:267:23)
gyp ERR! stack     at ChildProcess.emit (events.js:110:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:1067:12)
gyp ERR! System Darwin 13.4.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/stss/node_modules/node-sass
gyp ERR! node -v v0.12.0
gyp ERR! node-gyp -v v1.0.2
gyp ERR! not ok 
Build failed
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "stss" "-g"
npm ERR! node v0.12.0
npm ERR! npm  v2.6.1
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script 'node build.js'.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node build.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/danilo/npm-debug.log
~ $

Errors should halt compile when using the JMK

A file didn't generate and only after running stss input output manually I saw there was an error. I'd like to see the alloy compile halted if there was an error so I can see what I need to fix ;)

≫ stss app/styles/index.stss app/styles/index.tss


$font: Helvetica;

@mixin alert($color) {
  font-family: $font;
  color: $color;
}

Label: {
  @include alert(red);
}

/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:62
    throw err;
          ^
Error: missing '{' near line 2:18
    at error (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:57:15)
    at declarations (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:214:25)
    at rule (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:481:21)
    at rules (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:103:56)
    at stylesheet (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:73:16)
    at module.exports (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:485:10)
    at module.exports (/usr/local/lib/node_modules/stss/lib/renderer/css2json.js:347:12)
    at /usr/local/lib/node_modules/stss/stss.js:60:15
    at fn (/usr/local/lib/node_modules/stss/node_modules/async/lib/async.js:641:34)
    at Object._onImmediate (/usr/local/lib/node_modules/stss/node_modules/async/lib/async.js:557:34)

Alpha transparent background colors in Android

I ran into another issue when trying to create logic like issue #20, but now specifically for Android.

For Android the RGBA logic works differently then iOS. In iOS the last parameter should have a value between 0 and 1, Android thought requires a value between 0 and 225.

Trying to create this TSS output:

".myview":{
    backgroundColor : rgba(255,0,0,127)
}

is something that does not work in STSS, because it complains about the fact that the alpha value should be between 0 and 1.

Any idea if this could be solved?

STSS not working on node 0.12.0

Converting stss to tss always throws this error

/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:119
    css = css.slice(str.length);
              ^
TypeError: undefined is not a function
    at match (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:119:15)
    at whitespace (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:128:5)
    at rules (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:101:5)
    at stylesheet (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:73:16)
    at module.exports (/usr/local/lib/node_modules/stss/node_modules/css-parse/index.js:485:10)
    at module.exports (/usr/local/lib/node_modules/stss/lib/renderer/css2json.js:438:12)
    at /usr/local/lib/node_modules/stss/stss.js:61:15
    at fn (/usr/local/lib/node_modules/stss/node_modules/async/lib/async.js:641:34)
    at Immediate._onImmediate (/usr/local/lib/node_modules/stss/node_modules/async/lib/async.js:557:34)
    at processImmediate [as _immediateCallback] (timers.js:358:17)

note: I installed stss as global and I have updated some deps to newer versions

dependencies
node 0.12.0
node-sass 2.0.1
css-parse 2.0.0
yargs 3.3.1
chalk 1.0.0

STSS file sample

.addFavWrapper {
    top: 20;
    z-index: 9999;
    height: fill;
    background-color: #f4ead5;
}
#addFavHeader {
    background-color: #fff;
    width: 100%;
    height: 45;
    top: 0;
}
#addFavBody {
    top: 46;
}
#addFavHeaderTitle {
    color: #000;
    @media android {
        font: {
            size: 18;
            family: Alloy.Globals.textLight;
        }
    }
    @media ios {
        font: {
            size: 16;
            family: Alloy.Globals.textLight;
        }
    }
}
#borderBottom {
    width: 100%;
    height: 1;
    bottom: 0;
    background-color: #dbd2bd;
}

#addFavCloseBtn {
    left: 2.5;
    top: 0.5;
    color: #f60a29;
    width: 30;
    height: fill;
    background-color: #fff;
    font: {
        family: flaticon;
        size: 26;
    }
}

#addFavTitle {
    color: #000;
    left: 10;
    top: 10;
    font: {
        family: Alloy.Globals.textLight;
        size: 16;
    }
}

.headerBottomLine {
    height: 2;
    width: fill;
    background-color: #f60a29;
    bottom: 0;
}
#searchField {
    top: 35;
    left: 10;
    right: 10;
    bottom: 10;
    color: #000;
    width: fill;
    height: 40;
    z-index: 20;
    padding-left: 10;
    background-color: #fff;
    border-radius: 4;
    border-width: 1;
    border-color: #f60a29;
    font: {
        family: Alloy.Globals.textLight;
        size: 16;
    }
}

.loadingIndicator {
    height: size;
    width: size;
    z-index: 100;
    top: 93;
    right: 40;
    color: #5e5e5e;
    font: {
        size: 14;
    }
}

#suggestList {
    height: size;
    left: 0;
    right: 0;
    width: fill;
    top: 90;
    border-color: #f4ead5;
    border-radius: 1;
    z-index: 10;
}
#searchItemWrapper {
    height: 44;
    background-color: #fff;
}
#linksTitle {
    color: #000;
    height: 20;
    top: 5;
    left: 10;
    right: 25;
    width: fill;
    word-wrap: true;
    ellipsize: true;
    vertical-align: Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP;
    text-align: left;
    font: {
        size: 14;
        family: Alloy.Globals.textNormal;
    }
}

#linksURL {
    color: gray;
    height: size;
    top: 24;
    left: 10;
    font: {
        size: 11;
        family: Alloy.Globals.textNormal;
    }
}

#addNewBtn {
    top: 85;
    right: 10;
    height: 35;
    width: 80;
    border-radius: 4;
    color: #fff;
    background-color: #f60a29;
    z-index: 9;
    font: {
        family: Alloy.Globals.textBold;
        size: 16;
    }
}

#clearTextBtn {
    visible: false;
    top: 33;
    z-index: 999;
    width: 45;
    height: 45;
    right: 10;
}
#clearTextBg {
    background-color: #fff;
    width: 18;
    height: 18;
    border-radius: 9;
}
#clearTextIcon {
    color: #9b9b9b;
    height: fill;
    text-align: center;
    width: fill;
    left: 0;
    top: 0;
    font: {
        family: flaticon;
        size: 18;
    }
}

#showUrl {
    top: 90;
    opacity: 0;
    left: 20;
    width: 260;
    color: #717171;
    font: {
        family: Alloy.Globals.textLight;
        size: 12;
    }
}