Styles Generator: Install postcss-url

Closes #1190

When including styles from `node_modules` via `@import`, we discovered
that static assets referenced in those style sheets are not loaded,
resulting in an error.

Since [cssbundling-rails][] ships with [postcss-import][], we are
already encouraging the use of importing styles from `node_modules`.

This commit aims to solve this problem by installing and configuring
[postcss-url][]. Because `postcss-url` needs a directory to copy assets
to, we create `app/assets/static` as part of the generator.

One thing to note is that we override the `postcss.config.js` generated
by the cssbundling-rails installation script, which assumes that the
following plugins have been installed.

- `postcss-import`
- `postcss-nesting`
- `autoprefixer`

Should that change, this file would be invalid, and those packages would
need to be installed.

[cssbundling-rails]: https://github.com/rails/cssbundling-rails
[postcss-import]: https://github.com/postcss/postcss-import
[postcss-url]: https://github.com/postcss/postcss-url

lib/generators/suspenders/styles_generator.rb

@@ -3,6 +3,7 @@ module Generators
     class StylesGenerator < Rails::Generators::Base
       include Suspenders::Generators::APIAppUnsupported
 
+      source_root File.expand_path("../../templates/styles", __FILE__)
       desc <<~MARKDOWN
         Configures application to use PostCSS via cssbundling-rails.
 
@@ -39,6 +40,25 @@ def configure_application_stylesheet
           TEXT
         end
       end
+
+      def install_postcss_url
+        run "yarn add postcss-url"
+      end
+
+      def configures_postcss
+        File.delete(postcss_config) if File.exist?(postcss_config)
+
+        empty_directory "app/assets/static"
+        create_file "app/assets/static/.gitkeep"
+
+        copy_file "postcss.config.js", "postcss.config.js"
+      end
+
+      private
+
+      def postcss_config
+        Rails.root.join("postcss.config.js")
+      end
     end
   end
 end

lib/generators/templates/styles/postcss.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-nesting'),
+    require('autoprefixer'),
+    require('postcss-url')({
+      url: 'copy',
+      assetsPath: 'static'
+    })
+  ],
+}

test/fixtures/files/postcss.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-nesting'),
+    require('autoprefixer'),
+    require('postcss-url')({
+      url: 'copy',
+      assetsPath: 'app/assets/static'
+    })
+  ],
+}

test/generators/suspenders/styles_generator_test.rb

@@ -75,6 +75,39 @@ class StylesGeneratorTest < Rails::Generators::TestCase
         end
       end
 
+      test "installs postcss-url" do
+        output = run_generator
+
+        assert_match(/add\s*postcss-url/, output)
+      end
+
+      test "configures postcss.config.js" do
+        expected = file_fixture("postcss.config.js").read
+
+        run_generator
+
+        assert_file app_root("postcss.config.js") do |file|
+          assert_equal expected, file
+        end
+      end
+
+      test "overrides existing postcss.config.js" do
+        touch "postcss.config.js", content: "unexpected"
+        expected = file_fixture("postcss.config.js").read
+
+        run_generator
+
+        assert_file app_root("postcss.config.js") do |file|
+          assert_equal expected, file
+        end
+      end
+
+      test "creates directory to store static assets generated from postcss-url" do
+        run_generator
+
+        assert_file app_root("app/assets/static/.gitkeep")
+      end
+
       test "generator has a custom description" do
         assert_no_match(/Description/, generator_class.desc)
       end
@@ -94,6 +127,8 @@ def restore_destination
         remove_file_if_exists "app/assets/stylesheets/base.css"
         remove_file_if_exists "app/assets/stylesheets/components.css"
         remove_file_if_exists "app/assets/stylesheets/utilities.css"
+        remove_file_if_exists "postcss.config.js"
+        remove_dir_if_exists "app/assets/static"
       end
     end
   end