uswds version 3 upgrade

_config.yml

@@ -223,11 +223,18 @@ sass:
     - assets/images/opportunity
     - assets/images/projects
     - assets/images/apply
-    - node_modules/uswds/dist/
-    - node_modules/uswds/dist/img
-    - node_modules/uswds/dist/js
-    - node_modules/uswds/dist/scss
+    - node_modules/@uswds/uswds/packages/uswds/_index.scss
   sourcemap: development
   quiet_deps: true
   style: compressed
-  verbose: true
+  verbose: true
+  loader: "sass-loader"
+  options: 
+    - sourceMap: true
+    - sassOptions: 
+        - includePaths: 
+          - "./node_modules/@uswds"
+          - "./node_modules/@uswds/uswds/packages"
+
+
+

_plugins/asset-helper.rb

@@ -3,9 +3,7 @@
 module AssetHelper
     def self.process(site, payload)
         return if @processed
-        FileUtils.cp_r('node_modules/uswds/dist/js/', 'assets/', verbose: true)
-        FileUtils.cp_r('node_modules/uswds/dist/img/', 'assets/uswds/', verbose: true)
-        FileUtils.cp_r('node_modules/uswds/dist/fonts/', 'assets/uswds/', verbose: true)
+        FileUtils.cp_r('node_modules/@uswds/uswds/packages/uswds/_index.scss', 'assets/', verbose: true)
         @processed = true
     end
 end

assets/_index.scss

@@ -0,0 +1,55 @@
+/*! uswds @version */
+
+// Global
+// -------------------------------------
+@forward "uswds-global";
+
+// Helpers
+// -------------------------------------
+@forward "uswds-helpers";
+
+// Components
+// -------------------------------------
+@forward "uswds-typography";
+@forward "usa-accordion/src/styles";
+@forward "usa-alert/src/styles";
+@forward "usa-banner/src/styles";
+@forward "usa-breadcrumb/src/styles";
+@forward "usa-button-group/src/styles";
+@forward "usa-button/src/styles";
+@forward "usa-card/src/styles";
+@forward "usa-checklist/src/styles";
+@forward "usa-collection/src/styles";
+@forward "usa-embed-container/src/styles";
+@forward "usa-footer/src/styles";
+@forward "usa-form/src/styles";
+@forward "usa-graphic-list/src/styles";
+@forward "usa-header/src/styles";
+@forward "usa-hero/src/styles";
+@forward "usa-icon-list/src/styles";
+@forward "usa-icon/src/styles";
+@forward "usa-identifier/src/styles";
+@forward "usa-in-page-navigation/src/styles";
+@forward "usa-language-selector/src/styles";
+@forward "usa-layout-docs/src/styles";
+@forward "usa-layout-grid/src/styles";
+@forward "usa-media-block/src/styles";
+@forward "usa-modal/src/styles";
+@forward "usa-nav/src/styles";
+@forward "usa-pagination/src/styles";
+@forward "usa-process-list/src/styles";
+@forward "usa-search/src/styles";
+@forward "usa-section/src/styles";
+@forward "usa-sidenav/src/styles";
+@forward "usa-site-alert/src/styles";
+@forward "usa-skipnav/src/styles";
+@forward "usa-step-indicator/src/styles";
+@forward "usa-summary-box/src/styles";
+@forward "usa-table/src/styles";
+@forward "usa-tag/src/styles";
+@forward "usa-tooltip/src/styles";
+@forward "uswds-form-controls";
+
+// Utilities
+// -------------------------------------
+@forward "uswds-utilities/src/styles";

assets/css/styles.scss

@@ -13,24 +13,25 @@
 
 // -------------------------------------
 // Import individual theme settings
-@import "theme/uswds-theme-general";
-@import "theme/uswds-theme-typography";
-@import "theme/uswds-theme-spacing";
-@import "theme/uswds-theme-color";
-@import "theme/uswds-theme-utilities";
-@import "theme/uswds-theme-components";
+@forward "uswds-theme-general";
+@forward "uswds-theme-typography";
+@forward "uswds-theme-spacing";
+@forward "uswds-theme-color";
+@forward "uswds-theme-utilities";
+@forward "uswds-theme-components";
 
 // Set correct paths for use with asset pipeline
-$theme-font-path: "../uswds/fonts";
-$theme-image-path: "../uswds/img";
-
+@use "uswds-core" with (
+$theme-font-path: "../uswds/fonts",
+$theme-image-path: "../uswds/img",
+);
 // -------------------------------------
 // Import individual USWDS packages...
-@import "scss/packages/required";
-@import "scss/packages/global";
+@forward "scss/packages/required";
+@forward "scss/packages/global";
 
-@import "scss/packages/uswds-components";
-@import "scss/packages/uswds-utilities";
+@forward "scss/packages/uswds-components";
+@forward "scss/packages/uswds-utilities";
 
 /*
 ----------------------------------------
@@ -51,48 +52,53 @@ i.e.
 //set baseurl for image paths in imported scss files
 $baseurl:"{{ site.baseurl }}";
 
-@import "uswds/settings";
-@import "uswds";
+@forward "uswds/settings";
+@forward "uswds-theme";
+@forward "uswds-theme.scss";
+@forward "uswds";
+
+@forward "usa-button";
+@forward "uswds/menu";
+@forward "uswds/hero";
+@forward "usa-banner";
+@forward "uswds/footer";
+@forward "uswds/form";
+@forward "uswds/identifier";
+@forward "uswds/logo";
+@forward "uswds/process-list";
+@forward "uswds/sidenav";
 
-@import "uswds/button";
-@import "uswds/menu";
-@import "uswds/hero";
-@import "uswds/banner";
-@import "uswds/footer";
-@import "uswds/form";
-@import "uswds/identifier";
-@import "uswds/logo";
-@import "uswds/process-list";
-@import "uswds/sidenav";
+//Load USWDS source code
+@forward "./node_modules/@uswds/uswds/packages/uswds/_index.scss";
 
 // Search.gov
-@import "search.gov/form";
+@forward "search.gov/form";
 
 // Base Overrides and Styles
-@import "base/layout";
-@import "base/overlays";
-@import "base/typography";
+@forward "base/layout";
+@forward "base/overlays";
+@forward "base/typography";
 
 // Component Styles
-@import "component/boxes";
-@import "component/benefits";
-@import "component/highlight";
-@import "component/lists";
-@import "component/media";
-@import "component/quotes";
-@import "component/track-bubbles";
-@import "component/filters";
+@forward "component/boxes";
+@forward "component/benefits";
+@forward "component/highlight";
+@forward "component/lists";
+@forward "component/media";
+@forward "component/quotes";
+@forward "component/track-bubbles";
+@forward "component/filters";
 
 // Page Styles
-@import "pages/about";
-@import "pages/apply";
-@import "pages/faq";
-@import "pages/process";
-@import "pages/home";
-@import "pages/opportunity";
-@import "pages/tracks";
-@import "pages/projects";
-@import "pages/project";
-@import "pages/fellows";
-@import "pages/blog";
+@forward "pages/about";
+@forward "pages/apply";
+@forward "pages/faq";
+@forward "pages/process";
+@forward "pages/home";
+@forward "pages/opportunity";
+@forward "pages/tracks";
+@forward "pages/projects";
+@forward "pages/project";
+@forward "pages/fellows";
+@forward "pages/blog";
 

gulpfile.js

@@ -0,0 +1,15 @@
+
+const uswds = require("@uswds/compile");
+
+uswds.settings.version = 3;
+
+
+uswds.paths.dist.css = './assets/css';
+uswds.paths.dist.theme = './sass/uswds';
+uswds.paths.dist.img = './assets/uswds/img';
+uswds.paths.dist.fonts = './assets/fonts';
+
+
+exports.init = uswds.init;
+exports.compile = uswds.compile;
+exports.watch = uswds.watch;