Add a default .browserslistrc
file:
#241
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
Output
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
Output
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.