Use CSS @import and rename some files.

Since the browser anyway blocks rendering till CSS is loaded, using @import does not cause FOUC. And build system automatically inlines local @imports. Compared to before, we save on a round trip to the server (~20 ms on localhost) just to load fonts CSS. Signed-off-by: Anurag Priyam <anurag08priyam@gmail.com>
wurmlab · Aug 1, 2016 · a2405e8 · a2405e8
1 parent e3e4444
commit a2405e8
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "jspm": "^0.16.2"
   },
   "scripts": {
-    "build": "jspm bundle-sfx --minify --skip-source-maps js/sequenceserver.js public/sequenceserver.min.js && cat public/vendor/github/twbs/bootstrap@3.3.5/css/bootstrap.min.css public/vendor/npm/font-awesome@4.4.0/css/font-awesome.min.css public/css/custom.css | cleancss -o public/sequenceserver.min.css && gzip -kf public/sequenceserver.min.js && gzip -kf public/sequenceserver.min.css"
+    "build": "jspm bundle-sfx --minify --skip-source-maps js/sequenceserver.js public/sequenceserver.min.js && cleancss public/css/sequenceserver.css > public/sequenceserver.min.css && gzip -kf public/sequenceserver.min.js && gzip -kf public/sequenceserver.min.css"
   },
   "jspm": {
     "directories": {

diff --git a/public/css/googlefont-source-sans-pro.css → public/css/fonts.css b/public/css/googlefont-source-sans-pro.css → public/css/fonts.css
diff --git a/public/css/custom.css → public/css/sequenceserver.css b/public/css/custom.css → public/css/sequenceserver.css
@@ -2,6 +2,10 @@
  * Override Bootstrap *
  **********************/
 
+@import url('../vendor/github/twbs/bootstrap@3.3.5/css/bootstrap.min.css');
+@import url('../vendor/npm/font-awesome@4.4.0/css/font-awesome.min.css');
+@import url('fonts.css');
+
 /**
  * For scrollspy, etc.
  */

diff --git a/public/sequenceserver.min.css b/public/sequenceserver.min.css
diff --git a/public/sequenceserver.min.css.gz b/public/sequenceserver.min.css.gz
diff --git a/public/sequenceserver.min.js.gz b/public/sequenceserver.min.js.gz
diff --git a/views/layout.erb b/views/layout.erb
@@ -13,15 +13,13 @@
   <meta name="author" content="Yannick Wurm">
   <meta name="description" content="Custom BLAST server provided by SequenceServer (http://www.sequenceserver.com)"/>
 
-  <link rel="stylesheet" media="screen,print" type="text/css" href="css/googlefont-source-sans-pro.css">
-  <link rel="stylesheet" media="screen,print" type="text/css" href="css/svg.css" class="svg-css"/>
+  <!-- CSS -->
   <% if settings.production? %>
     <link rel="stylesheet" media="screen,print" type="text/css" href="sequenceserver.min.css"/>
   <% else %>
-    <link rel="stylesheet" media="screen,print" type="text/css" href="vendor/github/twbs/bootstrap@3.3.5/css/bootstrap.min.css">
-    <link rel="stylesheet" media="screen,print" type="text/css" href="vendor/npm/font-awesome@4.4.0/css/font-awesome.min.css">
-    <link rel="stylesheet" media="screen,print" type="text/css" href="css/custom.css"/>
+    <link rel="stylesheet" media="screen,print" type="text/css" href="css/sequenceserver.css"/>
   <% end %>
+  <link rel="stylesheet" media="screen,print" type="text/css" href="css/svg.css" class="svg-css"/>
 </head>
 
 <body>