Skip to content

Add a default .browserslistrc file: #241

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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> 📝 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> 📝 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.
  • Loading branch information
Edouard-chin committed Jan 25, 2023
commit d2d0da234d98fe0163f3046a61f0dc7fce1e9673
1 change: 1 addition & 0 deletions lib/install/.browserslistrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
defaults
5 changes: 5 additions & 0 deletions lib/install/tailwindcss.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down