webpacker 5.1.1 → 5.4.0

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    webpacker (5.1.1)
+    webpacker (5.4.0)
       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.2)
+      actionpack (= 6.1.3.2)
+      activesupport (= 6.1.3.2)
       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.2)
+      actionpack (= 6.1.3.2)
+      activejob (= 6.1.3.2)
+      activerecord (= 6.1.3.2)
+      activestorage (= 6.1.3.2)
+      activesupport (= 6.1.3.2)
       mail (>= 2.7.1)
-    actionmailer (6.0.1)
-      actionpack (= 6.0.1)
-      actionview (= 6.0.1)
-      activejob (= 6.0.1)
+    actionmailer (6.1.3.2)
+      actionpack (= 6.1.3.2)
+      actionview (= 6.1.3.2)
+      activejob (= 6.1.3.2)
+      activesupport (= 6.1.3.2)
       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.2)
+      actionview (= 6.1.3.2)
+      activesupport (= 6.1.3.2)
+      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.2)
+      actionpack (= 6.1.3.2)
+      activerecord (= 6.1.3.2)
+      activestorage (= 6.1.3.2)
+      activesupport (= 6.1.3.2)
       nokogiri (>= 1.8.5)
-    actionview (6.0.1)
-      activesupport (= 6.0.1)
+    actionview (6.1.3.2)
+      activesupport (= 6.1.3.2)
       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.2)
+      activesupport (= 6.1.3.2)
       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.2)
+      activesupport (= 6.1.3.2)
+    activerecord (6.1.3.2)
+      activemodel (= 6.1.3.2)
+      activesupport (= 6.1.3.2)
+    activestorage (6.1.3.2)
+      actionpack (= 6.1.3.2)
+      activejob (= 6.1.3.2)
+      activerecord (= 6.1.3.2)
+      activesupport (= 6.1.3.2)
+      marcel (~> 1.0.0)
+      mini_mime (~> 1.0.2)
+    activesupport (6.1.3.2)
       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.1)
+    minitest (5.14.4)
+    nio4r (2.5.7)
+    nokogiri (1.11.4)
+      mini_portile2 (~> 2.5.0)
+      racc (~> 1.4)
+    parallel (1.20.1)
+    parser (3.0.1.1)
+      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.2)
+      actioncable (= 6.1.3.2)
+      actionmailbox (= 6.1.3.2)
+      actionmailer (= 6.1.3.2)
+      actionpack (= 6.1.3.2)
+      actiontext (= 6.1.3.2)
+      actionview (= 6.1.3.2)
+      activejob (= 6.1.3.2)
+      activemodel (= 6.1.3.2)
+      activerecord (= 6.1.3.2)
+      activestorage (= 6.1.3.2)
+      activesupport (= 6.1.3.2)
+      bundler (>= 1.15.0)
+      railties (= 6.1.3.2)
       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.2)
+      actionpack (= 6.1.3.2)
+      activesupport (= 6.1.3.2)
       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.5.0)
+      parser (>= 3.0.1.1)
+    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
@@ -35,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)
@@ -51,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
@@ -121,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
 ```
@@ -318,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.
@@ -362,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:
@@ -382,18 +386,6 @@ 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).
@@ -407,7 +399,7 @@ When compiling assets for production on a remote server, such as a continuous in
   - [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