Build the css without requiring the user to run Sass (#1540)

Author: jcoyne

.gitignore

@@ -9,6 +9,7 @@
 /pkg/
 /spec/reports/
 /tmp/
+/app/assets/builds/
 
 # rspec failure tracking
 .rspec_status

README.md

@@ -117,7 +117,7 @@ You can also run `bin/console` for an interactive prompt that will allow you to
 When any of the javascript components or SASS sources in the gem are changed, this package should be published to NPM with the following steps:
 1. [Install npm](https://www.npmjs.com/get-npm)
 2. Bump the version number in `package.json`
-3. run `npm publish` to push the javascript package to https://npmjs.org/package/arclight
+3. run `npm run build && npm publish` to push the javascript package to https://npmjs.org/package/arclight
 
 ## Contributing
 

app/assets/stylesheets/arclight/build.scss

@@ -0,0 +1,4 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/mixins/breakpoints";
+@import "bootstrap/scss/variables";
+@import "application";

app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss

@@ -48,9 +48,14 @@ $hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3
 
   turbo-frame[busy] {
     &::before {
-      @extend .placeholder !optional;
       animation: placeholder-glow 2s ease-in-out infinite;
-      content: 'Loading...';
+      background-color: currentcolor;
+      content: "Loading...";
+      cursor: wait;
+      display: inline-block;
+      min-height: 1em;
+      opacity: 0.5;
+      vertical-align: middle;
       display: inline-block;
       margin-left: 1.5rem;
     }
@@ -101,8 +106,8 @@ $hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3
 
 .title-container {
   border-bottom: $border-width solid $border-color;
-  padding-bottom: $spacer * .5;
-  margin-bottom: $spacer * .75;
+  padding-bottom: $spacer * 0.5;
+  margin-bottom: $spacer * 0.75;
   display: grid;
   gap: 0.5rem;
   grid-template-areas:
@@ -142,7 +147,7 @@ $hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3
   .online-contents {
     grid-area: online-contents;
     margin-bottom: 1rem;
-  
+
     h2 {
       font-size: 1rem;
       text-transform: uppercase;

app/assets/stylesheets/arclight/modules/icons.scss

@@ -1,5 +1,7 @@
-
-.toggle-bookmark, .breadcrumb-item, .document, .al-online-content-icon {
+.toggle-bookmark,
+.breadcrumb-item,
+.document,
+.al-online-content-icon {
   .blacklight-icons svg {
     height: 1rem;
     width: 1rem;
@@ -11,5 +13,5 @@
 }
 
 .btn > .bi:first-child {
-  @extend .me-1
+  margin-inline-end: 0.25rem !important;
 }

app/assets/stylesheets/arclight/modules/layout.scss

@@ -7,7 +7,7 @@
 .al-show-breadcrumb {
   border-bottom: $border-width solid $border-color;
   padding-bottom: $spacer;
-  margin-bottom: $spacer * .75;
+  margin-bottom: $spacer * 0.75;
   width: 100%;
 
   $bent-arrow: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='15'><path fill-rule='evenodd' d='M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z'></path></svg>";
@@ -53,7 +53,9 @@
     }
   }
 
-  .breadcrumb-item-1, .breadcrumb-item-4 { // breadcrumb-item-3 can have multiple on one line
+  .breadcrumb-item-1,
+  .breadcrumb-item-4 {
+    // breadcrumb-item-3 can have multiple on one line
     flex: 1 0 100%;
     color: $gray-600;
   }
@@ -100,14 +102,14 @@
   border: $default-border-styling;
   background-color: $gray-200;
   font-size: $font-size-sm;
-  padding: ($spacer * .5) $spacer ($spacer * .75);
+  padding: ($spacer * 0.5) $spacer ($spacer * 0.75);
 
   @media (max-width: 767px) {
     margin-top: $spacer;
   }
 
   .al-collection-id {
-    margin-bottom: $spacer * .75;
+    margin-bottom: $spacer * 0.75;
   }
 
   &-options {
@@ -153,12 +155,16 @@
 }
 
 .show-document {
-  @extend .ps-lg-4;
-
   .title-container .bookmark-toggle {
-    @extend .card;
-    @extend .bg-light;
-    @extend .p-2;
+    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
+    padding: 0.5rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .show-document {
+    padding-left: 1.5rem !important;
   }
 }
 
@@ -177,7 +183,10 @@ dl.deflist dt {
   text-align: left;
 }
 
-.chronlist-head, .list-head, .index-head, .table-head {
+.chronlist-head,
+.list-head,
+.index-head,
+.table-head {
   caption-side: top;
   font-size: 1.25rem;
   font-weight: 500;

app/assets/stylesheets/arclight/modules/search_results.scss

@@ -35,7 +35,7 @@
     }
 
     .al-document-abstract-or-scope {
-      margin-bottom: $spacer * .5;
+      margin-bottom: $spacer * 0.5;
       max-width: 45em;
     }
   }
@@ -51,7 +51,7 @@ article.document {
   div.breadcrumb-links,
   dd.al-document-abstract-or-scope,
   dd.al-document-creator {
-    margin-top: ($spacer * .5);
+    margin-top: ($spacer * 0.5);
   }
 
   form.bookmark-toggle.col-auto {
@@ -66,12 +66,12 @@ article.document {
 
   .al-document-abstract-or-scope {
     margin-bottom: 0;
-    margin-top: $spacer * .75;
+    margin-top: $spacer * 0.75;
     max-width: 45em;
   }
   .al-grouped-repository {
     font-size: $font-size-sm;
-    margin-bottom: $spacer * .75;
+    margin-bottom: $spacer * 0.75;
   }
   .al-grouped-title-bar {
     background-color: $gray-200;
@@ -91,7 +91,7 @@ article.document {
     .al-grouped-more {
       border-bottom: $default-border-styling;
       margin-bottom: $spacer;
-      padding: ($spacer * .5) 0;
+      padding: ($spacer * 0.5) 0;
     }
 
     .document {
@@ -121,7 +121,6 @@ article.document {
   margin-bottom: ($spacer * 3) !important;
 }
 
-
 // Compact Search Results
 .documents-compact {
   margin-bottom: $spacer;
@@ -147,7 +146,7 @@ article.document {
 
 .index-document-functions {
   display: flex;
-  @extend .justify-content-end;
+  justify-content: flex-end !important;
 }
 
 .al-document-container.text-muted {
@@ -176,13 +175,14 @@ article.document {
 
 .breadcrumb-links .col {
   flex-basis: auto;
- }
+}
 
 .btn-outline-secondary svg {
   fill: $gray-600;
 }
 
-.btn-outline-secondary:not(:disabled):not(.disabled).active svg, .btn-outline-secondary:hover svg {
+.btn-outline-secondary:not(:disabled):not(.disabled).active svg,
+.btn-outline-secondary:hover svg {
   fill: $white;
 }
 
@@ -197,11 +197,10 @@ article.document {
   justify-content: flex-end;
 }
 
-
 .result-type-group {
   order: -1;
   flex-grow: 1;
-  &.btn-group>.btn {
+  &.btn-group > .btn {
     flex-grow: 0;
   }
 }
@@ -246,6 +245,5 @@ article.document {
     .bookmark-toggle {
       display: none;
     }
-
   }
 }

package.json

@@ -9,9 +9,12 @@
   "devDependencies": {
     "eslint": "^8.26.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.2.0"
+    "eslint-plugin-import": "^2.2.0",
+    "sass": "^1.59.3",
+    "bootstrap": "^5.2.0"
   },
   "scripts": {
+    "build": "sass ./app/assets/stylesheets/arclight/build.scss:./app/assets/builds/arclight.css --no-source-map --load-path=node_modules",
     "lint": "eslint './app/assets/javascripts/**/*.{js,es6}'",
     "lint:fix": "eslint --fix './app/assets/javascripts/**/*.{js,es6}'",
     "test": "echo \"Error: no test specified\" && exit 1"