Problems with []

[Pyreweb]

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: [" )

[RonaldTreur]

Good find, thanks! This will be somewhat harder to solve but I'll get on it!

[jvandijk]

@RonaldTreur I'm also running into this problem and browsing through the SASS reference to see if there is any way to overcome this.... haven't found a strategy yet though.

[Pyreweb]

Note : It works with a variable (Alloy.Globals.myvar) instead of the array (compile, and the apps run)

[jvandijk]

@Pyreweb can you elaborate on that a bit more? Do you have a code example?

[RonaldTreur]

I've been working on this issue during the weekend. I am pretty close to a solution and hope to finish it tonight. So stay tuned!

@Pyreweb Glad it wasn't a showstopper, but this obviously needs a real solution ;-)

[Pyreweb]

@jvandijk when I replace the [] colors part with a var, it works, because the parser doesn't have to...parse it.

In my Alloy.js

Alloy.Globals.DGDBallanger = [
    { color: '#B3C618', offset: 0.0 },
    { color: '#BDC47D', offset: 1.0 }
];

My STSS

#header {
    top: 0;
    height: 60dp;
    width: fill;
    backgroundGradient: {
        type: linear;
        startPoint: { 
            x: 0%;
            y: 0%;
        };
        endPoint: {
            x: 0%;
            y: 100%;
        };
        colors: Alloy.Globals.DGDBallanger;
    };
}

This doesn't really solve the issue, but at least, it works. It may be mentioned in the docs ?

[RonaldTreur]

@Pyreweb While working on this, I also noticed the startPoint and endPoint in your example don't parse correctly (the x & y are removed and fused into one value). This is a separate issue that has my attention as well.

[RonaldTreur]

I pushed a fix (not live on NPM yet). If this somehow breaks other things (or simply doesn't work for you), please let me know! I still need to extend my test-specs.

[jvandijk]

@RonaldTreur nice work! Exactly the approach I tried as well, but failed to implement. I'll test later on.

[Pyreweb]

Looks like it's ok 👍

[jvandijk]

Hey @RonaldTreur I've tested the implementation as well, but run into errors.

With this piece of STSS:

background-gradient: {
        type: 'linear';
        startPoint: {
            y: 0;
        }
        endPoint: {
            y: 3;
        }
        colors: [ $black, $tertiaryColor ];
    };

I get the following error:

[ERROR] STSS: An error occurred while parsing the (generated) SCSS for ****.stss (line: ***):
[ERROR]
[ERROR] -stss-array0-val0$black
[ERROR]
[ERROR] invalid top-level expression

It looks like there is some leading '-' missing, but just don't know for sure. Does this ring a bell?

[RonaldTreur]

Ha... Yes.. That is definitely something I need to fix. Until then variables can't be used as array-values... I'll create a new issue for this!