Ionic-framework: Adding name theme variable $colors makes a much bigger main.css.

Created on 26 May 2017 · 4Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] 2.x
[x ] 3.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:
Adding colors to the src/theme/variables.scss file greatly inflates the size of the produced main.css file.

Expected behavior:
I would not expect any file sizes to change by much based on how many colours I have named.

Steps to reproduce:
1: Run "ionic start"
2: Pick any app
3: Run "npm run build --prod"
4: Observe size of /www/build/main.css (should be in the region of 370KB)
5: Edit /src/theme/variables.scss and add a few more (~10) colours into the $colors variable (~line 27-32)
6: Run "npm run build --prod"
7: /www/build/main.css should be much bigger

Other information:

Inside the main.css file it seems to generate every component for every colour (in this example my added one "darkactive").

Ideally I'd like a css file without css not used at all in the app. (I realise in some cases figuring out if something is used is rather tricky).
Surely it can't be correct to generate components for every colour named, and if $colors is "special" and referenced in the ionic components then surely a comment to discourage/manage it's contents or set expectations for the developer that components will be generated in every named colour would be appropiate, and then possible have a secondary "$customcolors" or something would be better.

When these colours are "used" it's generally going to be something like <button color="secondary"> and not <button class="button-clear-ios-darkactive">, so I'm not sure the "generate everything" possible approach is great for size etc but it should theoretically be possible to parse the apps code and work out what's actually required then possible include/exclude files before running sass.

.badge-ios{border-radius:10px}.badge-ios-secondary{color:#fff;background-color:#96c93d}.badge-ios-danger{color:#fff;background-color:#ef4424}.badge-ios-light{color:#fff;background-color:#1ebacf}.badge-ios-dark{color:#fff;background-color:#323c48}.badge-ios-darkactive{color:#fff;background-color:#1f2932}

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

global packages:

    @ionic/cli-utils : 1.2.0
    Ionic CLI        : 3.2.0

local packages:

    @ionic/app-scripts              : 1.3.6
    @ionic/cli-plugin-ionic-angular : 1.2.0
    Ionic Framework                 : ionic-angular 3.1.1

System:

    Node       : v6.10.1
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

Source

roryza

All 4 comments

It's not really a bug, so much as the current state of things. Below are a few issues discussing the need for a dynamic way to set colors, both so we can avoid the css bloat and so we can use colors that are not predefined.

WhatsThatItsPat on 26 May 2017

👎1 👍1

Thanks for that. Apparently my github-foo isn't so good as I did try looking quite a bit in this repo and the app scripts. I'm just glad to know I'm not the only one that cares about this. I still think perhaps the starter projects/documentation should be a bit more clear about how this works. A component that can dynamically set it's "theme" based on a colour input would be great.

roryza on 26 May 2017

👍1

Hello all! Thanks for summing things up @patrickmcd ! I am going to close this issue as a duplicate of driftyco/ionic-app-scripts#506 and you can follow that issue for the status of this.

jgw96 on 26 May 2017

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.