From 016786709e79bdc748422da5daed4e0cc622653f Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.alcantara@kaleidos.net>
Date: Mon, 27 Oct 2014 16:10:35 +0100
Subject: [PATCH] improve scss compile performance

Now only scss-compile and css-lint the modified file.
---
 app/styles/components/buttons.scss            |  20 +-
 app/styles/components/popover.scss            |  41 ----
 app/styles/components/spinner.scss            |   1 -
 app/styles/dependencies/helpers.scss          | 213 +++++++-----------
 app/styles/dependencies/mixins.scss           |  46 +++-
 app/styles/extras/dependencies.scss           |  16 ++
 .../{dependencies => layout}/animation.scss   |   0
 app/styles/layout/base.scss                   |  15 ++
 .../{dependencies => layout}/elements.scss    |  12 -
 .../{dependencies => layout}/forms.scss       |   0
 app/styles/layout/mail-notifications.scss     |   0
 app/styles/layout/reset.scss                  | 135 +++++++++++
 .../{dependencies => layout}/typography.scss  |  16 --
 app/styles/main.scss                          | 149 ------------
 app/styles/modules/backlog/backlog-table.scss |   2 +-
 app/styles/modules/common/lightbox.scss       |  45 +---
 app/styles/modules/filters/filters.scss       |  20 --
 ...notion-admin-project-values-us-points.scss |   0
 gulpfile.coffee                               |  88 +++++---
 main-sass.js                                  | 144 ++++++++++++
 package.json                                  |   8 +-
 21 files changed, 504 insertions(+), 467 deletions(-)
 delete mode 100644 app/styles/components/popover.scss
 delete mode 100644 app/styles/components/spinner.scss
 create mode 100644 app/styles/extras/dependencies.scss
 rename app/styles/{dependencies => layout}/animation.scss (100%)
 rename app/styles/{dependencies => layout}/elements.scss (88%)
 rename app/styles/{dependencies => layout}/forms.scss (100%)
 delete mode 100644 app/styles/layout/mail-notifications.scss
 create mode 100644 app/styles/layout/reset.scss
 rename app/styles/{dependencies => layout}/typography.scss (90%)
 delete mode 100755 app/styles/main.scss
 delete mode 100644 app/styles/modules/help/notion-admin-project-values-us-points.scss
 create mode 100644 main-sass.js

diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss
index 957ebaa0..f5a060e1 100755
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@@ -13,26 +13,8 @@
     }
 }
 
-%button,
 .button {
-    @extend %medium;
-    @extend %title;
-    @include transition (background .3s linear);
-    display: inline-block;
-    padding: 7px 40px 6px;
-    text-transform: uppercase;
-    &:hover {
-        @include transition (background .3s linear);
-    }
-    &.loading {
-        span {
-            @include animation (loading .5s linear);
-            @include animation (spin 1s linear infinite);
-        }
-    }
-    .icon {
-        margin-right: .3rem;
-    }
+    @extend %button;
 }
 
 a.button-green {
diff --git a/app/styles/components/popover.scss b/app/styles/components/popover.scss
deleted file mode 100644
index 88175da3..00000000
--- a/app/styles/components/popover.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@mixin popover($width, $top: '', $left: '', $bottom: '', $right: '', $arrow-width: 0, $arrow-top: '', $arrow-left: '', $arrow-bottom: '') {
-    @extend %text;
-    background: $blackish;
-    bottom: #{$bottom};
-    color: $white;
-    display: none;
-    left: #{$left};
-    list-style-type: none;
-    margin: 0;
-    padding: 10px;
-    position: absolute;
-    right: #{$right};
-    top: #{$top};
-    width: $width;
-    z-index: 99;
-    a {
-        @extend %small;
-        border-bottom: 1px solid $grayer;
-        color: $white;
-        display: block;
-        padding: 10px 2px;
-        &:last-child {
-            border: 0;
-        }
-        &:hover {
-            color: $fresh-taiga;
-            @include transition (color .3s linear);
-        }
-    }
-    &:after {
-        @include transform(rotate(45deg));
-        background: $blackish;
-        bottom: #{$arrow-bottom};
-        content: '';
-        height: 15px;
-        left: #{$arrow-left};
-        position: absolute;
-        top: #{$arrow-top};
-        width: #{$arrow-width};
-    }
-}
diff --git a/app/styles/components/spinner.scss b/app/styles/components/spinner.scss
deleted file mode 100644
index 8b137891..00000000
--- a/app/styles/components/spinner.scss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/app/styles/dependencies/helpers.scss b/app/styles/dependencies/helpers.scss
index 667f4ab3..300e1a70 100644
--- a/app/styles/dependencies/helpers.scss
+++ b/app/styles/dependencies/helpers.scss
@@ -1,8 +1,3 @@
-// FTW
-* {
-    box-sizing: border-box;
-}
-
 //Flexbox FTW
 %table-flex {
     align-content: stretch;
@@ -20,132 +15,94 @@
     width: 300px;
 }
 
-// #Reset & Basics (Inspired by E. Meyers)
-//==================================================
-a,
-abbr,
-acronym,
-address,
-applet,
-article,
-aside,
-audio,
-b,
-big,
-blockquote,
-body,
-canvas,
-caption,
-center,
-cite,
-code,
-dd,
-del,
-details,
-dfn,
-div,
-dl,
-dt,
-em,
-embed,
-fieldset,
-figcaption,
-figure,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hgroup,
-html,
-i,
-iframe,
-img,
-ins,
-kbd,
-label,
-legend,
-li,
-mark,
-menu,
-nav,
-object,
-ol,
-output,
-p,
-pre,
-q,
-ruby,
-s,
-samp,
-section,
-small,
-span,
-strike,
-strong,
-sub,
-summary,
-sup,
-table,
-tbody,
-td,
-tfoot,
-th,
-thead,
-time,
-tr,
-tt,
-u,
-ul,
-var,
-video {
-    border: 0;
-    font: inherit;
-    font-size: 100%;
-    margin: 0;
-    padding: 0;
-    vertical-align: baseline;
+
+// __Font Sizes__ //
+%xsmall {font-size: .5rem;}
+%small {font-size: .8rem;}
+%medium {font-size: 1rem;}
+%large {font-size: 1.2rem;}
+%larger {font-size: 1.6rem;}
+%xlarge {font-size: 2rem;}
+%xxlarge {font-size: 3rem;}
+
+// __Font Types__ //
+%title {font-family: 'OpenSans-CondLight';}
+%text {font-family: 'opensans-regular'; line-height: 1.3rem;}
+%bold {font-family: 'opensans-semibold';}
+%taiga {font-family: 'taiga';}
+
+%lightbox {
+    background: rgba($white, .95);
+    bottom: 0;
+    display: none;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 99910;
+    .close {
+        @extend %large;
+        position: absolute;
+        right: 2rem;
+        top: 2rem;
+    }
+    &.open {
+        @include table-flex(center, center, flex, row, wrap, center);
+        @include transition (opacity .3s ease);
+        opacity: 1;
+    }
+    &.close {
+        @include transition (opacity .3s ease);
+        opacity: 0;
+    }
+    .title {
+        text-align: center;
+    }
+    input,
+    textarea,
+    select {
+        margin-bottom: 1rem;
+    }
+    textarea {
+        resize: vertical;
+    }
+    .button-green,
+    .button-gray {
+        display: block;
+        padding: 12px;
+        text-align: center;
+    }
 }
 
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-    display: block;
-}
-body {
-    line-height: 1;
+%button {
+    @extend %medium;
+    @extend %title;
+    @include transition (background .3s linear);
+    display: inline-block;
+    padding: 7px 40px 6px;
+    text-transform: uppercase;
+    &:hover {
+        @include transition (background .3s linear);
+    }
+    &.loading {
+        span {
+            @include animation (loading .5s linear);
+            @include animation (spin 1s linear infinite);
+        }
+    }
+    .icon {
+        margin-right: .3rem;
+    }
 }
 
-ol,
-ul {
-    list-style: none;
+// Background
+%triangled-bg {
+    background: url('/images/bg.png') no-repeat center center;
+    background-size: cover;
 }
 
-blockquote,
-q {
-    quotes: none;
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-    content: '';
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
+%background-taiga {
+    background: url('/images/invitation_bg.jpg') no-repeat center center;
+    background-size: cover;
+}
\ No newline at end of file
diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss
index b58588c9..9e92e00a 100644
--- a/app/styles/dependencies/mixins.scss
+++ b/app/styles/dependencies/mixins.scss
@@ -5,10 +5,6 @@
     text-overflow: ellipsis;
 }
 
-@mixin background-opacity($color: $white, $opacity: .3) {
-    background: rgba($color, $opacity);
-}
-
 // Table Flex - http://devbryce.com/site/flexbox/
 @mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
     @include display($display);
@@ -54,3 +50,45 @@
 @mixin background($red: 255, $green: 255, $blue: 255, $opacity: 1) {
     background: rgba($red, $green, $blue, $opacity);
 }
+
+@mixin popover($width, $top: '', $left: '', $bottom: '', $right: '', $arrow-width: 0, $arrow-top: '', $arrow-left: '', $arrow-bottom: '') {
+    @extend %text;
+    background: $blackish;
+    bottom: #{$bottom};
+    color: $white;
+    display: none;
+    left: #{$left};
+    list-style-type: none;
+    margin: 0;
+    padding: 10px;
+    position: absolute;
+    right: #{$right};
+    top: #{$top};
+    width: $width;
+    z-index: 99;
+    a {
+        @extend %small;
+        border-bottom: 1px solid $grayer;
+        color: $white;
+        display: block;
+        padding: 10px 2px;
+        &:last-child {
+            border: 0;
+        }
+        &:hover {
+            color: $fresh-taiga;
+            @include transition (color .3s linear);
+        }
+    }
+    &:after {
+        @include transform(rotate(45deg));
+        background: $blackish;
+        bottom: #{$arrow-bottom};
+        content: '';
+        height: 15px;
+        left: #{$arrow-left};
+        position: absolute;
+        top: #{$arrow-top};
+        width: #{$arrow-width};
+    }
+}
diff --git a/app/styles/extras/dependencies.scss b/app/styles/extras/dependencies.scss
new file mode 100644
index 00000000..89a7026d
--- /dev/null
+++ b/app/styles/extras/dependencies.scss
@@ -0,0 +1,16 @@
+// Bourbon
+$prefix-for-webkit:    true;
+$prefix-for-mozilla:   true;
+$prefix-for-microsoft: true;
+$prefix-for-opera:     true;
+$prefix-for-spec:      true;
+@import '../bourbon/bourbon';
+
+//#################################################
+//             dependencies
+//#################################################
+
+@import '../dependencies/colors';
+@import '../dependencies/mixins';
+@import '../dependencies/helpers';
+@import '../dependencies/responsive';
diff --git a/app/styles/dependencies/animation.scss b/app/styles/layout/animation.scss
similarity index 100%
rename from app/styles/dependencies/animation.scss
rename to app/styles/layout/animation.scss
diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss
index f9c50732..2377a961 100644
--- a/app/styles/layout/base.scss
+++ b/app/styles/layout/base.scss
@@ -98,6 +98,21 @@ body {
     @include table-flex-child(1, 260px, 0, 260px);
     background: $whitish;
     padding: 2rem 1rem;
+    &.filters-bar {
+        @include table-flex-child(0, 1px, 0, 1px);
+        @include transition(all .2s linear);
+        padding: 0;
+        &.active {
+            @include table-flex-child(1, 260px, 0, 260px);
+            @include transition(all .2s linear);
+            padding: 2em 1em;
+
+            .filters-inner {
+                @include transition (all .4s ease-in);
+                opacity: 1;
+            }
+        }
+    }
 }
 
 .menu-tertiary {
diff --git a/app/styles/dependencies/elements.scss b/app/styles/layout/elements.scss
similarity index 88%
rename from app/styles/dependencies/elements.scss
rename to app/styles/layout/elements.scss
index 77fd94f7..44f9c1da 100644
--- a/app/styles/dependencies/elements.scss
+++ b/app/styles/layout/elements.scss
@@ -51,18 +51,6 @@ sup {
     cursor: move;
 }
 
-// Background
-%triangled-bg {
-    background: url('/images/bg.png') no-repeat center center;
-    background-size: cover;
-}
-
-%background-taiga {
-    background: url('/images/invitation_bg.jpg') no-repeat center center;
-    background-size: cover;
-}
-
-
 //Datepicker
 .pika-single {
     z-index: 999999;
diff --git a/app/styles/dependencies/forms.scss b/app/styles/layout/forms.scss
similarity index 100%
rename from app/styles/dependencies/forms.scss
rename to app/styles/layout/forms.scss
diff --git a/app/styles/layout/mail-notifications.scss b/app/styles/layout/mail-notifications.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/styles/layout/reset.scss b/app/styles/layout/reset.scss
new file mode 100644
index 00000000..99deddc2
--- /dev/null
+++ b/app/styles/layout/reset.scss
@@ -0,0 +1,135 @@
+// FTW
+* {
+    box-sizing: border-box;
+}
+
+
+// #Reset & Basics (Inspired by E. Meyers)
+//==================================================
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+b,
+big,
+blockquote,
+body,
+canvas,
+caption,
+center,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+object,
+ol,
+output,
+p,
+pre,
+q,
+ruby,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+tt,
+u,
+ul,
+var,
+video {
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    margin: 0;
+    padding: 0;
+    vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
diff --git a/app/styles/dependencies/typography.scss b/app/styles/layout/typography.scss
similarity index 90%
rename from app/styles/dependencies/typography.scss
rename to app/styles/layout/typography.scss
index 92dc71b8..bc1edf8c 100755
--- a/app/styles/dependencies/typography.scss
+++ b/app/styles/layout/typography.scss
@@ -25,21 +25,6 @@ h6 {
     }
 }
 
-// __Font Sizes__ //
-%xsmall {font-size: .5rem;}
-%small {font-size: .8rem;}
-%medium {font-size: 1rem;}
-%large {font-size: 1.2rem;}
-%larger {font-size: 1.6rem;}
-%xlarge {font-size: 2rem;}
-%xxlarge {font-size: 3rem;}
-
-// __Font Types__ //
-%title {font-family: 'OpenSans-CondLight';}
-%text {font-family: 'opensans-regular'; line-height: 1.3rem;}
-%bold {font-family: 'opensans-semibold';}
-%taiga {font-family: 'taiga';}
-
 h1 {
     @extend %xxlarge;
     @extend %title;
@@ -255,4 +240,3 @@ a:visited {
 .icon-stats:before {
     content: 'L';
 }
-
diff --git a/app/styles/main.scss b/app/styles/main.scss
deleted file mode 100755
index 43c1aee0..00000000
--- a/app/styles/main.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-// THIS IS THE MAIN INCLUDES SASS FILE
-
-// Bourbon
-$prefix-for-webkit:    true;
-$prefix-for-mozilla:   true;
-$prefix-for-microsoft: true;
-$prefix-for-opera:     true;
-$prefix-for-spec:      true;
-@import 'bourbon/bourbon';
-
-// Codehilite
-@import 'vendor/codehilite.github';
-
-//#################################################
-//             dependencies
-//#################################################
-
-@import 'dependencies/helpers';
-@import 'dependencies/colors';
-@import 'dependencies/typography';
-@import 'dependencies/elements';
-@import 'dependencies/mixins';
-@import 'dependencies/responsive';
-@import 'dependencies/forms';
-@import 'dependencies/animation';
-
-//#################################################
-//             components
-//#################################################
-
-@import 'components/buttons';
-@import 'components/avatar';
-@import 'components/summary';
-@import 'components/popover';
-@import 'components/tag';
-@import 'components/filter';
-@import 'components/taskboard-task';
-@import 'components/kanban-task';
-@import 'components/notification-message';
-@import 'components/basic-table';
-@import 'components/paginator';
-@import 'components/watchers';
-@import 'components/level';
-@import 'components/created-by';
-@import 'components/wysiwyg';
-@import 'components/select-color';
-@import 'components/loader';
-@import 'components/spinner';
-@import 'components/help-notion-button';
-@import 'components/beta';
-
-//#################################################
-//             Modules
-//#################################################
-
-//Common modules
-@import 'modules/common/assigned-to';
-@import 'modules/common/nav';
-@import 'modules/common/projects-nav';
-@import 'modules/common/lightbox';
-@import 'modules/common/colors-table';
-@import 'modules/common/category-config';
-@import 'modules/common/attachments';
-@import 'modules/common/related-tasks';
-@import 'modules/common/history';
-@import 'modules/common/wizard';
-
-//Project modules
-@import 'modules/home-projects-list';
-@import 'modules/home-project';
-@import 'modules/create-project';
-
-//Issues modules
-@import 'modules/issues/issues-table';
-
-//Kanban modules
-@import 'modules/kanban/kanban-table';
-
-//Search modules
-@import 'modules/search/search-filter';
-@import 'modules/search/search-result-table';
-@import 'modules/search/search-in';
-
-//Filters modules
-@import 'modules/filters/filters';
-@import 'modules/filters/list-filters';
-@import 'modules/filters/filter-tags';
-
-//Backlog modules
-@import 'modules/backlog/sprints';
-@import 'modules/backlog/burndown';
-@import 'modules/backlog/backlog-table';
-@import 'modules/backlog/taskboard-table';
-
-//Login modules
-@import 'modules/auth/login-form';
-@import 'modules/auth/register-form';
-@import 'modules/auth/forgot-form';
-@import 'modules/auth/change-password-from-recovery';
-
-//Wiki modules
-@import 'modules/wiki/wiki-nav';
-@import 'modules/wiki/wiki-summary';
-
-//modules admin
-@import 'modules/admin/admin-menu';
-@import 'modules/admin/admin-submenu';
-@import 'modules/admin/admin-submenu-roles';
-@import 'modules/admin/admin-roles';
-@import 'modules/admin/admin-functionalities';
-@import 'modules/admin/admin-membership-table';
-@import 'modules/admin/admin-project-profile';
-@import 'modules/admin/default-values';
-@import 'modules/admin/project-values';
-
-//Modules user Settings
-@import 'modules/user-settings/user-profile';
-@import 'modules/user-settings/user-change-password';
-@import 'modules/user-settings/mail-notifications-table';
-
-//#################################################
-//             Layout
-//#################################################
-
-@import 'layout/base';
-@import 'layout/login';
-@import 'layout/invitation';
-@import 'layout/not-found';
-@import 'layout/backlog';
-@import 'layout/taskboard';
-@import 'layout/us-detail';
-@import 'layout/admin-memberships';
-@import 'layout/admin-project-values';
-@import 'layout/project-colors';
-@import 'layout/kanban';
-@import 'layout/issues';
-@import 'layout/wiki';
-@import 'layout/wiki-edit';
-
-//#################################################
-//             Help
-//#################################################
-@import 'modules/help/lightbox-generic-notion';
-
-//#################################################
-//             Shame
-//#################################################
-
-@import 'shame/shame';
diff --git a/app/styles/modules/backlog/backlog-table.scss b/app/styles/modules/backlog/backlog-table.scss
index 6d4a653e..3c8e7212 100644
--- a/app/styles/modules/backlog/backlog-table.scss
+++ b/app/styles/modules/backlog/backlog-table.scss
@@ -14,7 +14,6 @@
         padding: .5rem 0 .5rem .5rem;
         text-align: left;
         width: 100%;
-
     }
     .backlog-table-title,
     .backlog-table-subtitle,
@@ -24,6 +23,7 @@
         }
         .user-stories {
             width: 100%;
+
         }
         .status {
             @include table-flex-child(0, 150px, 0);
diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss
index a771c4f3..47097423 100644
--- a/app/styles/modules/common/lightbox.scss
+++ b/app/styles/modules/common/lightbox.scss
@@ -1,46 +1,5 @@
-.lightbox,
-%lightbox {
-    @include background-opacity($white, .95);
-    bottom: 0;
-    display: none;
-    left: 0;
-    opacity: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 99910;
-    .close {
-        @extend %large;
-        position: absolute;
-        right: 2rem;
-        top: 2rem;
-    }
-    &.open {
-        @include table-flex(center, center, flex, row, wrap, center);
-        @include transition (opacity .3s ease);
-        opacity: 1;
-    }
-    &.close {
-        @include transition (opacity .3s ease);
-        opacity: 0;
-    }
-    .title {
-        text-align: center;
-    }
-    input,
-    textarea,
-    select {
-        margin-bottom: 1rem;
-    }
-    textarea {
-        resize: vertical;
-    }
-    .button-green,
-    .button-gray {
-        display: block;
-        padding: 12px;
-        text-align: center;
-    }
+.lightbox {
+    @extend %lightbox;
 }
 
 .markdown-preview {
diff --git a/app/styles/modules/filters/filters.scss b/app/styles/modules/filters/filters.scss
index 015df762..a98e3218 100644
--- a/app/styles/modules/filters/filters.scss
+++ b/app/styles/modules/filters/filters.scss
@@ -1,21 +1,3 @@
-.menu-secondary {
-    &.filters-bar {
-        @include table-flex-child(0, 1px, 0, 1px);
-        @include transition(all .2s linear);
-        padding: 0;
-        &.active {
-            @include table-flex-child(1, 260px, 0, 260px);
-            @include transition(all .2s linear);
-            padding: 2em 1em;
-
-            .filters-inner {
-                @include transition (all .4s ease-in);
-                opacity: 1;
-            }
-        }
-    }
-}
-
 .filters {
     h1 {
         vertical-align: baseline;
@@ -47,13 +29,11 @@
         right: .7rem;
         top: .7rem;
     }
-
 }
 
 .filters-inner {
     opacity: 0;
     @include transition (all .1s ease-in);
-
     .loading {
         background: $grayer;
         border: 1px solid #b8b8b8;
diff --git a/app/styles/modules/help/notion-admin-project-values-us-points.scss b/app/styles/modules/help/notion-admin-project-values-us-points.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/gulpfile.coffee b/gulpfile.coffee
index 74d86bda..136346bf 100644
--- a/gulpfile.coffee
+++ b/gulpfile.coffee
@@ -8,6 +8,7 @@ plumber = require("gulp-plumber")
 wrap = require("gulp-wrap")
 rename = require("gulp-rename")
 flatten = require('gulp-flatten')
+gulpif = require('gulp-if')
 
 minifyHTML = require("gulp-minify-html")
 sass = require("gulp-ruby-sass")
@@ -20,11 +21,19 @@ newer = require("gulp-newer")
 cache = require("gulp-cached")
 jadeInheritance = require('gulp-jade-inheritance')
 sourcemaps = require('gulp-sourcemaps')
+insert = require("gulp-insert")
+runSequence = require('run-sequence')
+lazypipe = require('lazypipe')
+rimraf = require('rimraf')
+
+mainSass = require("./main-sass").files
 
 paths = {}
 paths.app = "app/"
 paths.dist = "dist/"
 paths.tmp = "tmp/"
+paths.tmpStyles = paths.tmp + "styles/"
+paths.tmpStylesExtras = "#{paths.tmpStyles}/taiga-front-extras/**/*.css"
 paths.extras = "extras/"
 
 paths.jade = [
@@ -38,9 +47,11 @@ paths.svg = paths.app + "svg/**/*"
 paths.css = paths.app + "styles/vendor/*.css"
 paths.locales = paths.app + "locales/**/*.json"
 paths.sass = [
-    paths.app + "styles/**/*.scss"
+    "#{paths.app}/styles/**/*.scss"
+    "#{paths.app}/plugins/**/*.scss"
     "!#{paths.app}/styles/bourbon/**/*.scss"
-    paths.app + "plugins/**/*.scss"
+    "!#{paths.app}/styles/dependencies/**/*.scss"
+    "!#{paths.app}/styles/extras/**/*.scss"
 ]
 
 paths.coffee = [
@@ -93,6 +104,8 @@ paths.js = [
     paths.app + "plugins/**/*.js"
 ]
 
+isDeploy = process.argv[process.argv.length - 1] == 'deploy'
+
 ############################################################################
 # Layout/CSS Related tasks
 ##############################################################################
@@ -118,38 +131,54 @@ gulp.task "templates", ->
         .pipe(jade({pretty: true, locals:{v:(new Date()).getTime()}}))
         .pipe(gulp.dest(paths.dist))
 
+##############################################################################
+# CSS Related tasks
+##############################################################################
+
 gulp.task "sass-lint", ->
     gulp.src(paths.sass)
         .pipe(cache("sasslint"))
-        .pipe(scsslint({config: "scsslint.yml"}))
+        .pipe(gulpif(!isDeploy, scsslint({config: "scsslint.yml"})))
 
-gulp.task "sass-watch", ["sass-lint"], ->
-    gulp.src(["#{paths.app}/styles/main.scss", "#{paths.app}/plugins/**/*.scss"])
+gulp.task "sass-compile", ["sass-lint"], ->
+    gulp.src(paths.sass)
         .pipe(plumber())
-        .pipe(concat("all.scss"))
-        .pipe(sass())
-        .pipe(rename("app.css"))
+        .pipe(cache("scss"))
+        .pipe(insert.prepend('@import "dependencies";'))
+        .pipe(sass({
+            'sourcemap=none': true,
+            loadPath: [
+                "#{paths.app}styles/extras/"
+            ]
+        }))
+        .pipe(gulp.dest(paths.tmpStyles))
+
+csslintChannel = lazypipe()
+  .pipe(csslint, "csslintrc.json")
+  .pipe(csslint.reporter)
+
+gulp.task "css-lint-app", ->
+    gulp.src(mainSass.concat([paths.tmpStylesExtras]))
+        .pipe(cache("csslint"))
+        .pipe(gulpif(!isDeploy, csslintChannel()))
+
+gulp.task "css-join", ["css-lint-app"], ->
+    gulp.src(mainSass.concat([paths.tmpStylesExtras]))
+        .pipe(concat("app.css"))
         .pipe(gulp.dest(paths.tmp))
 
-gulp.task "sass-deploy", ->
-    gulp.src(["#{paths.app}/styles/main.scss", "#{paths.app}/plugins/**/*.scss"])
-        .pipe(plumber())
-        .pipe(concat("all.scss"))
-        .pipe(sass())
-        .pipe(rename("app.css"))
-        .pipe(gulp.dest(paths.tmp))
+gulp.task "css-app", ->
+    runSequence("sass-compile", "css-join")
 
 gulp.task "css-vendor", ->
     gulp.src(paths.css)
         .pipe(concat("vendor.css"))
         .pipe(gulp.dest(paths.tmp))
 
-gulp.task "css-lint-app", ["sass-watch"],  ->
-    gulp.src(paths.tmp + "app.css")
-        .pipe(csslint("csslintrc.json"))
-        .pipe(csslint.reporter())
+gulp.task "delete-tmp-styles", (cb) ->
+    rimraf(paths.tmpStyles, cb)
 
-gulp.task "styles-watch", ["sass-watch", "css-vendor", "css-lint-app"], ->
+gulp.task "styles-watch", ["css-app", "css-vendor"], ->
     _paths = [
         paths.tmp + "vendor.css",
         paths.tmp + "app.css"
@@ -157,18 +186,11 @@ gulp.task "styles-watch", ["sass-watch", "css-vendor", "css-lint-app"], ->
 
     gulp.src(_paths)
         .pipe(concat("main.css"))
+        .pipe(gulpif(isDeploy, minifyCSS()))
         .pipe(gulp.dest(paths.dist + "styles/"))
 
-gulp.task "styles-deploy", ["sass-deploy", "css-vendor"], ->
-    _paths = [
-        paths.tmp + "vendor.css",
-        paths.tmp + "app.css"
-    ]
-
-    gulp.src(_paths)
-        .pipe(concat("main.css"))
-        .pipe(minifyCSS())
-        .pipe(gulp.dest(paths.dist + "styles/"))
+gulp.task "styles", ["delete-tmp-styles"], ->
+    gulp.start("styles-watch")
 
 ##############################################################################
 # JS Related tasks
@@ -297,19 +319,21 @@ gulp.task "watch", ->
 
 
 gulp.task "deploy", [
+    "delete-tmp-styles",
     "templates",
     "copy",
     "jade-deploy",
     "app-deploy",
     "jslibs-deploy",
-    "styles-deploy"
+    "styles"
 ]
 
 # The default task (called when you run gulp from cli)
 gulp.task "default", [
+    "delete-tmp-styles",
     "copy",
     "templates",
-    "styles-watch",
+    "styles",
     "app-watch",
     "jslibs-watch",
     "jade-deploy",
diff --git a/main-sass.js b/main-sass.js
new file mode 100644
index 00000000..5f77ff33
--- /dev/null
+++ b/main-sass.js
@@ -0,0 +1,144 @@
+exports.files = function () {
+    var base = process.cwd() + "/tmp/styles/";
+
+    var files  = [
+        // Codehilite
+        'vendor/codehilite.github',
+
+        //#################################################
+        //             Layout
+        //#################################################
+
+        'layout/reset',
+        'layout/base',
+        'layout/animation',
+        'layout/typography',
+        'layout/login',
+        'layout/invitation',
+        'layout/elements',
+        'layout/forms',
+        'layout/not-found',
+        'layout/backlog',
+        'layout/taskboard',
+        'layout/us-detail',
+        'layout/admin-memberships',
+        'layout/admin-project-values',
+        'layout/project-colors',
+        'layout/kanban',
+        'layout/issues',
+        'layout/wiki',
+        'layout/wiki-edit',
+
+        //#################################################
+        //             components
+        //#################################################
+
+        'components/buttons',
+        'components/avatar',
+        'components/summary',
+        'components/popover',
+        'components/tag',
+        'components/filter',
+        'components/taskboard-task',
+        'components/kanban-task',
+        'components/notification-message',
+        'components/basic-table',
+        'components/paginator',
+        'components/watchers',
+        'components/level',
+        'components/created-by',
+        'components/wysiwyg',
+        'components/select-color',
+        'components/loader',
+        'components/spinner',
+        'components/help-notion-button',
+        'components/beta',
+
+        //#################################################
+        //             Modules
+        //#################################################
+
+        //Common modules
+        'modules/common/assigned-to',
+        'modules/common/nav',
+        'modules/common/projects-nav',
+        'modules/common/lightbox',
+        'modules/common/colors-table',
+        'modules/common/category-config',
+        'modules/common/attachments',
+        'modules/common/related-tasks',
+        'modules/common/history',
+        'modules/common/wizard',
+
+        //Project modules
+        'modules/home-projects-list',
+        'modules/home-project',
+        'modules/create-project',
+
+        //Issues modules
+        'modules/issues/issues-table',
+
+        //Kanban modules
+        'modules/kanban/kanban-table',
+
+        //Search modules
+        'modules/search/search-filter',
+        'modules/search/search-result-table',
+        'modules/search/search-in',
+
+        //Filters modules
+        'modules/filters/filters',
+        'modules/filters/list-filters',
+        'modules/filters/filter-tags',
+
+        //Backlog modules
+        'modules/backlog/sprints',
+        'modules/backlog/burndown',
+        'modules/backlog/backlog-table',
+        'modules/backlog/taskboard-table',
+
+        //Login modules
+        'modules/auth/login-form',
+        'modules/auth/register-form',
+        'modules/auth/forgot-form',
+        'modules/auth/change-password-from-recovery',
+
+        //Wiki modules
+        'modules/wiki/wiki-nav',
+        'modules/wiki/wiki-summary',
+
+        //modules admin
+        'modules/admin/admin-menu',
+        'modules/admin/admin-submenu',
+        'modules/admin/admin-submenu-roles',
+        'modules/admin/admin-roles',
+        'modules/admin/admin-functionalities',
+        'modules/admin/admin-membership-table',
+        'modules/admin/admin-project-profile',
+        'modules/admin/default-values',
+        'modules/admin/project-values',
+
+        //Modules user Settings
+        'modules/user-settings/user-profile',
+        'modules/user-settings/user-change-password',
+        'modules/user-settings/mail-notifications-table',
+
+        //#################################################
+        //             Help
+        //#################################################
+
+        'modules/help/lightbox-generic-notion',
+
+        //#################################################
+        //             Shame
+        //#################################################
+
+        'shame/shame',
+    ];
+
+    files = files.map(function (file) {
+        return base + file + ".css";
+    });
+
+    return files;
+}();
diff --git a/package.json b/package.json
index 5deac6ac..3f930598 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,8 @@
     "gulp-csslint": "^0.1.5",
     "gulp-flatten": "0.0.4",
     "gulp-if": "0.0.5",
+    "gulp-insert": "^0.4.0",
+    "gulp-intermediate": "^3.0.1",
     "gulp-jade": "^0.5.0",
     "gulp-jade-inheritance": "0.0.4",
     "gulp-minify-css": "^0.3.1",
@@ -37,7 +39,7 @@
     "gulp-notify": "^1.2.5",
     "gulp-plumber": "^0.6.2",
     "gulp-rename": "^1.2.0",
-    "gulp-ruby-sass": "^0.4.3",
+    "gulp-ruby-sass": "^0.7.1",
     "gulp-scss-lint": "0.1.1",
     "gulp-sourcemaps": "^1.2.4",
     "gulp-styledocco": "0.0.1",
@@ -46,7 +48,11 @@
     "gulp-util": "~2.2.14",
     "gulp-watch": "^0.5.4",
     "gulp-wrap": "^0.3.0",
+    "lazypipe": "^0.2.2",
     "readable-stream": "~1.0.31",
+    "rimraf": "^2.2.8",
+    "run-sequence": "^1.0.1",
+    "gulp-if": "^1.2.5",
     "through2": "~0.6.1"
   }
 }