Ionic-app-scripts: Lot sass color variable make white screen on android

[brandyscarney]

_From @movrack on December 2, 2016 13:45_

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When we use "to many" colors variables in theme/variables.scss color(), then we get a white screen at startup.

Expected behavior:
App start normally without white screen

Steps to reproduce:

1. Create a new App, for example :
   ionic start checkColorBug sidemenu --v2

2. Modify color variable in app/theme/variables.css
   $colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, dark1: #222, dark2: #222, dark3: #222, dark4: #222, dark5: #222, dark6: #222, dark7: #222, dark8: #222, dark9: #222, darka: #222, darkz: #222, darke: #222, darkr: #222, darkt: #222, darky: #222, darku: #222, darki: #222, darko: #222, darkp: #222, darkq: #222, darks: #222, darkd: #222, darkf: #222, darkg: #222, );

Other information:
There is some cartesian product made for sass. Then with the cleanCss step, all values are merged.
It look that the cleanCss process make a to big line for android web view to understand it.
the app crash and an opacity: .4 is presented.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0 
ios-sim version: 5.0.11 
OS: macOS Sierra
Node Version: v5.0.0
Xcode version: Xcode 8.1 Build version 8B62

_Copied from original issue: driftyco/ionic#9465_

[brandyscarney]

_From @codeart1st on December 2, 2016 14:19_

I can confirm this. That's the reason why we override the cleancss config to not override the original main.css file in build folder.

[brandyscarney]

_From @EDumdum on December 2, 2016 14:45_

Same problem.

It would be nice to avoïd generating so many css class (color^2) for component like toolbar, as we usually use one color for the whole application.

[ozexpert]

any workarounds for this? just blocked...

[codeart1st]

package.json:

  "config": {
    "ionic_cleancss": "./config/cleancss.config.js"
  },

config/cleancss.config.js:

// https://www.npmjs.com/package/clean-css

module.exports = {
  /**
   * sourceFileName: the file name of the src css file
   */
  sourceFileName: 'main.css',

  /**
   * destFileName: the file name for the generated minified file
   * TODO: Erstmal den Standard umbenennen, weil das cleancss nicht richtig funktioniert
   */
  destFileName: 'main.min.css'

};

As for now you can disable the override from cleancss task.

[iron9light]

Hi @brandyscarney, any progress about this bug?
Show we report an issue to https://github.com/jakubpawlowicz/clean-css ?

[brandyscarney]

Hey everyone, can I ask what you are using the colors for? Each color that is added will generate about 700 selectors. This means even adding 1 color will make your CSS file a lot larger. In general the $colors map is there to easily theme your app and the Ionic components. If I could get a better understanding of everyone's uses it would help to find a solution to this. Thanks!

[movrack]

In our case, our client give us a color palette about ~20 colors. And "each" components (that we use, because we don't use all components available in ionic) should be able to change it's color.
As example, some times we get list in grey, sometimes in light grey and some times in lighter grey ...
Ion text is sometimes dark sometime darkgrey
And so on (menu, titles, icons, toolbar, arrows...).

[brandyscarney]

Thanks @movrack! Does the user control what colors are shown or are you changing them at runtime? Could anyone send me a repository of a real world situation?

[WhatsThatItsPat]

I vote for dropping the SASS method of coloring components, and moving to a truly dynamic method (i.e. when a user can choose any arbitrary hex color rather than something from a preset list).

I'm working on a sports related app where I need to theme different parts of the app based on a theoretically infinite amount of user-created teams, each with unknown-to-me colors.

Some components like the navbar (which is the most important to me) are tricky to customize. I really want to be able to set any component's color like:

<ion-navbar [color]="myColorObj">
  ...
</ion-navbar>

and...

myColorObj = {
  base: '#55acee',
  contrast: '#ffffff'
}

[iron9light]

In my app, there're 10+ levels, every level will change the theme.

[danbucholtz]

For now, use fewer colors in colors array. That is the best bet. There isn't a simple fix here.

Thanks,
Dan

[ozexpert]

Why is this closed? Suggesting to use fewer color can't be done for legacy apps. This should be reopened.

[ozexpert]

i actually made my own colors

$my-colors {
    star: yellow;
}

and using it like this

.button-md-star, .button-ios-star {
    background-color: map-get($my-colors, star);
}

this works with --prod flag.

[DrMabuse23]

https://github.com/DrMabuse23/ionic2-color-issue breaks android file plugin

[iron9light]

@movrack Where can I find more info about this Android WebView bug?
@brandyscarney If it's caused by very long line of compressed css. Can we use format.wrapAt clean-css option to fix it? It seems ionic-app-scripts not support clean-css option now.

[iron9light]

Guys, this cleancss config can fix this issue:

module.exports = {
  /**
   * sourceFileName: the file name of the src css file
   */
  sourceFileName: process.env.IONIC_OUTPUT_CSS_FILE_NAME,

  /**
   * destFileName: the file name for the generated minified file
   */
  destFileName: process.env.IONIC_OUTPUT_CSS_FILE_NAME,

  options: {
    advanced: false
  }
};

[movrack]

I don't know if it's comming from android web view. I just see I can't set more than ~25 var in array else it make a too big css rendering.

[brandyscarney]

Reopening, we'll take another look at this.

[csguedes]

@brandyscarney, I'd like to explain why I need as many color variables as possible. My Ionic app has a "chameleon feature". What does it mean? Well, it gives the user the option to customize his/her store inside my app. He is able to choose a logo and a color for his store. Then the app applies the colors to ion-navbar like this: <ion-navbar color="{{myTSObject.usersSelectedStore.storeColor}}">. Of course, the colors the user is able to choose come from a select component which has the exact names of my named colors in variables.scss file.

[rafaelgoulart]

Same problem here, with around 40 colors in it.

[roryza]

@rafaelgoulart How big is your main.css? It must be around 3-4MB?

[WhatsThatItsPat]

For my app, I'm looking at a baseline of at least 600 colors. But even if I could use that many, the UX calls for the user to create the colors on their own, so they can't be predefined in Sass anyway.

[DrMabuse23]

Well the solution is simple the CSS files habe to be split !

[Manduro]

It could be nice to have app-scripts log a performance warning when using something like 10+ colors.

[AmitMY]

A possible solution to this is perhaps to have $colors contain all the colors that should be used everywhere, and then have for every for each loop a list of colors of their own, for example:
Lets say I have my app's colors, and I need like a bazillion colors for the toggle, it would go like:

Old

$colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, dark1: #222, dark2: #222, dark3: #222, dark4: #222, dark5: #222, dark6: #222, dark7: #222, dark8: #222, dark9: #222, darka: #222, darkz: #222, darke: #222, darkr: #222, darkt: #222, darky: #222, darku: #222, darki: #222, darko: #222, darkp: #222, darkq: #222, darks: #222, darkd: #222, darkf: #222, darkg: #222);

New

• split into 2 variables

$colors: (primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222);

$colors-toggle: (dark1: #222, dark2: #222, dark3: #222, dark4: #222, dark5: #222, dark6: #222, dark7: #222, dark8: #222, dark9: #222, darka: #222, darkz: #222, darke: #222, darkr: #222, darkt: #222, darky: #222, darku: #222, darki: #222, darko: #222, darkp: #222, darkq: #222, darks: #222, darkd: #222, darkf: #222, darkg: #222)

• add an empty colors list for every component, like

$colors-toggle: () !default;
$colors-toggle-ios: $colors-toggle !default;

• use join in toggle to join the toggle's colors

@each $color-name, $color-base, $color-contrast in get-colors(join($colors-ios, $colors-toggle-ios)) {

This would require 20 new color variables, and a tiny refactoring of 60 files (20*3 platforms).
Its not a lot, but it bases on the assumption that people use lots of colors for specific components (I know I am, I have facebook, twitter, and google-plus colors, that I just use on buttons and on fabs)

[herman1vdb]

Each color that is added will generate about 700 selectors. This means even adding 1 color will make your CSS file a lot larger.

Ouch.

Can we maybe, instead of only defining global $colors, have the option to define colors per component, eg:
in my case I would have:

$colors: (
  primary:    #3ec2cf
);
//$font-colors are additional to $colors (to be merged), eg this list will include primary
$font-colors: (
  secondary:  #4BD8F6,
  danger:     #EC155B,
  light:      #f5f5f5,
  dark:       #222020,
  muted:       #ACACAC,
  warning:    #F8951D,
  success:    #7CC677,
)

//$item-colors are additional to $colors (to be merged), eg this list will include primary
$item-colors: (
  'darkgrey':(
    base:     #302d2d,
    contrast: #aabbee,
  ),
  'black':(
    base:     #0f0f0f,
    contrast: #ffffff,
  ),
  bright:     #ffffff,
);
//$badge-colors are additional to $colors (to be merged), eg this list will include primary
$badge-colors: (
  xp:     #8195C8,
  prod:   #3ec2cf,
  newwe:  #90C63D,
  paid:   #F7941D,
  fail:   #EE125A,
  category-three:(
    base:     #387D84,
    contrast: #0f0f0f,
  ),
  category-two:(
    base:     #3EC0CE,
    contrast: #0f0f0f,
  ),
  category-one:(
    base:     #FFF,
    contrast: #0f0f0f,
  ),
  category-xp:(
    base:     #8493CA,
    contrast: #0f0f0f,
  ),
);

[AmitMY]

@herman1vdb In the next major release (Ionic v4), apps will only load the colors they use for the components they use, so you will be able to define in your main colors many more colors, and they will be loaded strictly when they are needed for the components they are needed for (the ones you are actually using)

[antoine92190]

@AmitMY That's great news! Do you know when the v4 should be expected?

[AmitMY]

My apologies, I hear from the devs that it is only gonna get the scss for the components you use, and their platform, but colors are still (at this point) fully loaded.
So I guess colors are still a problem, but that is at least a 66% saving removing 2 platform's codes.
I will update if I hear anything else on the colors.

@antoine92190 Currently unknown. So hopefully soon, but unfortunately not very soon.

[DrMabuse23]

In the next major release (Ionic v4), apps will only load the colors they use for the components they use, so you will be able to define in your main colors many more colors, and they will be loaded strictly when they are needed for the components they are needed for (the ones you are actually using)

That means i cant set colors dynamic by code ? only when i use it in my html ?

[AmitMY]

@DrMabuse23 Currently it functions the same way as v3, so no custom colors.

[touqeeraslam]

i removed all custom styling from my app for testing but still having whitescreen any help ? @brandyscarney
my variable.scss
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);