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

Conversation

Edouard-chin
Copy link
Member

Add a default .browserslistrc file:

  • Context

    The .browserslistrc file is a standard configuration file used by the browserslist library which itself is used by multiple front-end tools like autoprefixer.

    TailwindCSS ships and run by default autoprefixer when compiling assets.

    When Rails shipped by default with webpack, the .browserslistrc file was generated by webpacker. 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).

    📝 CSS generated

    Input

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

    Output

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

    TailwindCSS won't generate the right property for IE because it uses the default list 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:

    📝 CSS generated with a .browserslistrc file

    .browserslistrc

    defaults
    IE 11
    

    Output

    input:-moz-placeholder-shown {
      border-radius: 5px;
    }
    input:-ms-input-placeholder {
      border-radius: 5px;
    }
    input:placeholder-shown {
      border-radius: 5px;
    }

    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.

- ### 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.
Copy link
Member

@flavorjones flavorjones left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@dhh
Copy link
Member

dhh commented Jan 26, 2023

Appreciate where this is coming from, and I wouldn't mind a doc fix, but don't think this is what most people will need most of the time. So generating an extra file, and the cognitive overhead each one carries, isn't worth the tradeoff in my book. Feel free to open a PR with a brief mention of this for the docs.

@dhh dhh closed this Jan 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants