Extract component-specific stylesheets

app/assets/stylesheets/application.css.scss

@@ -1,7 +1,6 @@
 @import 'variables/app';
-@import 'required';
+@import '@18f/identity-idp-required-scss';
 @import 'design-system-waiting-room';
-@import 'identity-style-guide/dist/assets/scss/packages/required';
 @import 'identity-style-guide/dist/assets/scss/packages/global';
 @import 'identity-style-guide/dist/assets/scss/packages/components';
 @import 'components/all';

app/assets/stylesheets/components/all.scss

@@ -22,5 +22,4 @@
 @import 'spinner-dots';
 @import 'full-screen';
 @import 'step-indicator';
-@import 'troubleshooting-options';
 @import 'i18n-dropdown';

app/assets/stylesheets/utilities/_typography.scss

@@ -16,60 +16,6 @@ body {
   font-size: 20px;
 }
 
-%h1 {
-  line-height: 1.35;
-  font-size: $h1;
-
-  @include at-media('tablet') {
-    font-size: $sm-h1;
-  }
-}
-
-%h2 {
-  line-height: 1.35;
-  font-size: $h2;
-
-  @include at-media('tablet') {
-    font-size: $sm-h2;
-  }
-}
-
-%h3 {
-  line-height: $line-height;
-  font-size: $h3;
-
-  @include at-media('tablet') {
-    font-size: $sm-h3;
-  }
-}
-
-%h4 {
-  line-height: $line-height;
-  font-size: $h4;
-
-  @include at-media('tablet') {
-    font-size: $sm-h4;
-  }
-}
-
-%h5 {
-  line-height: $line-height;
-  font-size: $h5;
-
-  @include at-media('tablet') {
-    font-size: $sm-h5;
-  }
-}
-
-%h6 {
-  line-height: $line-height;
-  font-size: $h6;
-
-  @include at-media('tablet') {
-    font-size: $sm-h6;
-  }
-}
-
 h1,
 .h1 {
   @extend %h1;

app/assets/stylesheets/variables/_app.scss

@@ -1,21 +1,6 @@
-$line-height: 1.5 !default;
 $bold-font-weight: bold !default;
 $heading-font-weight: bold !default;
 
-$h1: 1.5rem !default;
-$h2: 1.25rem !default;
-$h3: 1.125rem !default;
-$h4: 1rem !default;
-$h5: 0.875rem !default;
-$h6: 0.75rem !default;
-
-$sm-h1: 1.75rem !default;
-$sm-h2: 1.375rem !default;
-$sm-h3: 1.125rem !default;
-$sm-h4: 1rem !default;
-$sm-h5: 0.875rem !default;
-$sm-h6: 0.75rem !default;
-
 $form-field-font-size-sm: 1.25rem !default;
 
 $border-width: 1px !default;

app/components/base_component.rb

@@ -1,17 +1,41 @@
 class BaseComponent < ViewComponent::Base
   def before_render
-    return if @rendered_scripts
-    @rendered_scripts = true
-    if helpers.respond_to?(:enqueue_component_scripts) && self.class.scripts.present?
-      helpers.enqueue_component_scripts(*self.class.scripts)
-    end
+    render_assets unless rendered_assets?
   end
 
   def self.scripts
-    @scripts ||= _sidecar_files(['js', 'ts']).map { |file| File.basename(file, '.*') }
+    @scripts ||= sidecar_files_basenames(['js', 'ts'])
+  end
+
+  def self.stylesheets
+    @stylesheets ||= sidecar_files_basenames(['scss'])
   end
 
   def unique_id
     @unique_id ||= SecureRandom.hex(4)
   end
+
+  private
+
+  class << self
+    def sidecar_files_basenames(extensions)
+      _sidecar_files(extensions).map { |file| File.basename(file, '.*') }
+    end
+  end
+
+  def render_assets
+    if helpers.respond_to?(:enqueue_component_scripts) && self.class.scripts.present?
+      helpers.enqueue_component_scripts(*self.class.scripts)
+    end
+
+    if helpers.respond_to?(:enqueue_component_stylesheets) && self.class.stylesheets.present?
+      helpers.enqueue_component_stylesheets(*self.class.stylesheets)
+    end
+
+    @has_rendered_assets = true
+  end
+
+  def rendered_assets?
+    @has_rendered_assets
+  end
 end

app/components/troubleshooting_options_component.rb

@@ -4,6 +4,10 @@ class TroubleshootingOptionsComponent < BaseComponent
 
   attr_reader :tag_options
 
+  def self.stylesheets
+    ['troubleshooting-options']
+  end
+
   def initialize(**tag_options)
     @tag_options = tag_options
   end

app/helpers/stylesheet_helper.rb

@@ -0,0 +1,16 @@
+# rubocop:disable Rails/HelperInstanceVariable
+module StylesheetHelper
+  def stylesheet_tag_once(*names)
+    @stylesheets ||= []
+    @stylesheets |= names
+    nil
+  end
+
+  alias_method :enqueue_component_stylesheets, :stylesheet_tag_once
+
+  def render_stylesheet_once_tags
+    return if @stylesheets.blank?
+    safe_join(@stylesheets.map { |stylesheet| stylesheet_link_tag(stylesheet) })
+  end
+end
+# rubocop:enable Rails/HelperInstanceVariable

app/javascript/packages/build-sass/cli.js

@@ -3,6 +3,7 @@
 /* eslint-disable no-console */
 
 import { watch } from 'chokidar';
+import glob from 'fast-glob';
 import { fileURLToPath } from 'url';
 import { buildFile } from './index.js';
 
@@ -13,12 +14,14 @@ const env = process.env.NODE_ENV || process.env.RAILS_ENV || 'development';
 const isProduction = env === 'production';
 
 const args = process.argv.slice(2);
-const files = args.filter((arg) => !arg.startsWith('-'));
+const patterns = args.filter((arg) => !arg.startsWith('-'));
 const flags = args.filter((arg) => arg.startsWith('-'));
 
 const isWatching = flags.includes('--watch');
 const outDir = flags.find((flag) => flag.startsWith('--out-dir='))?.slice(10);
 
+const files = glob.sync(patterns);
+
 /** @type {BuildOptions & SyncSassOptions} */
 const options = { outDir, optimize: isProduction };
 

app/javascript/packages/build-sass/index.js

@@ -44,7 +44,7 @@ export async function buildFile(file, options) {
   const postcssPlugins = compact([autoprefixer, optimize && cssnano]);
   const postcssResult = await postcss(postcssPlugins).process(sassResult.css, { from: file });
 
-  let outFile = basename(file, '.scss');
+  let outFile = `${basename(basename(file, '.scss'), '.css')}.css`;
   if (outDir) {
     outFile = join(outDir, outFile);
   }

app/javascript/packages/build-sass/package.json

@@ -10,6 +10,7 @@
     "autoprefixer": "^10.4.4",
     "chokidar": "^3.5.3",
     "cssnano": "^5.1.7",
+    "fast-glob": "^3.2.11",
     "postcss": "^8.4.12",
     "sass": "^1.49.0"
   }

app/assets/stylesheets/components/_troubleshooting-options.scss → app/javascript/packages/components/troubleshooting-options.scss

@@ -1,3 +1,5 @@
+@import '@18f/identity-idp-required-scss';
+
 .troubleshooting-options {
   @include u-margin-y(4);
 

app/javascript/packages/document-capture/styles.scss → app/javascript/packages/document-capture/document-capture.scss

@@ -1,4 +1,5 @@
-@import 'identity-style-guide/dist/assets/scss/packages/required';
+@import '@18f/identity-idp-required-scss';
+@import '@18f/identity-components/troubleshooting-options';
 @import './components/acuant-capture';
 @import './components/acuant-capture-canvas';
 @import './components/form-steps';

app/javascript/packages/idp-required-scss/README.md

@@ -0,0 +1,3 @@
+# `@18f/identity-idp-required-scss`
+
+Minimal Sass configuration and mixins required for any stylesheet which intends to make use of [Login.gov Design System](https://design.login.gov/) utilities. This contains only configuration which is specific to the IdP application, and any program-wide configuration should reside in the [design system codebase](https://github.com/18F/identity-style-guide).

app/javascript/packages/idp-required-scss/_index.scss

@@ -0,0 +1,92 @@
+@import 'identity-style-guide/dist/assets/scss/packages/required';
+
+$theme-body-font-size: 'sm';
+$theme-font-path: '.';
+$theme-image-path: 'identity-style-guide/dist/assets/img';
+$theme-global-border-box-sizing: true;
+$theme-global-link-styles: true;
+$theme-grid-container-max-width: 'tablet-lg';
+$theme-header-min-width: 'tablet';
+$theme-link-visited-color: 'primary';
+$theme-style-body-element: true;
+$theme-utility-breakpoints: (
+  'card': false,
+  'card-lg': false,
+  'mobile': false,
+  'mobile-lg': false,
+  'tablet': true,
+  'tablet-lg': false,
+  'desktop': false,
+  'desktop-lg': false,
+  'widescreen': false,
+);
+
+$line-height: 1.5;
+
+$h1: 1.5rem;
+$h2: 1.25rem;
+$h3: 1.125rem;
+$h4: 1rem;
+$h5: 0.875rem;
+$h6: 0.75rem;
+
+$sm-h1: 1.75rem;
+$sm-h2: 1.375rem;
+$sm-h3: 1.125rem;
+$sm-h4: 1rem;
+$sm-h5: 0.875rem;
+$sm-h6: 0.75rem;
+
+%h1 {
+  line-height: 1.35;
+  font-size: $h1;
+
+  @include at-media('tablet') {
+    font-size: $sm-h1;
+  }
+}
+
+%h2 {
+  line-height: 1.35;
+  font-size: $h2;
+
+  @include at-media('tablet') {
+    font-size: $sm-h2;
+  }
+}
+
+%h3 {
+  line-height: $line-height;
+  font-size: $h3;
+
+  @include at-media('tablet') {
+    font-size: $sm-h3;
+  }
+}
+
+%h4 {
+  line-height: $line-height;
+  font-size: $h4;
+
+  @include at-media('tablet') {
+    font-size: $sm-h4;
+  }
+}
+
+%h5 {
+  line-height: $line-height;
+  font-size: $h5;
+
+  @include at-media('tablet') {
+    font-size: $sm-h5;
+  }
+}
+
+%h6 {
+  line-height: $line-height;
+  font-size: $h6;
+
+  @include at-media('tablet') {
+    font-size: $sm-h6;
+  }
+}

app/javascript/packages/idp-required-scss/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@18f/identity-idp-required-scss",
+  "private": true,
+  "version": "1.0.0",
+  "peerDependencies": {
+    "identity-style-guide": "*"
+  }
+}

app/views/layouts/base.html.erb

@@ -29,6 +29,7 @@
   <%= preload_link_tag font_url('public-sans/PublicSans-Bold.woff2') %>
   <%= preload_link_tag font_url('public-sans/PublicSans-Regular.woff2') %>
   <%= stylesheet_link_tag 'application', media: 'all' %>
+  <%= render_stylesheet_once_tags %>
   <!--[if IE 8]>
   <%= javascript_include_tag_without_preload 'es5-shim.min' %>
   <![endif]-->

package.json

@@ -18,7 +18,7 @@
     "clean": "rm -rf public/packs/*",
     "prebuild": "yarn run clean",
     "build": "webpack",
-    "build:css": "build-sass app/assets/stylesheets/*.css.scss --out-dir=app/assets/builds"
+    "build:css": "build-sass 'app/assets/stylesheets/*.css.scss' 'app/javascript/packages/*/*.scss' '!**/_*' --out-dir=app/assets/builds"
   },
   "dependencies": {
     "@babel/core": "^7.15.5",

yarn.lock

@@ -4563,7 +4563,7 @@ minimist-options@4.1.0:
     is-plain-obj "^1.1.0"
     kind-of "^6.0.3"
 
-minimist@1.2.6, minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==