Bloated css output

[woodcox]

Hi, if you look at the dist/snes.css on npm you will notice you are outputting the following code multiple times:

.text-plumber-color {
  color: #f22561;
}
.text-nature-color {
  color: #4bb244;
}
.text-sunshine-color {
  color: #f2c019;
}
.text-ocean-color {
  color: #4eb6d9;
}
.text-turquoise-color {
  color: #40e0d0;
}
.text-phantom-color {
  color: #9b5de5;
}
.text-rose-color {
  color: #f784b2;
}
.text-galaxy-color {
  color: #5a7d9a;
}
.text-ember-color {
  color: #ff6f00;
}

This is because you are importing the common/variables/colors.scss in multiple locations. As this file contains the following scss:

@each $name, $color in $main-colors {
  .text-#{$name}-color {
    color: $color;
  }
}

Every time its imported this @each loop is outputting the css. You probably want to alter this by putting it in a @mixin and using an @include once in a separate file to output the css. This should greatly reduce the size of snes.css file :).

[devMiguelCarrero]

you are right. I'll be doing an update to fix this one. Thanks!

[zeekens]

is this fixed?