From d2d0da234d98fe0163f3046a61f0dc7fce1e9673 Mon Sep 17 00:00:00 2001
From: Edouard CHIN <chin.edouard@gmail.com>
Date: Wed, 25 Jan 2023 16:01:39 +0100
Subject: [PATCH] Add a default `.browserslistrc` file:

- ### Context

  The `.browserslistrc` file is a standard configuration file used by
  the [browserslist library](https://github.com/browserslist/browserslist)
  which itself is used by multiple front-end tools like autoprefixer.

  TailwindCSS [ships and run by default autoprefixer](https://github.com/tailwindlabs/tailwindcss/blob/8e60a3c7e81ea0e44f127aa30df6d5676c60133d/standalone-cli/standalone.js#L18) when compiling assets.

  When Rails shipped by default with webpack, the `.browserslistrc` file
  was generated by [webpacker](https://github.com/rails/webpacker/blob/852949df933a21cb5deb7819393f98444ad6a65d/lib/install/template.rb#L13-L14).
  Now that Rails tries to move away from webpack, new applications won't
  get that file generated, although it's very useful.

  ### Problem

  Let's take this CSS file as input and the `placeholder-shown` property
  which has only partial support in Internet Explorer (I know it's no longer maintained
  but it's just as an example).

  <details>
    <summary> :memo: CSS generated </summary>

    ### Input

    ```css
      input:placeholder-shown {
        border-radius: 5px;
      }
    ```

    ### Output

    ```css
    input:-moz-placeholder-shown {
      border-radius: 5px;
    }
    input:placeholder-shown {
      border-radius: 5px;
    }
    ```
  </details>

  TailwindCSS won't generate the right property for IE because
  it uses the [default list](https://browsersl.ist/#q=defaults) of browsers provided by browserslist.

  ### Solution

  By having a `.browserslistrc` file by default, a user can quickly find and
  modify if to support whatever browser they want. To reuse the example from above:

  <details>
    <summary> :memo: CSS generated with a .browserslistrc file </summary>

    .browserslistrc
    ```
    defaults
    IE 11
    ```

    ### Output

    ```css
    input:-moz-placeholder-shown {
      border-radius: 5px;
    }
    input:-ms-input-placeholder {
      border-radius: 5px;
    }
    input:placeholder-shown {
      border-radius: 5px;
    }
    ```
  </details>

  My rationale on generating that file out of the box instead of
  letting users create it if needed is mostly to make things explicit and
  more discoverable.
  It's maybe due to my lack of experience on front-end related work, but
  it wasn't clear why new Rails app didn't have it and how I should proceed
  to tweak the list of supported browsers.

  I also saw a few blog posts explaining how to move away
  from webpack to importmap and making the mistake to remove that
  `.browserslistrc` file from their Rails app, thinking it wouldn't
  be used anymore.
---
 lib/install/.browserslistrc | 1 +
 lib/install/tailwindcss.rb  | 5 +++++
 2 files changed, 6 insertions(+)
 create mode 100644 lib/install/.browserslistrc

diff --git a/lib/install/.browserslistrc b/lib/install/.browserslistrc
new file mode 100644
index 00000000..e94f8140
--- /dev/null
+++ b/lib/install/.browserslistrc
@@ -0,0 +1 @@
+defaults
diff --git a/lib/install/tailwindcss.rb b/lib/install/tailwindcss.rb
index 413f86b8..eaff4bf7 100644
--- a/lib/install/tailwindcss.rb
+++ b/lib/install/tailwindcss.rb
@@ -48,6 +48,11 @@
   run "gem install foreman"
 end
 
+unless Rails.root.join(".browserslistrc").exist?
+  say "Add default .browserslistrc"
+  copy_file "#{__dir__}/.browserslistrc", ".browserslistrc"
+end
+
 say "Add bin/dev to start foreman"
 copy_file "#{__dir__}/dev", "bin/dev"
 chmod "bin/dev", 0755, verbose: false