GNOME.org
 

[gnome-shell] build: Switch to sassc for generating style

commit 15d387df5fd3eca1d8c08546b7666ab46474a0de
Author: Florian Müllner <fmuellner gnome org>
Date:   Tue Apr 4 17:49:10 2017 +0200

    build: Switch to sassc for generating style
    
    GTK+ switched from ruby-based sass to c-based sassc for performance
    reasons. It makes sense to follow suit, if not to not require two
    tools for the same job ...
    
    https://bugzilla.gnome.org/show_bug.cgi?id=783210

 configure.ac                             |    2 +-
 data/Makefile.am                         |    4 +-
 data/theme/Gemfile                       |    1 -
 data/theme/README                        |   12 ++++------
 data/theme/gnome-shell-high-contrast.css |   35 ++++++++++++++++++++++++-----
 data/theme/gnome-shell.css               |   35 ++++++++++++++++++++++++-----
 data/theme/parse-sass.sh                 |    8 +++++-
 7 files changed, 72 insertions(+), 25 deletions(-)
---
diff --git a/configure.ac b/configure.ac
index 07e77ea..352448e 100644
--- a/configure.ac
+++ b/configure.ac
@@ -250,7 +250,7 @@ if test -z "$GDBUS_CODEGEN"; then
   AC_MSG_ERROR([gdbus-codegen not found])
 fi
 
-AC_PATH_PROG([SASS],[sass],[])
+AC_PATH_PROG([SASSC],[sassc],[])
 
 AC_CONFIG_FILES([
   Makefile
diff --git a/data/Makefile.am b/data/Makefile.am
index 0128034..c27054e 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -69,9 +69,9 @@ dist_theme_files =                                            \
        $(NULL)
 
 %.css: %.scss $(theme_sources)
-       @if test -n "$(SASS)"; then \
+       @if test -n "$(SASSC)"; then \
                if $(AM_V_P); then PS4= set -x; else echo "  GEN      $@"; fi; \
-               $(SASS) --sourcemap=none -f -q --update $<; \
+               $(SASSC) -a $< $@; \
        fi
 
 resource_files = $(shell $(GLIB_COMPILE_RESOURCES) --sourcedir=$(srcdir)/theme --generate-dependencies 
$(srcdir)/gnome-shell-theme.gresource.xml)
diff --git a/data/theme/README b/data/theme/README
index 4c95dfd..e8a5845 100644
--- a/data/theme/README
+++ b/data/theme/README
@@ -3,10 +3,10 @@ Summary
 
 * Do not edit the CSS directly, edit the source SCSS files and process them with SASS (running
   `make` should do that when you have the required software installed, as described below;
-  run `/.parse-sass.sh` manually if it doesn't)
-* To be able to use the lates/adequate version of sass, install ruby, gem, sass & bundle. 
-  On Fedora F20, this is done with `sudo dnf install rubygems && gem install bundle && bundle install`
-  from the same directory this README resides in.
+  run `./parse-sass.sh` manually if it doesn't)
+* Most SASS preprocessors should produce similar results, however the build system
+  integration and 'parse-sass.sh' script use sassc. You should be able to install
+  it with `pkcon install sassc` or your distribution's package manager.
 
 How to tweak the theme
 ----------------------
@@ -31,6 +31,4 @@ _common.scss        - actual definitions of style for each widget. This is where
                       your changes.
                       
 You can read about SASS at http://sass-lang.com/documentation/. Once you make your changes to the
-_common.scss file, you can either run the ./parse-sass.sh script or keep SASS watching for changes as you
-edit. This is done by running `bundle exec sass --watch --sourcemap=none .` If sass is out of date, or is
-missing, you can install it with `bundle install`.
+_common.scss file, you can either run make or the ./parse-sass.sh script.
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 30c11e2..ba743a4 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -118,6 +118,7 @@ StEntry {
 /* Scrollbars */
 StScrollView.vfade {
   -st-vfade-offset: 68px; }
+
 StScrollView.hfade {
   -st-hfade-offset: 68px; }
 
@@ -152,14 +153,18 @@ StScrollBar {
 /* Check Boxes */
 .check-box StBoxLayout {
   spacing: .8em; }
+
 .check-box StBin {
   width: 24px;
   height: 22px;
   background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg"); }
+
 .check-box:focus StBin {
   background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); }
+
 .check-box:checked StBin {
   background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); }
+
 .check-box:focus:checked StBin {
   background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); }
 
@@ -337,6 +342,7 @@ StScrollBar {
 
 .show-processes-dialog-app-list-item-icon:ltr {
   padding-right: 17px; }
+
 .show-processes-dialog-app-list-item-icon:rtl {
   padding-left: 17px; }
 
@@ -720,9 +726,17 @@ StScrollBar {
     #panel .panel-button .system-status-icon {
       icon-size: 1.09em;
       padding: 0 5px; }
-    .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel 
.panel-button {
+    .unlock-screen #panel .panel-button,
+    .login-screen #panel .panel-button,
+    .lock-screen #panel .panel-button {
       color: white; }
-      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen 
#panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel 
.panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, 
.lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active {
+      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen 
#panel .panel-button:active,
+      .login-screen #panel .panel-button:focus,
+      .login-screen #panel .panel-button:hover,
+      .login-screen #panel .panel-button:active,
+      .lock-screen #panel .panel-button:focus,
+      .lock-screen #panel .panel-button:hover,
+      .lock-screen #panel .panel-button:active {
         color: white; }
   #panel .panel-status-indicators-box,
   #panel .panel-status-menu-box {
@@ -796,6 +810,7 @@ StScrollBar {
 .events-section-title:hover,
 .events-section-title:focus {
   background-color: #0d0d0d; }
+
 .datemenu-today-button:active,
 .world-clocks-button:active,
 .weather-button:active,
@@ -937,7 +952,7 @@ StScrollBar {
   color: #999999;
   font-size: 0.7em;
   /* HACK: the label should be baseline-aligned with a 1em label,
-           fake this with some bottom padding */
+                     fake this with some bottom padding */
   padding-bottom: 0.13em; }
 
 .message-secondary-bin > StIcon {
@@ -1242,6 +1257,7 @@ StScrollBar {
 .list-search-result:active,
 .list-search-result:checked {
   background-color: rgba(23, 25, 26, 0.9); }
+
 .search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
 .list-search-result:focus,
 .list-search-result:selected,
@@ -1249,7 +1265,8 @@ StScrollBar {
   background-color: rgba(238, 238, 236, 0.1);
   transition-duration: 200ms; }
 
-.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
+.app-well-app:active .overview-icon,
+.app-well-app:checked .overview-icon,
 .app-well-app.app-folder:active .overview-icon,
 .app-well-app.app-folder:checked .overview-icon,
 .show-apps:active .overview-icon,
@@ -1258,7 +1275,10 @@ StScrollBar {
 .grid-search-result:checked .overview-icon {
   background-color: rgba(23, 25, 26, 0.9);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); }
-.app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected 
.overview-icon,
+
+.app-well-app:hover .overview-icon,
+.app-well-app:focus .overview-icon,
+.app-well-app:selected .overview-icon,
 .app-well-app.app-folder:hover .overview-icon,
 .app-well-app.app-folder:focus .overview-icon,
 .app-well-app.app-folder:selected .overview-icon,
@@ -1686,7 +1706,8 @@ StScrollBar {
   padding: 100px 0px; }
   .login-dialog-user-selection-box .login-dialog-not-listed-label {
     padding-left: 2px; }
-    .login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label, 
.login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label {
+    .login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label,
+    .login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label {
       color: #eeeeec; }
 
 .login-dialog-not-listed-label {
@@ -1736,6 +1757,7 @@ StScrollBar {
 
 .user-widget-label:ltr {
   padding-left: 18px; }
+
 .user-widget-label:rtl {
   padding-right: 18px; }
 
@@ -1863,6 +1885,7 @@ StScrollBar {
 .lg-dialog StEntry {
   selection-background-color: #bbbbbb;
   selected-color: #333333; }
+
 .lg-dialog .shell-link {
   color: #999999; }
   .lg-dialog .shell-link:hover {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index d9bf7a1..f9e7fd8 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -118,6 +118,7 @@ StEntry {
 /* Scrollbars */
 StScrollView.vfade {
   -st-vfade-offset: 68px; }
+
 StScrollView.hfade {
   -st-hfade-offset: 68px; }
 
@@ -152,14 +153,18 @@ StScrollBar {
 /* Check Boxes */
 .check-box StBoxLayout {
   spacing: .8em; }
+
 .check-box StBin {
   width: 24px;
   height: 22px;
   background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg"); }
+
 .check-box:focus StBin {
   background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); }
+
 .check-box:checked StBin {
   background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); }
+
 .check-box:focus:checked StBin {
   background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); }
 
@@ -337,6 +342,7 @@ StScrollBar {
 
 .show-processes-dialog-app-list-item-icon:ltr {
   padding-right: 17px; }
+
 .show-processes-dialog-app-list-item-icon:rtl {
   padding-left: 17px; }
 
@@ -720,9 +726,17 @@ StScrollBar {
     #panel .panel-button .system-status-icon {
       icon-size: 1.09em;
       padding: 0 5px; }
-    .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel 
.panel-button {
+    .unlock-screen #panel .panel-button,
+    .login-screen #panel .panel-button,
+    .lock-screen #panel .panel-button {
       color: white; }
-      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen 
#panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel 
.panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, 
.lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active {
+      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen 
#panel .panel-button:active,
+      .login-screen #panel .panel-button:focus,
+      .login-screen #panel .panel-button:hover,
+      .login-screen #panel .panel-button:active,
+      .lock-screen #panel .panel-button:focus,
+      .lock-screen #panel .panel-button:hover,
+      .lock-screen #panel .panel-button:active {
         color: white; }
   #panel .panel-status-indicators-box,
   #panel .panel-status-menu-box {
@@ -796,6 +810,7 @@ StScrollBar {
 .events-section-title:hover,
 .events-section-title:focus {
   background-color: #454c4c; }
+
 .datemenu-today-button:active,
 .world-clocks-button:active,
 .weather-button:active,
@@ -937,7 +952,7 @@ StScrollBar {
   color: #8e8e80;
   font-size: 0.7em;
   /* HACK: the label should be baseline-aligned with a 1em label,
-           fake this with some bottom padding */
+                     fake this with some bottom padding */
   padding-bottom: 0.13em; }
 
 .message-secondary-bin > StIcon {
@@ -1242,6 +1257,7 @@ StScrollBar {
 .list-search-result:active,
 .list-search-result:checked {
   background-color: rgba(23, 25, 26, 0.9); }
+
 .search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
 .list-search-result:focus,
 .list-search-result:selected,
@@ -1249,7 +1265,8 @@ StScrollBar {
   background-color: rgba(238, 238, 236, 0.1);
   transition-duration: 200ms; }
 
-.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
+.app-well-app:active .overview-icon,
+.app-well-app:checked .overview-icon,
 .app-well-app.app-folder:active .overview-icon,
 .app-well-app.app-folder:checked .overview-icon,
 .show-apps:active .overview-icon,
@@ -1258,7 +1275,10 @@ StScrollBar {
 .grid-search-result:checked .overview-icon {
   background-color: rgba(23, 25, 26, 0.9);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); }
-.app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected 
.overview-icon,
+
+.app-well-app:hover .overview-icon,
+.app-well-app:focus .overview-icon,
+.app-well-app:selected .overview-icon,
 .app-well-app.app-folder:hover .overview-icon,
 .app-well-app.app-folder:focus .overview-icon,
 .app-well-app.app-folder:selected .overview-icon,
@@ -1686,7 +1706,8 @@ StScrollBar {
   padding: 100px 0px; }
   .login-dialog-user-selection-box .login-dialog-not-listed-label {
     padding-left: 2px; }
-    .login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label, 
.login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label {
+    .login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label,
+    .login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label {
       color: #eeeeec; }
 
 .login-dialog-not-listed-label {
@@ -1736,6 +1757,7 @@ StScrollBar {
 
 .user-widget-label:ltr {
   padding-left: 18px; }
+
 .user-widget-label:rtl {
   padding-right: 18px; }
 
@@ -1863,6 +1885,7 @@ StScrollBar {
 .lg-dialog StEntry {
   selection-background-color: #bbbbbb;
   selected-color: #333333; }
+
 .lg-dialog .shell-link {
   color: #999999; }
   .lg-dialog .shell-link:hover {
diff --git a/data/theme/parse-sass.sh b/data/theme/parse-sass.sh
index e9cda25..eca547e 100755
--- a/data/theme/parse-sass.sh
+++ b/data/theme/parse-sass.sh
@@ -1,3 +1,7 @@
-#!/usr/bin/bash
+#!/usr/bin/sh
 
-bundle exec sass --update --sourcemap=none .
+srcdir=`dirname $0`
+for scss in $srcdir/*.scss
+do
+  sassc -a $scss ${scss%%.scss}.css
+done
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]