webpacker 5.0.1 → 5.2.2

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    webpacker (5.0.1)
+    webpacker (5.2.2)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -10,150 +10,159 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (6.0.1)
-      actionpack (= 6.0.1)
+    actioncable (6.1.3.1)
+      actionpack (= 6.1.3.1)
+      activesupport (= 6.1.3.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.0.1)
-      actionpack (= 6.0.1)
-      activejob (= 6.0.1)
-      activerecord (= 6.0.1)
-      activestorage (= 6.0.1)
-      activesupport (= 6.0.1)
+    actionmailbox (6.1.3.1)
+      actionpack (= 6.1.3.1)
+      activejob (= 6.1.3.1)
+      activerecord (= 6.1.3.1)
+      activestorage (= 6.1.3.1)
+      activesupport (= 6.1.3.1)
       mail (>= 2.7.1)
-    actionmailer (6.0.1)
-      actionpack (= 6.0.1)
-      actionview (= 6.0.1)
-      activejob (= 6.0.1)
+    actionmailer (6.1.3.1)
+      actionpack (= 6.1.3.1)
+      actionview (= 6.1.3.1)
+      activejob (= 6.1.3.1)
+      activesupport (= 6.1.3.1)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (6.0.1)
-      actionview (= 6.0.1)
-      activesupport (= 6.0.1)
-      rack (~> 2.0)
+    actionpack (6.1.3.1)
+      actionview (= 6.1.3.1)
+      activesupport (= 6.1.3.1)
+      rack (~> 2.0, >= 2.0.9)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.0.1)
-      actionpack (= 6.0.1)
-      activerecord (= 6.0.1)
-      activestorage (= 6.0.1)
-      activesupport (= 6.0.1)
+    actiontext (6.1.3.1)
+      actionpack (= 6.1.3.1)
+      activerecord (= 6.1.3.1)
+      activestorage (= 6.1.3.1)
+      activesupport (= 6.1.3.1)
       nokogiri (>= 1.8.5)
-    actionview (6.0.1)
-      activesupport (= 6.0.1)
+    actionview (6.1.3.1)
+      activesupport (= 6.1.3.1)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (6.0.1)
-      activesupport (= 6.0.1)
+    activejob (6.1.3.1)
+      activesupport (= 6.1.3.1)
       globalid (>= 0.3.6)
-    activemodel (6.0.1)
-      activesupport (= 6.0.1)
-    activerecord (6.0.1)
-      activemodel (= 6.0.1)
-      activesupport (= 6.0.1)
-    activestorage (6.0.1)
-      actionpack (= 6.0.1)
-      activejob (= 6.0.1)
-      activerecord (= 6.0.1)
-      marcel (~> 0.3.1)
-    activesupport (6.0.1)
+    activemodel (6.1.3.1)
+      activesupport (= 6.1.3.1)
+    activerecord (6.1.3.1)
+      activemodel (= 6.1.3.1)
+      activesupport (= 6.1.3.1)
+    activestorage (6.1.3.1)
+      actionpack (= 6.1.3.1)
+      activejob (= 6.1.3.1)
+      activerecord (= 6.1.3.1)
+      activesupport (= 6.1.3.1)
+      marcel (~> 1.0.0)
+      mini_mime (~> 1.0.2)
+    activesupport (6.1.3.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-      i18n (>= 0.7, < 2)
-      minitest (~> 5.1)
-      tzinfo (~> 1.1)
-      zeitwerk (~> 2.2)
-    ast (2.4.0)
-    builder (3.2.3)
-    byebug (11.0.1)
-    concurrent-ruby (1.1.5)
-    crass (1.0.5)
-    erubi (1.9.0)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    ast (2.4.2)
+    builder (3.2.4)
+    byebug (11.1.3)
+    concurrent-ruby (1.1.8)
+    crass (1.0.6)
+    erubi (1.10.0)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
-    i18n (1.7.0)
+    i18n (1.8.10)
       concurrent-ruby (~> 1.0)
-    jaro_winkler (1.5.4)
-    loofah (2.3.1)
+    loofah (2.9.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
-    marcel (0.3.3)
-      mimemagic (~> 0.3.2)
-    method_source (0.9.2)
-    mimemagic (0.3.3)
-    mini_mime (1.0.2)
-    mini_portile2 (2.4.0)
-    minitest (5.13.0)
-    nio4r (2.5.2)
-    nokogiri (1.10.8)
-      mini_portile2 (~> 2.4.0)
-    parallel (1.18.0)
-    parser (2.6.5.0)
-      ast (~> 2.4.0)
-    rack (2.0.8)
+    marcel (1.0.1)
+    method_source (1.0.0)
+    mini_mime (1.0.3)
+    mini_portile2 (2.5.0)
+    minitest (5.14.4)
+    nio4r (2.5.7)
+    nokogiri (1.11.3)
+      mini_portile2 (~> 2.5.0)
+      racc (~> 1.4)
+    parallel (1.20.1)
+    parser (3.0.1.0)
+      ast (~> 2.4.1)
+    racc (1.5.2)
+    rack (2.2.3)
     rack-proxy (0.6.5)
       rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
-    rails (6.0.1)
-      actioncable (= 6.0.1)
-      actionmailbox (= 6.0.1)
-      actionmailer (= 6.0.1)
-      actionpack (= 6.0.1)
-      actiontext (= 6.0.1)
-      actionview (= 6.0.1)
-      activejob (= 6.0.1)
-      activemodel (= 6.0.1)
-      activerecord (= 6.0.1)
-      activestorage (= 6.0.1)
-      activesupport (= 6.0.1)
-      bundler (>= 1.3.0)
-      railties (= 6.0.1)
+    rails (6.1.3.1)
+      actioncable (= 6.1.3.1)
+      actionmailbox (= 6.1.3.1)
+      actionmailer (= 6.1.3.1)
+      actionpack (= 6.1.3.1)
+      actiontext (= 6.1.3.1)
+      actionview (= 6.1.3.1)
+      activejob (= 6.1.3.1)
+      activemodel (= 6.1.3.1)
+      activerecord (= 6.1.3.1)
+      activestorage (= 6.1.3.1)
+      activesupport (= 6.1.3.1)
+      bundler (>= 1.15.0)
+      railties (= 6.1.3.1)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.3.0)
       loofah (~> 2.3)
-    railties (6.0.1)
-      actionpack (= 6.0.1)
-      activesupport (= 6.0.1)
+    railties (6.1.3.1)
+      actionpack (= 6.1.3.1)
+      activesupport (= 6.1.3.1)
       method_source
       rake (>= 0.8.7)
-      thor (>= 0.20.3, < 2.0)
+      thor (~> 1.0)
     rainbow (3.0.0)
-    rake (13.0.0)
-    rubocop (0.68.1)
-      jaro_winkler (~> 1.5.1)
+    rake (13.0.3)
+    regexp_parser (2.1.1)
+    rexml (3.2.5)
+    rubocop (0.93.1)
       parallel (~> 1.10)
-      parser (>= 2.5, != 2.5.1.1)
+      parser (>= 2.7.1.5)
       rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 1.8)
+      rexml
+      rubocop-ast (>= 0.6.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 1.4.0, < 1.6)
-    rubocop-performance (1.3.0)
-      rubocop (>= 0.68.0)
-    ruby-progressbar (1.10.1)
-    semantic_range (2.3.0)
-    sprockets (4.0.0)
+      unicode-display_width (>= 1.4.0, < 2.0)
+    rubocop-ast (1.4.1)
+      parser (>= 2.7.1.5)
+    rubocop-performance (1.10.2)
+      rubocop (>= 0.90.0, < 2.0)
+      rubocop-ast (>= 0.4.0)
+    ruby-progressbar (1.11.0)
+    semantic_range (3.0.0)
+    sprockets (4.0.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    sprockets-rails (3.2.1)
+    sprockets-rails (3.2.2)
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
-    thor (0.20.3)
-    thread_safe (0.3.6)
-    tzinfo (1.2.5)
-      thread_safe (~> 0.1)
-    unicode-display_width (1.5.0)
-    websocket-driver (0.7.1)
+    thor (1.1.0)
+    tzinfo (2.0.4)
+      concurrent-ruby (~> 1.0)
+    unicode-display_width (1.7.0)
+    websocket-driver (0.7.3)
       websocket-extensions (>= 0.1.0)
-    websocket-extensions (0.1.4)
-    zeitwerk (2.2.1)
+    websocket-extensions (0.1.5)
+    zeitwerk (2.4.2)
 
 PLATFORMS
   ruby
@@ -165,10 +174,10 @@ DEPENDENCIES
   rack-proxy
   rails
   rake (>= 11.1)
-  rubocop (< 0.69)
+  rubocop (= 0.93.1)
   rubocop-performance
   semantic_range
   webpacker!
 
 BUNDLED WITH
-   1.17.3
+   2.2.3

data/README.md

@@ -1,7 +1,7 @@
 # Webpacker
 
 [![Build Status](https://travis-ci.org/rails/webpacker.svg?branch=master)](https://travis-ci.org/rails/webpacker)
-[![node.js](https://img.shields.io/badge/node-%3E%3D%2010.13.0-brightgreen.svg)](https://www.npmjs.com/package/@rails/webpacker)
+[![node.js](https://img.shields.io/badge/node-%3E%3D%2010.17.0-brightgreen.svg)](https://www.npmjs.com/package/@rails/webpacker)
 [![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://rubygems.org/gems/webpacker)
 
 Webpacker makes it easy to use the JavaScript pre-processor and bundler
@@ -28,7 +28,6 @@ in which case you may not even need the asset pipeline. This is mostly relevant
   - [Webpack Configuration](#webpack-configuration)
   - [Custom Rails environments](#custom-rails-environments)
   - [Upgrading](#upgrading)
-  - [Yarn Integrity](#yarn-integrity)
 - [Integrations](#integrations)
   - [React](./docs/integrations.md#react)
   - [Angular with TypeScript](./docs/integrations.md#angular-with-typescript)
@@ -36,6 +35,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
   - [Elm](./docs/integrations.md#elm)
   - [Stimulus](./docs/integrations.md#stimulus)
   - [Svelte](./docs/integrations.md#svelte)
+  - [Typescript](./docs/typescript.md)
   - [CoffeeScript](./docs/integrations.md#coffeescript)
   - [Erb](./docs/integrations.md#erb)
 - [Paths](#paths)
@@ -52,7 +52,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
 
 - Ruby 2.4+
 - Rails 5.2+
-- Node.js 10.13.0+
+- Node.js 10.17.0+
 - Yarn 1.x+
 
 ## Features
@@ -83,7 +83,7 @@ Or add it to your `Gemfile`:
 
 ```ruby
 # Gemfile
-gem 'webpacker', '~> 4.x'
+gem 'webpacker', '~> 5.x'
 
 # OR if you prefer to use master
 gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
@@ -107,6 +107,12 @@ Optional: To fix ["unmet peer dependency" warnings](https://github.com/rails/web
 yarn upgrade
 ```
 
+When `package.json` and/or `yarn.lock` changes, such as when pulling down changes to your local environment in a team settings, be sure to keep your NPM packages up-to-date:
+
+```bash
+yarn install
+```
+
 ### Usage
 
 Once installed, you can start writing modern ES6-flavored JavaScript apps right away:
@@ -116,8 +122,11 @@ app/javascript:
   ├── packs:
   │   # only webpack entry files here
   │   └── application.js
-  └── src:
   │   └── application.css
+  └── src:
+  │   └── my_component.js
+  └── stylesheets:
+  │   └── my_styles.css
   └── images:
       └── logo.svg
 ```
@@ -300,26 +309,6 @@ yarn upgrade webpack-dev-server --latest
 yarn add @rails/webpacker@next
 ```
 
-### Yarn Integrity
-
-By default, in development, webpacker runs a yarn integrity check to ensure that all local JavaScript packages are up-to-date. This is similar to what bundler does currently in Rails, but for JavaScript packages. If your system is out of date, then Rails will not initialize. You will be asked to upgrade your local JavaScript packages by running `yarn install`.
-
-To turn off this option, you will need to change the default setting in `config/webpacker.yml`:
-
-```yaml
-# config/webpacker.yml
-development:
-  ...
-  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: false
-```
-
-You may also turn on this feature by adding the config option for any Rails environment in `config/webpacker.yml`:
-
-```yaml
-check_yarn_integrity: true
-```
-
 ## Integrations
 
 Webpacker ships with basic out-of-the-box integration. You can see a list of available commands/tasks by running `bundle exec rails webpacker`.
@@ -333,7 +322,7 @@ Included install integrations:
 - [Svelte](./docs/integrations.md#Svelte)
 - [Stimulus](./docs/integrations.md#Stimulus)
 - [CoffeeScript](./docs/integrations.md#CoffeeScript)
-- [Typescript](./docs/integrations.md)
+- [Typescript](./docs/typescript.md)
 - [Erb](./docs/integrations.md#Erb)
 
 See [Integrations](./docs/integrations.md) for further details.
@@ -377,12 +366,12 @@ If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no ou
 
 If you are adding Webpacker to an existing app that has most of the assets inside
 `app/assets` or inside an engine, and you want to share that
-with webpack modules, you can use the `resolved_paths`
+with webpack modules, you can use the `additional_paths`
 option available in `config/webpacker.yml`. This lets you
 add additional paths that webpack should lookup when resolving modules:
 
 ```yml
-resolved_paths: ['app/assets']
+additional_paths: ['app/assets']
 ```
 
 You can then import these items inside your modules like so:
@@ -397,22 +386,12 @@ import 'images/rails.png'
 will make the compilation slow, consider adding specific paths instead of
 whole parent directory if you just need to reference one or two modules
 
-### Watched
-
-By default, the lazy compilation is cached until a file is changed under your
-tracked paths. You can configure which paths are tracked
-by adding new paths to `watched_paths` array. This is much like Rails' `autoload_paths`:
-
-```rb
-# config/initializers/webpacker.rb
-# or config/application.rb
-Webpacker::Compiler.watched_paths << 'bower_components'
-```
-
 ## Deployment
 
 Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`. If you are not using Sprockets, `webpacker:compile` is automatically aliased to `assets:precompile`. Similar to sprockets both rake tasks will compile packs in production mode but will use `RAILS_ENV` to load configuration from `config/webpacker.yml` (if available).
 
+When compiling assets for production on a remote server, such as a continuous integration environment, it's recommended to use `yarn install --frozen-lockfile` to install NPM packages on the remote host to ensure that the installed packages match the `yarn.lock` file.
+
 ## Docs
 
 - [Development](https://github.com/rails/webpacker#development)
@@ -420,7 +399,7 @@ Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which
   - [Webpack-dev-server](./docs/webpack-dev-server.md)
   - [Environment Variables](./docs/env.md)
   - [Folder Structure](./docs/folder-structure.md)
-  - [Assets](./docs/assets.md) - [CSS, Sass and SCSS](./docs/css.md) - [ES6](./docs/es6.md)
+  - [Assets](./docs/assets.md) - [CSS, Sass and SCSS](./docs/css.md) - [ES6](./docs/es6.md), [Target browsers](./docs/target.md)
     - [Props](./docs/props.md)
     - [Typescript](./docs/typescript.md)
   - [Yarn](./docs/yarn.md)

data/docs/css.md

@@ -6,7 +6,7 @@ Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScr
 Importing and loading styles is a two step process:
 
 1. You need to tell webpack which file(s) it has to compile and know how to load
-  
+
    When you do `import '../scss/application.scss'`, you're telling webpack to include `application.scss` in the build. This does not mean it's going to be compiled into your javascript, only that webpack now compiles and knows how to load this file. (How that file compilation is handled is depending on how your loaders (`css-loader`, `sass-loader`, `file-loader`, etc.) are configured.)
 
 2. You need to load those files in your views
@@ -18,6 +18,51 @@ Importing and loading styles is a two step process:
 
 ## Import global styles into your JS app
 
+### Importing CSS as a multi-file pack (Webpacker v5)
+
+When you add a CSS/SCSS/SASS file to `app/javascript/packs/` directory, make sure to use the same pack name as its complementary JavaScript pack, e.g. `application.js` and `application.css`. By Webpacker convention (as of Webpacker v5), this will bundle `application.js` and `application.scss` as part of the same entry point (also described as [a multi-file entry point in the webpack docs](https://webpack.js.org/concepts/entry-points/#single-entry-shorthand-syntax)). With this approach, you can avoid importing CSS from JS, if desired.
+
+```
+app/
+  javascript/
+    packs/
+      application.js
+      application.scss
+```
+
+### Importing CSS from CSS
+
+You can import additional CSS/SCSS/SASS files from within a CSS file:
+
+```
+app/
+  javascript/
+    stylesheets/
+      application.scss
+      posts.scss
+      comments.scss
+```
+
+```css
+/* app/javascript/stylesheets/application.scss */
+
+@import './posts';
+@import './comments';
+```
+
+### Importing CSS provided by an NPM package from SCSS/CSS
+
+Given your application installs an NPM package that provides CSS, such as `flatpickr`, you can import the CSS file(s) by path from the package directory within `node_modules/`:
+
+```js
+/* app/javascript/stylesheets/application.scss */
+
+@import "flatpickr/dist/flatpickr.css"
+```
+
+
+### Importing CSS from JS
+
 ```sass
 // app/javascript/hello_react/styles/hello-react.sass
 
@@ -42,6 +87,16 @@ const Hello = props => (
 )
 ```
 
+### Importing CSS provided by an NPM package from JS
+
+Given your application installs an NPM package that provides CSS, such as `flatpickr`, you can import the CSS file(s) by path from the package directory within `node_modules/`. This is an alternative to importing from within a CSS file, as above:
+
+```js
+// app/javascript/packs/application.js
+
+import "flatpickr/dist/flatpickr.css"
+```
+
 ## Import scoped styles into your JS app
 
 Stylesheets that end with `.module.*` are treated as [CSS Modules](https://github.com/css-modules/css-modules).
@@ -147,14 +202,14 @@ You can use Yarn to add bootstrap or any other modules available on npm:
 yarn add bootstrap
 ```
 
-Import Bootstrap and theme (optional) CSS in your app/javascript/packs/app.js file:
+Import Bootstrap and theme (optional) CSS in your app/javascript/packs/application.js file:
 
 ```js
 import 'bootstrap/dist/css/bootstrap'
 import 'bootstrap/dist/css/bootstrap-theme'
 ```
 
-Or in your app/javascript/app.sass file:
+Or in your app/javascript/packs/application.sass file:
 
 ```sass
 // ~ to tell that this is not a relative import