SRCH-3876 + SRCH-4412: Remove therubyracer. Use cssbuilding-rails gem…

… and less node package instead (#1261) * Remove therubyracer, less-rails-bootstrap, and execjs * Install less node packages * feat: add script to process all Less entry files * feat: watch Less files for changes * css gets automatically rebuild in development once a Less file are changed * docs: add bin/dev command to README
GSA · Aug 11, 2023 · 9ca89c0 · 9ca89c0
1 parent 9bae645
commit 9ca89c0
Show file tree

Hide file tree

Showing 107 changed files with 8,668 additions and 173 deletions.
diff --git a/.gitignore b/.gitignore
@@ -50,3 +50,6 @@ mkmf.log
 yarn-debug.log*
 .yarn-integrity
 /node_modules/.yarn-integrity
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
diff --git a/Gemfile b/Gemfile
@@ -120,13 +120,10 @@ gem 'net-http'
 # Assets-related gems
 gem 'coffee-rails', '~> 5.0.0'
 gem 'uglifier', '~> 4.2.0'
-gem 'less-rails-bootstrap', git: 'https://github.com/GSA/less-rails-bootstrap.git',
-                            branch: 'master'
 gem 'compass-rails', '~> 4.0.0'
 gem 'compass-blueprint', '~> 1.0.0'
 gem 'jquery-ui-rails', '~> 6.0.1'
 gem 'jquery-rails', '~> 4.4.0'
-gem 'therubyracer', '~> 0.12.3'
 gem 'yui-compressor', '~> 0.12.0'
 gem 'twitter-typeahead-rails', '~> 0.11.1'
 # Why do we have two versions of Font Awesome?
@@ -142,14 +139,12 @@ gem 'font-awesome-rails', '~> 4.7.0'
 gem 'font-awesome-grunticon-rails',
     git: 'https://github.com/gsa/font-awesome-grunticon-rails',
     ref: '8ad9734a65f7e2d2de934bebe4ee7b460734f96e'
-# execjs 2.8 removed support for therubyracer:
-# https://github.com/rails/execjs/releases/tag/v2.8.0
-# Locking the version to 2.7.x until we remove or replace therubyracer
-gem 'execjs', '~> 2.7.0'
 gem 'react-rails', '~> 2.7.0'
 # Locking to prevent a version mismatch between the gem and the NPM package version
 # See https://github.com/shakacode/shakapacker#upgrading
 gem 'shakapacker', '6.5.4'
+gem 'cssbundling-rails', '~> 1.2' # Management of css (Less) files conversion
+
 # Temporarily locking the 'mail' version until the next version of Rails is released
 # https://github.com/rails/rails/pull/46650
 gem 'mail', '~> 2.7.1'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -24,14 +24,6 @@ GIT
       faraday
       multi_json
 
-GIT
-  remote: https://github.com/GSA/less-rails-bootstrap.git
-  revision: 594b4c0e4d7f458a71709f4fbe6bc94a913792eb
-  branch: master
-  specs:
-    less-rails-bootstrap (3.3.5.0)
-      less-rails (>= 3.0)
-
 GIT
   remote: https://github.com/GSA/resque-priority.git
   revision: bc5dca990d6370ad7eaa01d0b986c90f541a4d18
@@ -248,7 +240,6 @@ GEM
       execjs
     coffee-script-source (1.12.2)
     colorize (0.8.1)
-    commonjs (0.2.7)
     compass (1.0.3)
       chunky_png (~> 1.2)
       compass-core (~> 1.0.2)
@@ -276,6 +267,8 @@ GEM
     crack (0.4.5)
       rexml
     crass (1.0.6)
+    cssbundling-rails (1.2.0)
+      railties (>= 6.0.0)
     cucumber (7.1.0)
       builder (~> 3.2, >= 3.2.4)
       cucumber-core (~> 10.1, >= 10.1.0)
@@ -468,13 +461,6 @@ GEM
       terrapin (~> 0.6.0)
     launchy (2.5.2)
       addressable (~> 2.8)
-    less (2.6.0)
-      commonjs (~> 0.2.7)
-    less-rails (5.0.0)
-      actionpack (>= 5.0)
-      less (~> 2.6.0)
-      sprockets (~> 3.0)
-    libv8 (3.16.14.19)
     llhttp-ffi (0.4.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
@@ -628,7 +614,6 @@ GEM
       redis (>= 4, < 6)
     redlock (1.3.2)
       redis (>= 3.0.0, < 6.0)
-    ref (2.0.0)
     regexp_parser (2.8.0)
     reline (0.3.4)
       io-console (~> 0.5)
@@ -784,9 +769,6 @@ GEM
       unicode-display_width (>= 1.1.1, < 3)
     terrapin (0.6.0)
       climate_control (>= 0.0.3, < 1.0)
-    therubyracer (0.12.3)
-      libv8 (~> 3.16.14.15)
-      ref
     thor (1.2.2)
     thread_safe (0.3.6)
     tilt (2.1.0)
@@ -871,6 +853,7 @@ DEPENDENCIES
   compass-blueprint (~> 1.0.0)
   compass-rails (~> 4.0.0)
   counter_culture (~> 2.9.0)
+  cssbundling-rails (~> 1.2)
   cucumber (~> 7.1)
   cucumber-rails (~> 2.4)
   curb (~> 1.0.1)
@@ -882,7 +865,6 @@ DEPENDENCIES
   elasticsearch-xpack (~> 7.4.0)
   email_spec (~> 2.2)
   exception_notification (~> 4.5)
-  execjs (~> 2.7.0)
   faker (~> 1.8)
   faraday_middleware (~> 0.14.0)
   federal_register (~> 0.6.3)
@@ -906,7 +888,6 @@ DEPENDENCIES
   jquery-ui-rails (~> 6.0.1)
   kt-paperclip (~> 7.1.0)
   launchy (~> 2.5)
-  less-rails-bootstrap!
   loofah (~> 2.19.1)
   mail (~> 2.7.1)
   medusa!
@@ -959,7 +940,6 @@ DEPENDENCIES
   shoulda-kept-assign-to (~> 1.1)
   shoulda-matchers (~> 5.0)
   simplecov (~> 0.17.0)
-  therubyracer (~> 0.12.3)
   truncator (~> 0.1.7)
   turbolinks (~> 5.2.1)
   twitter-typeahead-rails (~> 0.11.1)

diff --git a/Procfile.dev b/Procfile.dev
@@ -0,0 +1,2 @@
+web: unset PORT && bin/rails server
+css: yarn run watch
diff --git a/README.md b/README.md
@@ -203,9 +203,9 @@ To run test searches, you will need a working Bing API key. You can request one
   bing_v7:
     web_subscription_id: *****
 ```
-2. Start your local rails server:
+2. Start your local development environment:
 ```
-rails server
+bin/dev
 ```
 3. Test searches should return results:
 
@@ -303,3 +303,10 @@ Example:
 
 ### Additional developer resources
 * [Local i14y setup](https://github.com/GSA/search-gov/wiki/Setting-up-i14y-with-usasearch-for-development)
+
+## Production
+
+Precompile assets
+```
+bin/rails assets:precompile
+```
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/assets/stylesheets/application.less b/app/assets/stylesheets/application.less
@@ -0,0 +1 @@
+@import "application/index";
diff --git a/app/assets/stylesheets/application_ie_lte9.css b/app/assets/stylesheets/application_ie_lte9.css
@@ -1,3 +1,5 @@
-/*
- *= require shared/_ie_lte9
- */
+/* csslint important:false */
+
+.placeholder {
+  color: #aaa !important;
+}
diff --git a/app/assets/stylesheets/searches.less b/app/assets/stylesheets/searches.less
@@ -0,0 +1 @@
+@import "searches/index";
diff --git a/app/assets/stylesheets/searches/ie.css.less b/app/assets/stylesheets/searches/ie.css.less
diff --git a/app/assets/stylesheets/searches/ie_lt9.css.less b/app/assets/stylesheets/searches/ie_lt9.css.less
diff --git a/app/assets/stylesheets/searches/index.less b/app/assets/stylesheets/searches/index.less
@@ -1,8 +1,3 @@
-/*
- *= depend_on searches/custom_bootstrap/_variables.less
- *= depend_on searches/custom_bootstrap/_mixins.less
- */
-
 @import "searches/custom_bootstrap/_custom_bootstrap.less";
 @import "searches/_collapsible.less";
 @import "searches/_searches.less";

diff --git a/app/assets/stylesheets/searches_mobile.css b/app/assets/stylesheets/searches_mobile.css
diff --git a/app/assets/stylesheets/searches_mobile_ie.css b/app/assets/stylesheets/searches_mobile_ie.css
@@ -1,3 +1,22 @@
-/*
- *= require searches/ie
- */
+/* csslint ids:false, important:false, outline-none:false */
+
+#search-bar #search-button {
+  font: 0/0 a;
+}
+
+a:focus {
+  outline: 3px solid #EDB864 !important;
+}
+
+#search .pagination a, #search .pagination span {
+  border: 2px solid transparent;
+  outline: 0;
+}
+
+#search .pagination a:focus, #search .pagination span:focus {
+  border-color: #EDB864;
+}
+
+.icon {
+  margin-top: -1px;
+}
diff --git a/app/assets/stylesheets/searches_mobile_ie_lt9.css b/app/assets/stylesheets/searches_mobile_ie_lt9.css
@@ -1,3 +1,5 @@
-/*
- *= require searches/ie_lt9
- */
+@media (min-width: 768px) {
+   .show-menu .menu {
+     right: -200px;
+  }
+}
diff --git a/app/assets/stylesheets/shared/_ie_lte9.less b/app/assets/stylesheets/shared/_ie_lte9.less
diff --git a/app/assets/stylesheets/sites.css b/app/assets/stylesheets/sites.css
@@ -1,5 +1,5 @@
 /*
- *= require sites/index
+ *= require sites_base
  *= require select2
  *= require bootstrap-switch/bootstrap-switch
  *= require font-awesome-grunticon-rails-fa-generic

diff --git a/app/assets/stylesheets/sites/ie.css.less b/app/assets/stylesheets/sites/ie.css.less
diff --git a/app/assets/stylesheets/sites/ie7.css.less b/app/assets/stylesheets/sites/ie7.css.less
diff --git a/app/assets/stylesheets/sites/ie_lt9.css.less b/app/assets/stylesheets/sites/ie_lt9.css.less
diff --git a/app/assets/stylesheets/sites/index.less b/app/assets/stylesheets/sites/index.less
@@ -1,6 +1,3 @@
-/*
- *= depend_on sites/_variables
- */
 @import 'sites/_bootstrap.less';
 
 @import 'sites/modules/_layouts.less';

diff --git a/app/assets/stylesheets/sites/modules/_layouts.less b/app/assets/stylesheets/sites/modules/_layouts.less
@@ -11,7 +11,27 @@ body {
 }
 
 .l-row {
-  #grid > .fluid > .row-fluid();
+  width: 100%;
+
+  .clearfix();
+
+  [class*="span"] {
+    .input-block-level();
+    float: left;
+    margin-left: @fluidGridGutterWidth;
+    *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
+  }
+
+  [class*="span"]:first-child {
+    margin-left: 0;
+  }
+
+  .controls-row [class*="span"] + [class*="span"] {
+    margin-left: @fluidGridGutterWidth;
+  }
+
+  .spanX (@gridColumns);
+  .offsetX (@gridColumns);
 }
 
 .l-container {

diff --git a/app/assets/stylesheets/sites_base.less b/app/assets/stylesheets/sites_base.less
@@ -0,0 +1 @@
+@import "sites/index";
diff --git a/app/assets/stylesheets/sites_ie.css b/app/assets/stylesheets/sites_ie.css
@@ -1,3 +1,14 @@
-/*
- *= require sites/ie
- */
+.fa {
+  display: inline-block;
+}
+
+.fa-calendar-black {
+  background-clip: padding-box;
+  padding: 2px;
+}
+
+.fa-reorder-black {
+  background-clip: padding-box;
+  padding: 3px;
+  vertical-align: middle;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		web: unset PORT && bin/rails server
		css: yarn run watch