From ddd1dfe896ff5e85fc75f69f43c5cc9e607fa117 Mon Sep 17 00:00:00 2001 From: Vikhyat Korrapati Date: Sat, 8 Mar 2014 18:55:03 +0530 Subject: [PATCH 1/2] 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 9703a778b..000000000 --- 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 000000000..521f0aa0a --- /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 da1d44390..130ed6385 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 11f9df6f7..3fbb0a2b5 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 bc04e6694..44a58c25e 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 0a351392d..5022cf10e 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 92b9cac8d..e5b354376 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 797c590f8..000000000 --- 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 000000000..07c3c6c0b --- /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 9974f5bc0..fe2291b7a 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 4efad99d1..17b10a0fd 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 d8913defb..695404cb9 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 c5a13733a..8c17b5dc0 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 8d7316ef9..fab812b59 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 3309f2f60..52d4bc95c 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 f18aa01a7..273fc3715 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 aa620b1f1..91f3b0947 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 ca852d9da..652cd78a6 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 62189b7e3..1c8fc34b2 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 c860d9198..474443ed8 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 2be321fdb..8acee0e18 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 2fcc26e91..1aaac8bb0 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 516a43f98..066bc3d9e 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 208002a53..1e1fc38ff 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 cf90b4a3f..e876aafe5 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 77c8eee18..f4eb89f4c 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 4efd688ca..9ddd9172b 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 1625ee996..92dbc4d25 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 ab6391c3e..1653d2d10 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 4e3c1a059..4e61d2c07 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 1e8d52e20..000000000 --- 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 000000000..df2a08dc5 --- /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 a247dc5b3..fe2291b7a 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 4efad99d1..17b10a0fd 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 b004b1dab..eaee56055 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 86994df76..4bcc4936b 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 87b508a68..f5e320725 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 1eaac45ae..3c67d3353 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 537c3aab3..15c04bbc8 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 800dab6d2..e5ba8140f 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 ce96d149a..b8e2e7879 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 05a5fd27e..348a08504 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 db20c05b7..347b5f223 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 f11dedb62..bfc365163 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 9b5b9d977..1e45303f9 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 a5b1b833e..e876aafe5 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 0cc735724..1e99085ac 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 d52955a64..da821337e 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 87c53c9e3..30278edb4 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 3d87939f9..a0b2715a0 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 b2268b1a0..3a4c2fef4 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 000000000..4068ef5a0 --- /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 f1102416a..ffa191978 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 f46ea5e59..ba9a98eb8 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 41bff2413..417018b8e 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 4b2662dfc..bbc853561 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 df5ef38085baad851ecc9ad0bebef56554ac60fa Mon Sep 17 00:00:00 2001 From: Vikhyat Korrapati Date: Tue, 1 Apr 2014 17:12:14 +0530 Subject: [PATCH 2/2] 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 ba9a98eb8..e345d7587 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 000000000..0ee01fef5 --- /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 8b6126260..3bfb89d37 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