ionic run andoird/ios --prod broken by uglifyjs when processing $colors maps or White Page after build

[wrosb]

Short description of the problem:

Some how process does not recognize (#3F51B5) as a valid color.

Steps to reproduce:

1. Start a new project with ionic start testColorsMap sidemenu/blank --v2 or clone ConferenceApp git clone https://github.com/driftyco/ionic-conference-app.git.
2. Add indigo: #3F51B5 to the $colors map in variables.scss.
3. Run ionic run android --prod.

Error code:
[09:31:39]  sass: node_modules/ionic-angular/themes/ionic.functions.scss, line: 109
            The value ` #3F51B5` must be a color. If you are setting the value as a map make sure both the base and
            contrast are defined as colors. For example: $colors: ( primary: #327eff, secondary: (base: #32db64,
            contrast: #000), );

     L109:    @error $error-msg;

This is happening with ionic (2.1.0) and app-scripts (1.13 & 1.14)

System information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.0 Build version 8A218a

[mhartington]

I'm thinking something else might be wrong as I'm unable to replicate.
Please post the full color map.

[wrosb]

I'm working with these:

$colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, white: #fff, dark: #222, green: #70A73A, green-light: #DDDC1C, green-dark: #A2BD3D, green-nav: #A2BD3D, red: #8E142E, red-dark: #C33C3D, red-light: #C5483F, red-nav: #F44336, indigo: #3F51B5, indigo-dark: #1A237E, orange: #f48c25, orange-nav: #E65100, orange-dark: #FF3D00, gray-light: #BDBDBD, gray-dark: #424242, gray-nav: #212121, gray: #9E9E9E, violet-light: #d40055, violet-dark: #D40078, violet-nav: #be004c, teal-nav: #4DB6AC, teal-dark: #00897B, amber: #FFC107, amber-dark: #FF6F00 );

[wrosb]

I think the problem isn't just with that particular color. I'm testing with other color map and getting error related with another color code. Check this:

$colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, white: #fff, green: #70A73A, green-light: #DDDC1C, green-dark: #A2BD3D, green-nav: #A2BD3D, gray: #9E9E9E, gray-light: #BDBDBD, gray-dark: #424242, gray-nav: #212121, red: #F44336, red-light: #EF5350, red-dark: #B71C1C, red-nav: #B71C1C, blue: #2196F3, blue-light: #42A5F5, blue-dark: #0D47A1, orange:     #FF9800,   orange-ligh:  #FFA726,   orange-dark:  #E65100, violet:     #D40055,   violet-light: #FF086B,   violet-dark:  #A10041,   violet-nav:   #A10041 );

Console Error
[10:38:21] uglifyjs started ... [10:38:22] sass: node_modules/ionic-angular/themes/ionic.functions.scss, line: 109 The value #FF9800` must be a color. If you are setting the value as a map make sure both the base and
contrast are defined as colors. For example: $colors: ( primary: #327eff, secondary: (base: #32db64,
contrast: #000), );

 L109:    @error $error-msg;

[10:38:22] sass failed
[10:38:22] ionic-app-script task: "build"
[10:38:22] Error: Error`

[mhartington]

$colors: (
primary: #387ef5, 
secondary: #32db64, 
danger: #f53d3d, 
light: #f4f4f4, 
dark: #222, 
white: #fff, 
green: #70A73A, 
green-light: #DDDC1C, 
green-dark: #A2BD3D, 
green-nav: #A2BD3D, 
gray: #9E9E9E, 
gray-light: #BDBDBD, 
gray-dark: #424242, 
gray-nav: #212121, 
red: #F44336, 
red-light: #EF5350, 
red-dark: #B71C1C, 
red-nav: #B71C1C, 
blue: #2196F3, 
blue-light: #42A5F5, 
blue-dark: #0D47A1, 
orange:     #FF9800, 
orange-ligh:  #FFA726, 
orange-dark:  #E65100, 
violet:     #D40055, 
violet-light: #FF086B, 
violet-dark:  #A10041, 
violet-nav:   #A10041

 );

The color's map should not be that big.
If you need just one off colors, move them outside of the colors maps.
The map is used for generating the different styles for ALL of the ionic component.
What's probably happening is that the high number of colors in the map is overloading node-sass.

Try removing some of those variables if they're not being used for custom component styles

[wrosb]

I see! thanks.
How big should it be? Where can i read about that?

The curious thing is, I got that error in my conference app testing just with this $color map:

$colors: (
primary: #478aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
favorite: #69BB7B,
twitter: #1da1f4,
google: #dc4a38,
vimeo: #23b6ea,
facebook: #3b5998,
indigo:   #3F51B5,
);

[mhartington]

I'm not able to reproduce any error, even with the conference app.
I'd check your node/npm version to make sure it's at least node 6x and npm 3x

[wrosb]

Mine are:
node: v6.9.4
npm: 4.1.1

[wrosb]

Restore $colors map to default seems to be solve the problem. I will keep this as short as possible.

Should i close this issue? or maybe app-scripts guys should take a look into this?

I think, a various white-pages after build could be related to this issues as there is nothing in docs that advise about keeping short colors map.

[mhartington]

it's outside the scope of app-scripts really.
I will update the docs.