rails_template_18f 0.5.3 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69b1bf665be20b3234b5a6cc358a35167cf3ab4dc7833ba1f8a3615970f2a617
-  data.tar.gz: ec93203edd447a12699c94d57583b7971f846e70f415ad91915860386f83e862
+  metadata.gz: d71812f11d19dc0ed9960407de8d0b3c0755c0d6bb2ba64981af55f0add88657
+  data.tar.gz: 63d920adcc4e1e8acd83805d0edcaf5235f75150226dcd1ee8dcbef303407ba6
 SHA512:
-  metadata.gz: dec9d9bcd8c8111fbcfc826d995fd8197751e93c0c4463fd0d321d3a71b71a920f39340b60df4011cf0ab3ccbce9a6ec71258044cfc11bdae29f271fcde4d978
-  data.tar.gz: 22e0ce9181cef72c2081326175b314e865f752422e9d72a54e74f01fca39e23c70b23659ba5c7372ec4dc141a826f48a691d0f68690ba810ce7fe9e6eab6269b
+  metadata.gz: bca37870efffd0200b5fbf1b9491a1497cd1cdae7423d93f9c0eda1ff2cde4779932ea8f23be29f632e0310483c31724273d64d36a78d94e67a94c1cd903eb1a
+  data.tar.gz: 6d09c8fc4870c7ca1851fdd4c439ec1b6dd73d8e9551ca2b3d0be2d5da1a2f28e0cd9655ba219f25c2674face10ea0b8d5eeaadba6fd47705b04d516ac777d67

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## [Unreleased]
 
+## [0.6.0] - 2022-06-07
+
+- include USWDS 3.0 for new apps
+- use postcss-minify instead of the sass gem for CSS minimization
+
 ## [0.5.3] - 2022-06-06
 
 - check that server started properly before running anything in `bin/with-server`

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    rails_template_18f (0.5.3)
+    rails_template_18f (0.6.0)
       activesupport (~> 7.0.0)
       colorize (~> 0.8)
       railties (~> 7.0.0)

data/lib/rails_template18f/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsTemplate18f
-  VERSION = "0.5.3"
+  VERSION = "0.6.0"
 end

data/template.rb

@@ -226,35 +226,33 @@ end
 
 # setup USWDS and asset pipeline
 copy_file "browserslistrc", ".browserslistrc" if webpack?
-uncomment_lines "Gemfile", "sassc-rails" # use sassc-rails for asset minification in prod
 after_bundle do
-  js_startup = if webpack?
-    "webpack --config webpack.config.js"
-  else
-    "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"
-  end
-  insert_into_file "package.json", <<-EOJSON, before: /^\s+"dependencies"/
-  "scripts": {
-    "build": "#{js_startup}",
-    "build:css": "postcss ./app/assets/stylesheets/application.postcss.css -o ./app/assets/builds/application.css"
-  },
-  EOJSON
+  run 'npm set-script build:css "postcss ./app/assets/stylesheets/application.postcss.scss -o ./app/assets/builds/application.css"'
   # include verbose flag for dev postcss output
   gsub_file "Procfile.dev", "yarn build:css --watch", "yarn build:css --verbose --watch"
   # Replace postcss-nesting with sass since USWDS uses sass
   run "yarn remove postcss-nesting"
-  run "yarn add @csstools/postcss-sass"
-  run "yarn add postcss-scss"
+  run "yarn add @csstools/postcss-sass postcss-scss postcss-minify"
   insert_into_file "postcss.config.js", "  syntax: 'postcss-scss',\n", before: /^\s+plugins/
-  gsub_file "postcss.config.js", "postcss-nesting", "@csstools/postcss-sass"
-  run "yarn add uswds"
+  insert_into_file "package.json", <<-EOJSON, before: /^\s+\}$/
+  },
+  "resolutions": {
+    "@csstools/postcss-sass/@csstools/sass-import-resolve": "https://github.com/rahearn/sass-import-resolve"
+  EOJSON
+  gsub_file "postcss.config.js", "postcss-nesting'),", <<~EOJS.strip
+    @csstools/postcss-sass')({
+          includePaths: ['./node_modules/@uswds/uswds/packages'],
+        }),
+  EOJS
+  insert_into_file "postcss.config.js", "    process.env.NODE_ENV === 'production' ? require('postcss-minify') : null,\n", before: /^\s+\],/
+  run "yarn add @uswds/uswds"
   appjs_file = "app/javascript/application.js"
-  append_to_file appjs_file, "\nimport \"uswds\"\n"
+  append_to_file appjs_file, "\nimport \"@uswds/uswds\"\n"
   if hotwire?
     append_to_file appjs_file, <<~EOJS
 
       // make sure USWDS components are wired to their behavior after a Turbo navigation
-      import components from "uswds/src/js/components"
+      import components from "@uswds/uswds/src/js/components"
       let initialLoad = true;
       document.addEventListener("turbo:load", () => {
         if (initialLoad) {
@@ -272,9 +270,12 @@ after_bundle do
   end
   directory "app/assets"
   append_to_file "app/assets/stylesheets/application.postcss.css", <<~EOCSS
-    @import "uswds-settings.scss";
-    @import "../../../node_modules/uswds/dist/scss/uswds.scss";
+    @forward "uswds-settings.scss";
+    @forward "uswds-components.scss";
   EOCSS
+  inside "app/assets/stylesheets" do
+    File.rename("application.postcss.css", "application.postcss.scss")
+  end
   gsub_file "app/views/layouts/application.html.erb", "<html>", '<html lang="<%= I18n.locale %>">'
   gsub_file "app/views/layouts/application.html.erb", /^\s+<%= yield %>/, <<-EOHTML
     <%= render "application/usa_banner" %>

data/templates/app/assets/images/uswds.js

@@ -1,5 +1,6 @@
 // Glue to find USWDS images with the `image_tag` helper
 
-//= link uswds/dist/img/us_flag_small.png
-//= link uswds/dist/img/icon-dot-gov.svg
-//= link uswds/dist/img/icon-https.svg
+//= link @uswds/uswds/dist/img/us_flag_small.png
+//= link @uswds/uswds/dist/img/icon-dot-gov.svg
+//= link @uswds/uswds/dist/img/icon-https.svg
+//= link @uswds/uswds/dist/img/usa-icons/close.svg

data/templates/app/assets/stylesheets/uswds-components.scss

@@ -0,0 +1,7 @@
+@forward "uswds-global";
+@forward "uswds-utilities";
+@forward "uswds-typography";
+@forward "usa-header";
+@forward "usa-banner";
+@forward "usa-section";
+// add additional packages here as you use them

data/templates/app/assets/stylesheets/uswds-settings.scss

@@ -1,7 +1,10 @@
-// Point the asset pipline to the correct locations
-$theme-font-path: "uswds/dist/fonts";
-$theme-image-path: "uswds/dist/img";
+@use "uswds-core" with (
+  // Point the asset pipline to the correct locations
+  $theme-font-path: "@uswds/uswds/dist/fonts",
+  $theme-image-path: "@uswds/uswds/dist/img",
 
-$theme-show-notifications: false;
+  $theme-show-notifications: false,
 
-// Put your USWDS Theme settings here
+  // Put your USWDS Theme settings here
+
+);

data/templates/app/views/application/_demo_site_banner.html.erb

@@ -1,3 +1,3 @@
-<div class="font-sans-lg padding-y-4 bg-secondary-darker text-white line-height-1 text-center">
+<div class="font-sans-lg padding-y-4 bg-secondary-darker text-white line-height-heading-1 text-center">
   <%= t('shared.header.demo_banner') %>
-</div>
+</div>

data/templates/app/views/application/_header.html.erb

@@ -11,7 +11,7 @@
     </div>
     <nav aria-label="<%= t('shared.header.primary') %>" class="usa-nav">
       <button class="usa-nav__close">
-        <%= image_tag "uswds/dist/img/usa-icons/close.svg", role: "img", alt: t('shared.header.close') %>
+        <%= image_tag "@uswds/uswds/dist/img/usa-icons/close.svg", role: "img", alt: t('shared.header.close') %>
       </button>
       <ul class="usa-nav__primary usa-accordion">
         <% I18n.available_locales.each do |l| %>

data/templates/app/views/application/_usa_banner.html.erb

@@ -5,7 +5,7 @@
     <header class="usa-banner__header">
       <div class="usa-banner__inner">
         <div class="grid-col-auto">
-          <%= image_tag "uswds/dist/img/us_flag_small.png", alt: t('shared.banner.us_flag'), class: "usa-banner__header-flag" %>
+          <%= image_tag "@uswds/uswds/dist/img/us_flag_small.png", alt: t('shared.banner.us_flag'), class: "usa-banner__header-flag" %>
         </div>
         <div class="grid-col-fill tablet:grid-col-auto">
           <p class="usa-banner__header-text">
@@ -30,14 +30,14 @@
       <% end %>
       <div class="grid-row grid-gap-lg">
         <div class="usa-banner__guidance tablet:grid-col-6">
-          <%= image_tag "uswds/dist/img/icon-dot-gov.svg", role: "img", "aria-hidden": true, class: "usa-banner__icon usa-media-block__img" %>
+          <%= image_tag "@uswds/uswds/dist/img/icon-dot-gov.svg", role: "img", "aria-hidden": true, class: "usa-banner__icon usa-media-block__img" %>
           <div class="usa-media-block__body">
             <strong><%= t('shared.banner.gov_heading') %></strong>
             <br> <%= t('shared.banner.gov_description_html') %>
           </div>
         </div>
         <div class="usa-banner__guidance tablet:grid-col-6">
-          <%= image_tag "uswds/dist/img/icon-https.svg", role: "img", "aria-hidden": true, class: "usa-banner__icon usa-media-block__img" %>
+          <%= image_tag "@uswds/uswds/dist/img/icon-https.svg", role: "img", "aria-hidden": true, class: "usa-banner__icon usa-media-block__img" %>
           <div class="usa-media-block__body">
             <p>
               <strong><%= t('shared.banner.secure_heading') %></strong>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_template_18f
 version: !ruby/object:Gem::Version
-  version: 0.5.3
+  version: 0.6.0
 platform: ruby
 authors:
 - Ryan Ahearn
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2022-06-06 00:00:00.000000000 Z
+date: 2022-06-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -214,6 +214,7 @@ files:
 - templates/Brewfile
 - templates/README.md.tt
 - templates/app/assets/images/uswds.js
+- templates/app/assets/stylesheets/uswds-components.scss
 - templates/app/assets/stylesheets/uswds-settings.scss
 - templates/app/views/application/_banner_lock_icon.html.erb
 - templates/app/views/application/_demo_site_banner.html.erb