From ef99ab59a59bf684b80b393dfb1fb38484f1b0c5 Mon Sep 17 00:00:00 2001
From: Vikhyat Korrapati <vikhyatk@gmail.com>
Date: Sat, 8 Mar 2014 18:55:03 +0530
Subject: [PATCH 1/3] Allow importing Discourse styles in custom stylesheets to
 modify vars.

---
 app/assets/stylesheets/common.css.erb         | 17 -----------
 app/assets/stylesheets/common.scss            | 10 +++++++
 .../common/components/badges.css.scss         |  3 --
 .../common/components/buttons.css.scss        |  3 --
 .../components/keyboard_shortcuts.css.scss    |  2 --
 .../common/components/navs.css.scss           |  4 ---
 app/assets/stylesheets/common/input_tip.scss  |  2 +-
 app/assets/stylesheets/desktop.css.erb        |  5 ----
 app/assets/stylesheets/desktop.scss           |  2 ++
 .../stylesheets/desktop/activation.scss       |  3 --
 .../stylesheets/desktop/colorpicker.scss      |  3 --
 app/assets/stylesheets/desktop/combobox.scss  |  5 +---
 app/assets/stylesheets/desktop/compose.scss   |  3 --
 app/assets/stylesheets/desktop/discourse.scss |  5 ----
 app/assets/stylesheets/desktop/faqs.scss      |  6 +---
 app/assets/stylesheets/desktop/header.scss    |  3 --
 app/assets/stylesheets/desktop/history.scss   |  3 --
 app/assets/stylesheets/desktop/lightbox.scss  |  3 --
 app/assets/stylesheets/desktop/login.scss     |  5 +---
 app/assets/stylesheets/desktop/modal.scss     |  3 --
 app/assets/stylesheets/desktop/onebox.scss    |  3 --
 app/assets/stylesheets/desktop/pagedown.scss  |  3 --
 .../stylesheets/desktop/poster_expansion.scss |  3 --
 .../stylesheets/desktop/share_link.scss       |  3 --
 .../stylesheets/desktop/topic-admin-menu.scss |  5 +---
 .../stylesheets/desktop/topic-list.scss       |  3 --
 .../stylesheets/desktop/topic-post.scss       |  4 ---
 app/assets/stylesheets/desktop/topic.scss     |  3 --
 app/assets/stylesheets/desktop/upload.scss    |  3 --
 app/assets/stylesheets/desktop/user.scss      |  2 --
 ..._tagsinput.css => username_tagsinput.scss} |  0
 app/assets/stylesheets/mobile.css.erb         |  4 ---
 app/assets/stylesheets/mobile.scss            |  2 ++
 app/assets/stylesheets/mobile/activation.scss |  3 --
 .../stylesheets/mobile/colorpicker.scss       |  3 --
 app/assets/stylesheets/mobile/compose.scss    |  3 --
 app/assets/stylesheets/mobile/discourse.scss  |  4 ---
 app/assets/stylesheets/mobile/faqs.scss       |  6 +---
 app/assets/stylesheets/mobile/header.scss     |  3 --
 app/assets/stylesheets/mobile/history.scss    |  3 --
 app/assets/stylesheets/mobile/lightbox.scss   |  3 --
 app/assets/stylesheets/mobile/login.scss      |  3 --
 app/assets/stylesheets/mobile/modal.scss      |  3 --
 app/assets/stylesheets/mobile/onebox.scss     |  3 --
 app/assets/stylesheets/mobile/pagedown.scss   |  2 --
 app/assets/stylesheets/mobile/share_link.scss |  3 --
 .../stylesheets/mobile/topic-admin-menu.scss  |  5 +---
 app/assets/stylesheets/mobile/topic-list.scss |  3 --
 app/assets/stylesheets/mobile/topic-post.scss |  2 --
 app/assets/stylesheets/mobile/topic.scss      |  2 --
 app/assets/stylesheets/mobile/upload.scss     |  3 --
 app/assets/stylesheets/mobile/user.scss       |  4 +--
 ..._tagsinput.css => username_tagsinput.scss} |  0
 app/assets/stylesheets/plugins.css.erb        |  7 +++++
 .../vendor/{chosen.css.erb => chosen.scss}    | 10 +++----
 app/models/site_customization.rb              | 28 ++++++++++++++++++-
 .../common/_discourse_stylesheet.html.erb     |  4 ++-
 lib/tasks/assets.rake                         |  4 +--
 58 files changed, 66 insertions(+), 176 deletions(-)
 delete mode 100644 app/assets/stylesheets/common.css.erb
 create mode 100644 app/assets/stylesheets/common.scss
 delete mode 100644 app/assets/stylesheets/desktop.css.erb
 create mode 100644 app/assets/stylesheets/desktop.scss
 rename app/assets/stylesheets/desktop/{username_tagsinput.css => username_tagsinput.scss} (100%)
 delete mode 100644 app/assets/stylesheets/mobile.css.erb
 create mode 100644 app/assets/stylesheets/mobile.scss
 rename app/assets/stylesheets/mobile/{username_tagsinput.css => username_tagsinput.scss} (100%)
 create mode 100644 app/assets/stylesheets/plugins.css.erb
 rename app/assets/stylesheets/vendor/{chosen.css.erb => chosen.scss} (95%)

diff --git a/app/assets/stylesheets/common.css.erb b/app/assets/stylesheets/common.css.erb
deleted file mode 100644
index 9703a778bb6..00000000000
--- a/app/assets/stylesheets/common.css.erb
+++ /dev/null
@@ -1,17 +0,0 @@
-//  Manifest
-//
-
-//= require ./vendor/normalize
-//= require ./common/foundation/base
-//= require ./vendor/font_awesome/font-awesome
-//= require ./vendor/chosen
-//= require_tree ./common/components
-//= require ./common/foundation/helpers
-//= require_tree ./common
-<%
-  # TODO this is very tricky, we want to add a dependency here on files that may not yet exist
-  #  otherwise in dev we are often stuck nuking the tmp/cache directory
-  DiscoursePluginRegistry.stylesheets.each do |css|
-    require_asset(css)
-  end
-%>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
new file mode 100644
index 00000000000..521f0aa0a8c
--- /dev/null
+++ b/app/assets/stylesheets/common.scss
@@ -0,0 +1,10 @@
+@import "vendor/normalize";
+@import "common/foundation/base";
+@import "vendor/font_awesome/font-awesome";
+@import "vendor/chosen";
+@import "common/foundation/helpers";
+@import "common/foundation/mixins";
+@import "common/foundation/variables";
+@import "common/components/*";
+@import "common/admin/*";
+@import "common/input_tip";
diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index da1d44390bd..130ed638519 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/app/assets/stylesheets/common/components/badges.css.scss
@@ -1,6 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 // --------------------------------------------------
 // Badges
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss
index 11f9df6f7f0..3fbb0a2b5fe 100644
--- a/app/assets/stylesheets/common/components/buttons.css.scss
+++ b/app/assets/stylesheets/common/components/buttons.css.scss
@@ -1,6 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 // --------------------------------------------------
 // Buttons
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.css.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.css.scss
index bc04e669460..44a58c25e2c 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.css.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.css.scss
@@ -1,5 +1,3 @@
-@import "../foundation/variables";
-
 .topic-list-item td:first-child, .topic-post {
   background-color: inherit;
   border-left: 1px solid transparent;
diff --git a/app/assets/stylesheets/common/components/navs.css.scss b/app/assets/stylesheets/common/components/navs.css.scss
index 0a351392dc7..5022cf10e93 100644
--- a/app/assets/stylesheets/common/components/navs.css.scss
+++ b/app/assets/stylesheets/common/components/navs.css.scss
@@ -1,7 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-@import "common/foundation/helpers";
-
 // --------------------------------------------------
 // Navigation menus
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/common/input_tip.scss b/app/assets/stylesheets/common/input_tip.scss
index 92b9cac8dc8..e5b354376ca 100644
--- a/app/assets/stylesheets/common/input_tip.scss
+++ b/app/assets/stylesheets/common/input_tip.scss
@@ -27,4 +27,4 @@
   .close:hover {
     opacity: 1.0;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/desktop.css.erb b/app/assets/stylesheets/desktop.css.erb
deleted file mode 100644
index 797c590f842..00000000000
--- a/app/assets/stylesheets/desktop.css.erb
+++ /dev/null
@@ -1,5 +0,0 @@
-//  Manifest
-//
-//= require common
-
-//= require_tree ./desktop
diff --git a/app/assets/stylesheets/desktop.scss b/app/assets/stylesheets/desktop.scss
new file mode 100644
index 00000000000..07c3c6c0b8d
--- /dev/null
+++ b/app/assets/stylesheets/desktop.scss
@@ -0,0 +1,2 @@
+@import "common";
+@import "desktop/*";
diff --git a/app/assets/stylesheets/desktop/activation.scss b/app/assets/stylesheets/desktop/activation.scss
index 9974f5bc03d..fe2291b7a87 100644
--- a/app/assets/stylesheets/desktop/activation.scss
+++ b/app/assets/stylesheets/desktop/activation.scss
@@ -1,9 +1,6 @@
 // Styles used before the user is logged into discourse. For example, activating their
 // account or changing their email.
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 #simple-container {
   @include border-radius-all(10px);
   background-color: $primary_background_color;
diff --git a/app/assets/stylesheets/desktop/colorpicker.scss b/app/assets/stylesheets/desktop/colorpicker.scss
index 4efad99d133..17b10a0fdce 100644
--- a/app/assets/stylesheets/desktop/colorpicker.scss
+++ b/app/assets/stylesheets/desktop/colorpicker.scss
@@ -1,8 +1,5 @@
 // styles for the category badge color picker
 
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 .category-color-editor {
   input {
     width: 70px;
diff --git a/app/assets/stylesheets/desktop/combobox.scss b/app/assets/stylesheets/desktop/combobox.scss
index d8913defb62..695404cb993 100644
--- a/app/assets/stylesheets/desktop/combobox.scss
+++ b/app/assets/stylesheets/desktop/combobox.scss
@@ -1,6 +1,3 @@
-@import "../common/foundation/variables";
-
-
 .category-combobox {
   .badge-category {
     display: inline-block;
@@ -17,4 +14,4 @@
     margin: 6px 0 0 3px;
     font-size: 12px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index a560fbad6ce..19655740498 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -1,8 +1,5 @@
 // styles that apply to the reply pane that slides up to compose replies
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 // hack, this needs to be done cleaner
 #private-message-users {
   width: 400px;
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 8d7316ef92a..fab812b59b8 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -2,11 +2,6 @@
 // BEWARE: changing these styles implies they take effect anywhere they are seen
 // throughout the Discourse application
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-@import "common/foundation/helpers";
-
-
 html {font-size: 14px/19px;}
 
 body {
diff --git a/app/assets/stylesheets/desktop/faqs.scss b/app/assets/stylesheets/desktop/faqs.scss
index 3309f2f60bb..52d4bc95c13 100644
--- a/app/assets/stylesheets/desktop/faqs.scss
+++ b/app/assets/stylesheets/desktop/faqs.scss
@@ -1,7 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-@import "common/foundation/helpers";
-
 // --------------------------------------------------
 // FAQs
 // --------------------------------------------------
@@ -58,4 +54,4 @@
 .nav-pills {
   margin-left:0px !important;
   font: 13px/18px "Helvetica Neue",Helvetica,Arial,sans-serif;
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index f18aa01a799..273fc371569 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -1,6 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 // --------------------------------------------------
 // Discourse header
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
index aa620b1f10a..91f3b0947c6 100644
--- a/app/assets/stylesheets/desktop/history.scss
+++ b/app/assets/stylesheets/desktop/history.scss
@@ -1,8 +1,5 @@
 // styles that apply to the popup that appears when you show the edit history of a post
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 .modal.history-modal {
   .modal-inner-container {
     min-width: 960px;
diff --git a/app/assets/stylesheets/desktop/lightbox.scss b/app/assets/stylesheets/desktop/lightbox.scss
index ca852d9dac0..652cd78a67b 100644
--- a/app/assets/stylesheets/desktop/lightbox.scss
+++ b/app/assets/stylesheets/desktop/lightbox.scss
@@ -1,6 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 .lightbox {
   position: relative;
   display: inline-block;
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 62189b7e336..1c8fc34b233 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -1,8 +1,5 @@
 // style that apply to the login popup
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 #login-buttons {
   button {
     margin: 0 5px 5px 0;
@@ -63,4 +60,4 @@
   .tos-agree {
     margin-bottom: 12px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index c860d9198cc..474443ed8f8 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -1,8 +1,5 @@
 // base styles for every modal popup used in Discourse
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 .modal-open {
   .dropdown-menu {
      z-index: 2050;
diff --git a/app/assets/stylesheets/desktop/onebox.scss b/app/assets/stylesheets/desktop/onebox.scss
index 2be321fdb7e..8acee0e186e 100644
--- a/app/assets/stylesheets/desktop/onebox.scss
+++ b/app/assets/stylesheets/desktop/onebox.scss
@@ -1,6 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 a.loading-onebox {
   background: {
     image: image-url("spinner_96.gif");
diff --git a/app/assets/stylesheets/desktop/pagedown.scss b/app/assets/stylesheets/desktop/pagedown.scss
index 2fcc26e913b..1aaac8bb0b8 100644
--- a/app/assets/stylesheets/desktop/pagedown.scss
+++ b/app/assets/stylesheets/desktop/pagedown.scss
@@ -1,8 +1,5 @@
 // styles that apply to the PageDown editor
 // http://code.google.com/p/pagedown/
-@import "common/foundation/variables";
-
-@import "common/foundation/mixins";
 
 .wmd-panel {
   margin-left: 25%;
diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss
index 516a43f986d..066bc3d9e0e 100644
--- a/app/assets/stylesheets/desktop/poster_expansion.scss
+++ b/app/assets/stylesheets/desktop/poster_expansion.scss
@@ -1,8 +1,5 @@
 // styles that apply to the "share" popup when sharing a link to a post or topic
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 #poster-expansion {
   position: absolute;
   width: 460px;
diff --git a/app/assets/stylesheets/desktop/share_link.scss b/app/assets/stylesheets/desktop/share_link.scss
index 208002a5325..1e1fc38ff2e 100644
--- a/app/assets/stylesheets/desktop/share_link.scss
+++ b/app/assets/stylesheets/desktop/share_link.scss
@@ -1,8 +1,5 @@
 // styles that apply to the "share" popup when sharing a link to a post or topic
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 #share-link {
   position: absolute;
   left: 20px;
diff --git a/app/assets/stylesheets/desktop/topic-admin-menu.scss b/app/assets/stylesheets/desktop/topic-admin-menu.scss
index cf90b4a3fb4..e876aafe594 100644
--- a/app/assets/stylesheets/desktop/topic-admin-menu.scss
+++ b/app/assets/stylesheets/desktop/topic-admin-menu.scss
@@ -1,8 +1,5 @@
 // Styles for the topic admin menu
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 #show-topic-admin {
   position: fixed;
   top: 70px;
@@ -29,4 +26,4 @@
     width: 200px;
     margin-bottom: 5px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 77c8eee18b5..f4eb89f4cb8 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -1,6 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 // --------------------------------------------------
 // Topic lists
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 4efd688ca75..9ddd9172b39 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -1,7 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-@import "common/foundation/helpers";
-
 .gap {
   background-color: lighten($secondary_background_color, 76%);
   padding: 5px 0;
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 1625ee99665..92dbc4d258b 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -1,6 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 .post-info a {
   color: lighten($primary_text_color, 50%);
   padding-right: 5px;
diff --git a/app/assets/stylesheets/desktop/upload.scss b/app/assets/stylesheets/desktop/upload.scss
index ab6391c3eac..1653d2d1000 100644
--- a/app/assets/stylesheets/desktop/upload.scss
+++ b/app/assets/stylesheets/desktop/upload.scss
@@ -1,6 +1,3 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 .add-upload .fa-plus {
   font-size: 10px;
   position: relative;
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 4e3c1a059b4..4e61d2c07c3 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -1,6 +1,4 @@
 // styles that apply to the user page
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
 
 .groups {
   .group-link {
diff --git a/app/assets/stylesheets/desktop/username_tagsinput.css b/app/assets/stylesheets/desktop/username_tagsinput.scss
similarity index 100%
rename from app/assets/stylesheets/desktop/username_tagsinput.css
rename to app/assets/stylesheets/desktop/username_tagsinput.scss
diff --git a/app/assets/stylesheets/mobile.css.erb b/app/assets/stylesheets/mobile.css.erb
deleted file mode 100644
index 1e8d52e20fc..00000000000
--- a/app/assets/stylesheets/mobile.css.erb
+++ /dev/null
@@ -1,4 +0,0 @@
-//  Manifest
-//
-//= require common
-//= require_tree ./mobile
diff --git a/app/assets/stylesheets/mobile.scss b/app/assets/stylesheets/mobile.scss
new file mode 100644
index 00000000000..df2a08dc5a4
--- /dev/null
+++ b/app/assets/stylesheets/mobile.scss
@@ -0,0 +1,2 @@
+@import "common";
+@import "mobile/*";
diff --git a/app/assets/stylesheets/mobile/activation.scss b/app/assets/stylesheets/mobile/activation.scss
index a247dc5b39b..fe2291b7a87 100644
--- a/app/assets/stylesheets/mobile/activation.scss
+++ b/app/assets/stylesheets/mobile/activation.scss
@@ -1,9 +1,6 @@
 // Styles used before the user is logged into discourse. For example, activating their
 // account or changing their email.
 
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 #simple-container {
   @include border-radius-all(10px);
   background-color: $primary_background_color;
diff --git a/app/assets/stylesheets/mobile/colorpicker.scss b/app/assets/stylesheets/mobile/colorpicker.scss
index 4efad99d133..17b10a0fdce 100644
--- a/app/assets/stylesheets/mobile/colorpicker.scss
+++ b/app/assets/stylesheets/mobile/colorpicker.scss
@@ -1,8 +1,5 @@
 // styles for the category badge color picker
 
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 .category-color-editor {
   input {
     width: 70px;
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 96f6d812564..935d5730f99 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -1,8 +1,5 @@
 // styles that apply to the reply pane that slides up to compose replies
 
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 // hack, this needs to be done cleaner
 .private-message input.span8 {
   width: 47%;
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index 86994df7665..4bcc4936bef 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -2,10 +2,6 @@
 // BEWARE: changing these styles implies they take effect anywhere they are seen
 // throughout the Discourse application
 
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-@import "../common/foundation/helpers";
-
 body {
   background-color: $primary_background_color;
 }
diff --git a/app/assets/stylesheets/mobile/faqs.scss b/app/assets/stylesheets/mobile/faqs.scss
index 87b508a68d9..f5e3207250c 100644
--- a/app/assets/stylesheets/mobile/faqs.scss
+++ b/app/assets/stylesheets/mobile/faqs.scss
@@ -1,7 +1,3 @@
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-@import "../common/foundation/helpers";
-
 // --------------------------------------------------
 // FAQs
 // --------------------------------------------------
@@ -59,4 +55,4 @@
 .nav-pills {
   // margin-left:0px !important; this style affects everything, and it has !important! yuck.
   font: 13px/18px "Helvetica Neue",Helvetica,Arial,sans-serif;
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 1eaac45ae9b..3c67d3353f9 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -1,6 +1,3 @@
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 // --------------------------------------------------
 // Discourse header
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/mobile/history.scss b/app/assets/stylesheets/mobile/history.scss
index 537c3aab3b7..15c04bbc88a 100644
--- a/app/assets/stylesheets/mobile/history.scss
+++ b/app/assets/stylesheets/mobile/history.scss
@@ -1,8 +1,5 @@
 // styles that apply to the popup that appears when you show the edit history of a post
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-
 .modal.history-modal {
   .modal-inner-container {
     min-width: 960px;
diff --git a/app/assets/stylesheets/mobile/lightbox.scss b/app/assets/stylesheets/mobile/lightbox.scss
index 800dab6d2d1..e5ba8140f51 100644
--- a/app/assets/stylesheets/mobile/lightbox.scss
+++ b/app/assets/stylesheets/mobile/lightbox.scss
@@ -1,6 +1,3 @@
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 .lightbox {
   position: relative;
   display: inline-block;
diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss
index ce96d149ac1..b8e2e7879bf 100644
--- a/app/assets/stylesheets/mobile/login.scss
+++ b/app/assets/stylesheets/mobile/login.scss
@@ -1,8 +1,5 @@
 // style that apply to the login popup
 
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 .btn-social {
   width: 250px;
   font-size: 16px;
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index 05a5fd27e00..348a085040e 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -1,8 +1,5 @@
 // base styles for every modal popup used in Discourse
 
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 .modal-open {
   .dropdown-menu {
      z-index: 2050;
diff --git a/app/assets/stylesheets/mobile/onebox.scss b/app/assets/stylesheets/mobile/onebox.scss
index db20c05b7d9..347b5f223bb 100644
--- a/app/assets/stylesheets/mobile/onebox.scss
+++ b/app/assets/stylesheets/mobile/onebox.scss
@@ -1,6 +1,3 @@
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 a.loading-onebox {
   background: {
     image: image-url("spinner_96.gif");
diff --git a/app/assets/stylesheets/mobile/pagedown.scss b/app/assets/stylesheets/mobile/pagedown.scss
index f11dedb6224..bfc3651630c 100644
--- a/app/assets/stylesheets/mobile/pagedown.scss
+++ b/app/assets/stylesheets/mobile/pagedown.scss
@@ -1,8 +1,6 @@
 // styles that apply to the PageDown editor
 // http://code.google.com/p/pagedown/
 
-@import "../common/foundation/mixins";
-
 .wmd-panel {
   margin-left: 25%;
   margin-right: 25%;
diff --git a/app/assets/stylesheets/mobile/share_link.scss b/app/assets/stylesheets/mobile/share_link.scss
index 9b5b9d9774c..1e45303f929 100644
--- a/app/assets/stylesheets/mobile/share_link.scss
+++ b/app/assets/stylesheets/mobile/share_link.scss
@@ -1,8 +1,5 @@
 // styles that apply to the "share" popup when sharing a link to a post or topic
 
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 #share-link {
   position: absolute;
   left: 20px;
diff --git a/app/assets/stylesheets/mobile/topic-admin-menu.scss b/app/assets/stylesheets/mobile/topic-admin-menu.scss
index a5b1b833ee2..e876aafe594 100644
--- a/app/assets/stylesheets/mobile/topic-admin-menu.scss
+++ b/app/assets/stylesheets/mobile/topic-admin-menu.scss
@@ -1,8 +1,5 @@
 // Styles for the topic admin menu
 
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 #show-topic-admin {
   position: fixed;
   top: 70px;
@@ -29,4 +26,4 @@
     width: 200px;
     margin-bottom: 5px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 0cc735724e7..1e99085acd1 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -1,6 +1,3 @@
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 // --------------------------------------------------
 // Topic lists
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index d52955a647b..da821337ee3 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -1,5 +1,3 @@
-@import "common/foundation/variables";
-
 .gap {
   background-color: lighten($secondary_background_color, 76%);
   padding: 5px 15px;
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 87c53c9e395..30278edb45a 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -1,5 +1,3 @@
-@import "common/foundation/variables";
-
 .topic-meta-data {
   width: 100%;
   h3 a {margin-left: 10px;}
diff --git a/app/assets/stylesheets/mobile/upload.scss b/app/assets/stylesheets/mobile/upload.scss
index 3d87939f921..a0b2715a024 100644
--- a/app/assets/stylesheets/mobile/upload.scss
+++ b/app/assets/stylesheets/mobile/upload.scss
@@ -1,6 +1,3 @@
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
 .add-upload .fa-plus {
   font-size: 10px;
   position: relative;
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index b2268b1a07f..3a4c2fef44e 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -1,6 +1,4 @@
 // styles that apply to the user page
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
 
 .user-preferences {
   .control-group {
@@ -311,4 +309,4 @@
   .avatar {
     margin: 5px 10px 5px 0;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/mobile/username_tagsinput.css b/app/assets/stylesheets/mobile/username_tagsinput.scss
similarity index 100%
rename from app/assets/stylesheets/mobile/username_tagsinput.css
rename to app/assets/stylesheets/mobile/username_tagsinput.scss
diff --git a/app/assets/stylesheets/plugins.css.erb b/app/assets/stylesheets/plugins.css.erb
new file mode 100644
index 00000000000..4068ef5a095
--- /dev/null
+++ b/app/assets/stylesheets/plugins.css.erb
@@ -0,0 +1,7 @@
+<%
+  # TODO this is very tricky, we want to add a dependency here on files that may not yet exist
+  #  otherwise in dev we are often stuck nuking the tmp/cache directory
+  DiscoursePluginRegistry.stylesheets.each do |css|
+    require_asset(css)
+  end
+%>
diff --git a/app/assets/stylesheets/vendor/chosen.css.erb b/app/assets/stylesheets/vendor/chosen.scss
similarity index 95%
rename from app/assets/stylesheets/vendor/chosen.css.erb
rename to app/assets/stylesheets/vendor/chosen.scss
index f1102416a15..ffa191978a9 100644
--- a/app/assets/stylesheets/vendor/chosen.css.erb
+++ b/app/assets/stylesheets/vendor/chosen.scss
@@ -60,7 +60,7 @@
   width: 12px;
   height: 13px;
   font-size: 1px;
-  background: url(<%=asset_path "chosen-sprite.png"%>) right top no-repeat;
+  background: asset-url("chosen-sprite.png") right top no-repeat;
 }
 .chzn-container-single .chzn-single abbr:hover {
   background-position: right -11px;
@@ -74,7 +74,7 @@
   width: 18px;
 }
 .chzn-container-single .chzn-single div b {
-  background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 0 0;
+  background: asset-url("chosen-sprite.png") no-repeat 0 0;
   display: block;
   width: 100%;
   height: 100%;
@@ -184,7 +184,7 @@
   width: 12px;
   height: 13px;
   font-size: 1px;
-  background: url(<%=asset_path "chosen-sprite.png"%>) right top no-repeat;
+  background: asset-url("chosen-sprite.png") right top no-repeat;
 }
 .chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
   background-position: right -11px;
@@ -264,10 +264,10 @@
   bottom: 0;
 }
 .chzn-container .chzn-results-scroll-down span {
-  background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -4px -3px;
+  background: asset-url("chosen-sprite.png") no-repeat -4px -3px;
 }
 .chzn-container .chzn-results-scroll-up span {
-  background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -22px -3px;
+  background: asset-url("chosen-sprite.png") no-repeat -22px -3px;
 }
 /* @end */
 
diff --git a/app/models/site_customization.rb b/app/models/site_customization.rb
index f46ea5e592a..ba9a98eb8d6 100644
--- a/app/models/site_customization.rb
+++ b/app/models/site_customization.rb
@@ -11,11 +11,37 @@ class SiteCustomization < ActiveRecord::Base
     true
   end
 
+  def compile_stylesheet(scss)
+    stylesheets_path = Rails.root.join('app', 'assets', 'stylesheets')
+
+    # Get the sprockets environment. We need to do this because in production
+    # Rails.application.assets returns Sprockets::Index which does not compile
+    # assets.
+    sprockets = Rails.application.assets
+    if sprockets.is_a?(Sprockets::Index)
+      sprockets = sprockets.instance_variable_get('@environment')
+    end
+
+    file_path = stylesheets_path.join('custom_stylesheet.scss')
+
+    File.open(file_path, 'w') do |f|
+      f.write scss
+    end
+
+    begin
+      compiled = sprockets.find_asset('custom_stylesheet').body
+    ensure
+      FileUtils.rm file_path
+    end
+
+    compiled
+  end
+
   before_save do
     ['stylesheet', 'mobile_stylesheet'].each do |stylesheet_attr|
       if self.send("#{stylesheet_attr}_changed?")
         begin
-          self.send("#{stylesheet_attr}_baked=", Sass.compile(self.send(stylesheet_attr)))
+          self.send("#{stylesheet_attr}_baked=", compile_stylesheet(self.send(stylesheet_attr)))
         rescue Sass::SyntaxError => e
           error = e.sass_backtrace_str("custom stylesheet")
           error.gsub!("\n", '\A ')
diff --git a/app/views/common/_discourse_stylesheet.html.erb b/app/views/common/_discourse_stylesheet.html.erb
index 41bff2413d1..417018b8ea5 100644
--- a/app/views/common/_discourse_stylesheet.html.erb
+++ b/app/views/common/_discourse_stylesheet.html.erb
@@ -6,9 +6,11 @@
   <% end %>
 <%- end %>
 
+<%= stylesheet_link_tag "plugins" %>
+
 <%- if staff? %>
   <%= stylesheet_link_tag "admin"%>
-<%-end%>
+<%- end %>
 
 <%- unless customization_disabled? %>
   <%= SiteCustomization.custom_stylesheet(session[:preview_style], mobile_view? ? :mobile : :desktop) %>
diff --git a/lib/tasks/assets.rake b/lib/tasks/assets.rake
index 4b2662dfc60..bbc853561d1 100644
--- a/lib/tasks/assets.rake
+++ b/lib/tasks/assets.rake
@@ -35,10 +35,10 @@ task 'assets:precompile:before' do
       def evaluate(context, locals, &block)
         ::Sprockets.cache_compiled("sass", data) do
            # HACK, SASS compiler will degrade to aweful perf with huge files
-           # Bypass if larger than 200kb, ensure assets are minified prior
+           # Bypass if larger than 500kb, ensure assets are minified prior
            if context.pathname &&
               context.pathname.to_s =~ /.css$/ &&
-              data.length > 200.kilobytes
+              data.length > 500.kilobytes
              puts "Skipped minifying #{context.pathname} cause it is larger than 200KB, minify in source control or avoid large CSS files"
              data
            else

From 317f9bcd0852c140258c2a6bbd55b9c4a88523ed Mon Sep 17 00:00:00 2001
From: Vikhyat Korrapati <vikhyatk@gmail.com>
Date: Tue, 1 Apr 2014 17:12:14 +0530
Subject: [PATCH 2/3] Use custom DiscourseSassImporter for site customization
 SCSS compilation.

---
 app/models/site_customization.rb       | 32 ++++--------
 lib/discourse_sass_importer.rb         | 71 ++++++++++++++++++++++++++
 spec/models/site_customization_spec.rb | 12 ++++-
 3 files changed, 90 insertions(+), 25 deletions(-)
 create mode 100644 lib/discourse_sass_importer.rb

diff --git a/app/models/site_customization.rb b/app/models/site_customization.rb
index ba9a98eb8d6..e345d758752 100644
--- a/app/models/site_customization.rb
+++ b/app/models/site_customization.rb
@@ -1,3 +1,5 @@
+require_dependency 'discourse_sass_importer'
+
 class SiteCustomization < ActiveRecord::Base
   ENABLED_KEY = '7e202ef2-56d7-47d5-98d8-a9c8d15e57dd'
   # placing this in uploads to ease deployment rules
@@ -12,29 +14,13 @@ class SiteCustomization < ActiveRecord::Base
   end
 
   def compile_stylesheet(scss)
-    stylesheets_path = Rails.root.join('app', 'assets', 'stylesheets')
-
-    # Get the sprockets environment. We need to do this because in production
-    # Rails.application.assets returns Sprockets::Index which does not compile
-    # assets.
-    sprockets = Rails.application.assets
-    if sprockets.is_a?(Sprockets::Index)
-      sprockets = sprockets.instance_variable_get('@environment')
-    end
-
-    file_path = stylesheets_path.join('custom_stylesheet.scss')
-
-    File.open(file_path, 'w') do |f|
-      f.write scss
-    end
-
-    begin
-      compiled = sprockets.find_asset('custom_stylesheet').body
-    ensure
-      FileUtils.rm file_path
-    end
-
-    compiled
+    ::Sass::Engine.new(scss, {
+      syntax: :scss,
+      cache: false,
+      read_cache: false,
+      style: :compressed,
+      filesystem_importer: DiscourseSassImporter
+    }).render
   end
 
   before_save do
diff --git a/lib/discourse_sass_importer.rb b/lib/discourse_sass_importer.rb
new file mode 100644
index 00000000000..0ee01fef5d0
--- /dev/null
+++ b/lib/discourse_sass_importer.rb
@@ -0,0 +1,71 @@
+# This custom importer is used for site customizations. This is similar to the
+# Sprockets::SassImporter implementation provided in sass-rails since that is used
+# during asset precompilation.
+class DiscourseSassImporter < Sass::Importers::Filesystem
+  GLOB = /\*|\[.+\]/
+
+  def initialize(root)
+    @root = Rails.root.join('app', 'assets', 'stylesheets').to_s
+    @same_name_warnings = Set.new
+  end
+
+  def extensions
+    {
+      'css' => :scss,
+      'css.scss' => :scss,
+      'css.sass' => :sass,
+      'css.erb' => :scss,
+      'scss.erb' => :scss,
+      'sass.erb' => :sass,
+      'css.scss.erb' => :scss,
+      'css.sass.erb' => :sass
+    }.merge!(super)
+  end
+
+  def find_relative(name, base, options)
+    if name =~ GLOB
+      glob_imports(name, Pathname.new(base), options)
+    else
+      engine_from_path(name, File.dirname(base), options)
+    end
+  end
+
+  def find(name, options)
+    if name =~ GLOB
+      nil # globs must be relative
+    else
+      engine_from_path(name, root, options)
+    end
+  end
+
+  def each_globbed_file(glob, base_pathname, options)
+    Dir["#{base_pathname}/#{glob}"].sort.each do |filename|
+      next if filename == options[:filename]
+      yield filename # assume all matching files are requirable
+    end
+  end
+
+  def glob_imports(glob, base_pathname, options)
+    contents = ""
+    each_globbed_file(glob, base_pathname.dirname, options) do |filename|
+      unless File.directory?(filename)
+        contents << "@import #{Pathname.new(filename).relative_path_from(base_pathname.dirname).to_s.inspect};\n"
+      end
+    end
+    return nil if contents.empty?
+    Sass::Engine.new(contents, options.merge(
+      filename: base_pathname.to_s,
+      importer: self,
+      syntax: :scss
+    ))
+  end
+
+  private
+
+    def engine_from_path(name, dir, options)
+      full_filename, syntax = Sass::Util.destructure(find_real_file(dir, name, options))
+      return unless full_filename && File.readable?(full_filename)
+
+      Sass::Engine.for_file(full_filename, options)
+    end
+end
diff --git a/spec/models/site_customization_spec.rb b/spec/models/site_customization_spec.rb
index 8b6126260c8..3bfb89d3702 100644
--- a/spec/models/site_customization_spec.rb
+++ b/spec/models/site_customization_spec.rb
@@ -155,12 +155,20 @@ describe SiteCustomization do
 
     it 'should compile scss' do
       c = SiteCustomization.create!(user_id: user.id, name: "test", stylesheet: '$black: #000; #a { color: $black; }', header: '')
-      c.stylesheet_baked.should == "#a {\n  color: black; }\n"
+      c.stylesheet_baked.should == "#a{color:#000}\n"
     end
 
     it 'should compile mobile scss' do
       c = SiteCustomization.create!(user_id: user.id, name: "test", stylesheet: '', header: '', mobile_stylesheet: '$black: #000; #a { color: $black; }', mobile_header: '')
-      c.mobile_stylesheet_baked.should == "#a {\n  color: black; }\n"
+      c.mobile_stylesheet_baked.should == "#a{color:#000}\n"
+    end
+
+    it 'should allow including discourse styles' do
+      c = SiteCustomization.create!(user_id: user.id, name: "test", stylesheet: '@import "desktop";', mobile_stylesheet: '@import "mobile";')
+      c.stylesheet_baked.should_not =~ /Syntax error/
+      c.stylesheet_baked.length.should > 1000
+      c.mobile_stylesheet_baked.should_not =~ /Syntax error/
+      c.mobile_stylesheet_baked.length.should > 1000
     end
 
     it 'should provide an awesome error on failure' do

From 45a23f524aa59d0d26bbf1999192a4aafe7fad32 Mon Sep 17 00:00:00 2001
From: Vikhyat Korrapati <vikhyatk@gmail.com>
Date: Tue, 1 Apr 2014 20:19:34 +0530
Subject: [PATCH 3/3] Fix asset precompilation issues.

---
 .../stylesheets/vendor/{normalize.css => normalize.scss}       | 0
 lib/discourse_sass_importer.rb                                 | 2 +-
 lib/tasks/assets.rake                                          | 3 +++
 3 files changed, 4 insertions(+), 1 deletion(-)
 rename app/assets/stylesheets/vendor/{normalize.css => normalize.scss} (100%)

diff --git a/app/assets/stylesheets/vendor/normalize.css b/app/assets/stylesheets/vendor/normalize.scss
similarity index 100%
rename from app/assets/stylesheets/vendor/normalize.css
rename to app/assets/stylesheets/vendor/normalize.scss
diff --git a/lib/discourse_sass_importer.rb b/lib/discourse_sass_importer.rb
index 0ee01fef5d0..4fbbd47ea76 100644
--- a/lib/discourse_sass_importer.rb
+++ b/lib/discourse_sass_importer.rb
@@ -4,7 +4,7 @@
 class DiscourseSassImporter < Sass::Importers::Filesystem
   GLOB = /\*|\[.+\]/
 
-  def initialize(root)
+  def initialize(*args)
     @root = Rails.root.join('app', 'assets', 'stylesheets').to_s
     @same_name_warnings = Set.new
   end
diff --git a/lib/tasks/assets.rake b/lib/tasks/assets.rake
index bbc853561d1..68ccda938c1 100644
--- a/lib/tasks/assets.rake
+++ b/lib/tasks/assets.rake
@@ -16,6 +16,9 @@ task 'assets:precompile:before' do
   # let's make precompile faster using redis magic
   require 'sprockets'
   require 'digest/sha1'
+  require_dependency 'discourse_sass_importer'
+
+  Sprockets::SassImporter = DiscourseSassImporter
 
   module ::Sprockets