webpacker 4.0.0.pre.3 → 4.0.0.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f8e384470d6faa4e062e9fdb92fb40b7c72b59cab7c35e7b3850f59da66fbdc6
-  data.tar.gz: 1d27eaeb75a2b05f359decd2b37c7d7624e55d3ccb5224969d58c0633f295fc1
+  metadata.gz: e52c39041f23ecbc17950281b9c67171f6fad95a9032a65a354c6a952837022b
+  data.tar.gz: a796ef041974243ac16301c12635cfba31f0e009104a4a03616e4cff47ef721b
 SHA512:
-  metadata.gz: 2fb2a78d8fbfdc1280d13288903a5572c1e09140e9b47f6f6acd092e9dfd004d1e2a6c5c36ad27c67925ac7b1994ac5bcc5fe8586c334b358467605f5a67615a
-  data.tar.gz: 30bf2a91f82b6e069545a891faaccbe419c1359cc547fe713bd5cfb6933cea393c8159eb37820178c7d41213d14a49cb31c9022eed713ca29664904ca7c41615
+  metadata.gz: b9009fcf8926de9d75cc6f98f89a735aca447c314b5df54c2715cfb960e9cceedad2fbd4a98db27a73fa73085062a67ae7b406e76c0610d207a7bd0f3406f17e
+  data.tar.gz: 2f17f73477c88cc5eebd6a01fb483269532bb2d5885d755d4d22f76b357c036a7145e30878eaccbeda140ef17a56f9b8d603088547c85c0fe165ce255ee10d99

data/.node-version

@@ -1 +1 @@
-6.14.0
+6.14.4

data/.travis.yml

@@ -3,9 +3,9 @@ language: ruby
 before_install:
   - gem update --system
 rvm:
-  - 2.3.7
-  - 2.4.4
-  - 2.5.1
+  - 2.3.8
+  - 2.4.5
+  - 2.5.3
   - ruby-head
 gemfile:
   - gemfiles/Gemfile-rails.4.2.x
@@ -34,5 +34,7 @@ matrix:
   allow_failures:
   - gemfile: gemfiles/Gemfile-rails-edge
   exclude:
-    - rvm: 2.3.7
+    - rvm: 2.3.8
       gemfile: gemfiles/Gemfile-rails-edge
+    - rvm: ruby-head
+      gemfile: gemfiles/Gemfile-rails.4.2.x

data/CHANGELOG.md

@@ -1,5 +1,43 @@
 **Please note that Webpacker 3.1.0 and 3.1.1 have some serious bugs so please consider using either 3.0.2 or 3.2.0**
 
+## [4.0.0.rc.1] - 2018-12-14
+
+## Breaking changes
+
+  - Order of rules changed so you might have to change append to prepend,
+  depending on how you want to process packs [#1823](https://github.com/rails/webpacker/pull/1823)
+  ```js
+  environment.loaders.prepend()
+  ```
+  - Separate CSS extraction from build environment [#1625](https://github.com/rails/webpacker/pull/1625)
+  ```yml
+  # Extract and emit a css file
+  extract_css: true
+  ```
+  - Separate rule to compile node modules
+  (fixes cases where ES6 libraries were included in the app code) [#1823](https://github.com/rails/webpacker/pull/1823)
+  - File loader extensions API [#1823](https://github.com/rails/webpacker/pull/1823)
+  ```yml
+  # webpacker.yml
+  static_assets_extensions:
+    - .pdf
+    # etc..
+  ```
+
+### Added
+
+  - Move `.babelrc` and `.postcssrc` to `.js` variant [#1822](https://github.com/rails/webpacker/pull/1822)
+  - Use postcss safe parser when optimising css assets [#1822](https://github.com/rails/webpacker/pull/1822)
+  - Add split chunks api (undocumented)
+  ```js
+  const { environment } = require('@rails/webpacker')
+  // Enable with default config
+  environment.splitChunks()
+  // Configure via a callback
+  environment.splitChunks((config) => Object.assign({}, config, { optimization: { splitChunks: false }}))
+  ```
+  - Allow changing static file extensions using webpacker.yml (undocumented)
+
 ## [4.0.0-pre.3] - 2018-10-01
 
 ### Added

data/CONTRIBUTING.md

@@ -0,0 +1,33 @@
+## Setting Up a Development Environment
+
+1. Install [Yarn](https://yarnpkg.com/)
+
+2. Run the following commands to set up the development environment.
+```
+bundle install
+yarn
+```
+
+## Making sure your changes pass all tests
+There are a number of automated checks which run on Travis CI when a pull request is created.
+You can run those checks on your own locally to make sure that your changes would not break the CI build.
+
+### 1. Check the code for JavaScript style violations
+```
+yarn lint
+```
+
+### 2. Check the code for Ruby style violations
+```
+bundle exec rubocop
+```
+
+### 3. Run the JavaScript test suite
+```
+yarn test
+```
+
+### 4. Run the Ruby test suite
+```
+bundle exec rake test
+```

data/Gemfile

@@ -4,7 +4,7 @@ gemspec
 
 gem "rails"
 gem "rake", ">= 11.1"
-gem "rubocop", ">= 0.49", require: false
+gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 
 group :test do

data/Gemfile.lock

@@ -1,7 +1,20 @@
+GIT
+  remote: https://github.com/rubocop-hq/rubocop.git
+  revision: 3d4ba9c2d0782b352bf807cd9fed66ce58e83641
+  specs:
+    rubocop (0.61.1)
+      jaro_winkler (~> 1.5.1)
+      parallel (~> 1.10)
+      parser (>= 2.5, != 2.5.1.1)
+      powerpack (~> 0.1)
+      rainbow (>= 2.2.2, < 4.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (~> 1.4.0)
+
 PATH
   remote: .
   specs:
-    webpacker (4.0.0.pre.3)
+    webpacker (4.0.0.rc.1)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)
@@ -9,43 +22,43 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (5.2.1)
-      actionpack (= 5.2.1)
+    actioncable (5.2.2)
+      actionpack (= 5.2.2)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailer (5.2.1)
-      actionpack (= 5.2.1)
-      actionview (= 5.2.1)
-      activejob (= 5.2.1)
+    actionmailer (5.2.2)
+      actionpack (= 5.2.2)
+      actionview (= 5.2.2)
+      activejob (= 5.2.2)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (5.2.1)
-      actionview (= 5.2.1)
-      activesupport (= 5.2.1)
+    actionpack (5.2.2)
+      actionview (= 5.2.2)
+      activesupport (= 5.2.2)
       rack (~> 2.0)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (5.2.1)
-      activesupport (= 5.2.1)
+    actionview (5.2.2)
+      activesupport (= 5.2.2)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.3)
-    activejob (5.2.1)
-      activesupport (= 5.2.1)
+    activejob (5.2.2)
+      activesupport (= 5.2.2)
       globalid (>= 0.3.6)
-    activemodel (5.2.1)
-      activesupport (= 5.2.1)
-    activerecord (5.2.1)
-      activemodel (= 5.2.1)
-      activesupport (= 5.2.1)
+    activemodel (5.2.2)
+      activesupport (= 5.2.2)
+    activerecord (5.2.2)
+      activemodel (= 5.2.2)
+      activesupport (= 5.2.2)
       arel (>= 9.0)
-    activestorage (5.2.1)
-      actionpack (= 5.2.1)
-      activerecord (= 5.2.1)
+    activestorage (5.2.2)
+      actionpack (= 5.2.2)
+      activerecord (= 5.2.2)
       marcel (~> 0.3.1)
-    activesupport (5.2.1)
+    activesupport (5.2.2)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
@@ -54,72 +67,64 @@ GEM
     ast (2.4.0)
     builder (3.2.3)
     byebug (10.0.2)
-    concurrent-ruby (1.0.5)
+    concurrent-ruby (1.1.3)
     crass (1.0.4)
     erubi (1.7.1)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
-    i18n (1.1.0)
+    i18n (1.2.0)
       concurrent-ruby (~> 1.0)
     jaro_winkler (1.5.1)
-    loofah (2.2.2)
+    loofah (2.2.3)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
-    mail (2.7.0)
+    mail (2.7.1)
       mini_mime (>= 0.1.1)
-    marcel (0.3.2)
+    marcel (0.3.3)
       mimemagic (~> 0.3.2)
-    method_source (0.9.0)
+    method_source (0.9.2)
     mimemagic (0.3.2)
     mini_mime (1.0.1)
     mini_portile2 (2.3.0)
     minitest (5.11.3)
     nio4r (2.3.1)
-    nokogiri (1.8.4)
+    nokogiri (1.8.5)
       mini_portile2 (~> 2.3.0)
     parallel (1.12.1)
-    parser (2.5.1.2)
+    parser (2.5.3.0)
       ast (~> 2.4.0)
     powerpack (0.1.2)
-    rack (2.0.5)
-    rack-proxy (0.6.4)
+    rack (2.0.6)
+    rack-proxy (0.6.5)
       rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
-    rails (5.2.1)
-      actioncable (= 5.2.1)
-      actionmailer (= 5.2.1)
-      actionpack (= 5.2.1)
-      actionview (= 5.2.1)
-      activejob (= 5.2.1)
-      activemodel (= 5.2.1)
-      activerecord (= 5.2.1)
-      activestorage (= 5.2.1)
-      activesupport (= 5.2.1)
+    rails (5.2.2)
+      actioncable (= 5.2.2)
+      actionmailer (= 5.2.2)
+      actionpack (= 5.2.2)
+      actionview (= 5.2.2)
+      activejob (= 5.2.2)
+      activemodel (= 5.2.2)
+      activerecord (= 5.2.2)
+      activestorage (= 5.2.2)
+      activesupport (= 5.2.2)
       bundler (>= 1.3.0)
-      railties (= 5.2.1)
+      railties (= 5.2.2)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.0.4)
       loofah (~> 2.2, >= 2.2.2)
-    railties (5.2.1)
-      actionpack (= 5.2.1)
-      activesupport (= 5.2.1)
+    railties (5.2.2)
+      actionpack (= 5.2.2)
+      activesupport (= 5.2.2)
       method_source
       rake (>= 0.8.7)
       thor (>= 0.19.0, < 2.0)
     rainbow (3.0.0)
-    rake (12.3.1)
-    rubocop (0.58.2)
-      jaro_winkler (~> 1.5.1)
-      parallel (~> 1.10)
-      parser (>= 2.5, != 2.5.1.1)
-      powerpack (~> 0.1)
-      rainbow (>= 2.2.2, < 4.0)
-      ruby-progressbar (~> 1.7)
-      unicode-display_width (~> 1.0, >= 1.0.1)
+    rake (12.3.2)
     ruby-progressbar (1.10.0)
     sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
@@ -128,7 +133,7 @@ GEM
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
-    thor (0.20.0)
+    thor (0.20.3)
     thread_safe (0.3.6)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
@@ -147,8 +152,8 @@ DEPENDENCIES
   rack-proxy
   rails
   rake (>= 11.1)
-  rubocop (>= 0.49)
+  rubocop!
   webpacker!
 
 BUNDLED WITH
-   1.16.4
+   1.17.1

data/README.md

@@ -41,6 +41,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
   - [Watched](#watched)
 - [Deployment](#deployment)
 - [Docs](#docs)
+- [Contributing](#contributing)
 - [License](#license)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -50,7 +51,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
 
 * Ruby 2.2+
 * Rails 4.2+
-* Node.js 6.14.0+
+* Node.js 6.14.4+
 * Yarn 1.x+
 
 
@@ -91,7 +92,7 @@ yarn add https://github.com/rails/webpacker.git
 
 # OR to try out 4.x pre-release
 gem 'webpacker', '>= 4.0.x'
-yarn add @rails/webpacker@4.0.0-pre.2
+yarn add @rails/webpacker@next
 ```
 
 Finally, run the following to install Webpacker:
@@ -230,7 +231,7 @@ staging:
   public_output_path: packs-staging
 ```
 
-or, Webpacker will use production environment as a fallback environment for loading configurations. Please note, `NODE_ENV` can either be set to `production` or `development`.
+or, Webpacker will use production environment as a fallback environment for loading configurations. Please note, `NODE_ENV` can either be set to `production`, `development` or `test`.
 This means you don't need to create additional environment files inside `config/webpacker/*` and instead use webpacker.yml to load different configurations using `RAILS_ENV`.
 
 For example, the below command will compile assets in production mode but will use staging configurations from `config/webpacker.yml` if available or use fallback production environment configuration:
@@ -271,7 +272,7 @@ yarn upgrade @rails/webpacker --latest
 yarn add webpack-dev-server@^2.11.1
 
 # Or to install a latest release (including pre-releases)
-yarn add @rails/webpacker@4.0.0-pre.2
+yarn add @rails/webpacker@next
 ```
 
 ### Yarn Integrity
@@ -345,11 +346,13 @@ development environment. This can be done in the `config/initializers/content_se
 with the following code:
 
 ```ruby
+Rails.application.config.content_security_policy do |policy|
   if Rails.env.development?
     policy.script_src :self, :https, :unsafe_eval
   else
     policy.script_src :self, :https
   end
+end
 ```
 
 
@@ -373,11 +376,13 @@ This can be done in the `config/initializers/content_security_policy.rb` with th
 configuration:
 
 ```ruby
+Rails.application.config.content_security_policy do |policy|
   if Rails.env.development?
     policy.script_src :self, :https, :unsafe_eval
   else
     policy.script_src :self, :https
   end
+end
 ```
 You can read more about this in the [Vue docs](https://vuejs.org/v2/guide/installation.html#CSP-environments).
 
@@ -510,10 +515,17 @@ Webpacker::Compiler.watched_paths << 'bower_components'
 
 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).
 
+
 ## Docs
 
 You can find more detailed guides under [docs](./docs).
 
 
+## Contributing
+[![Code Helpers](https://www.codetriage.com/rails/webpacker/badges/users.svg)](https://www.codetriage.com/rails/webpacker)
+
+We encourage you to contribute to Webpacker! See [CONTRIBUTING](CONTRIBUTING.md) for guidelines about how to proceed.
+
+
 ## License
 Webpacker is released under the [MIT License](https://opensource.org/licenses/MIT).

data/docs/assets.md

@@ -56,12 +56,12 @@ You can also use [babel-plugin-module-resolver](https://github.com/tleunen/babel
 yarn add babel-plugin-module-resolver
 ```
 
-Specify the plugin in your `.babelrc` with the custom root or alias. Here's an example:
+Specify the plugin in your `babel.config.js` with the custom root or alias. Here's an example:
 
-```json
+```js
 {
-  "plugins": [
-    ["module-resolver", {
+  plugins: [
+    [require("module-resolver").default, {
       "root": ["./app"],
       "alias": {
         "assets": "./assets"
@@ -103,4 +103,7 @@ app/javascript:
 
 <img src="<%= asset_pack_path 'images/calendar.png' %>" />
 <% # => <img src="/packs/images/calendar.png" /> %>
+
+<%= image_pack_tag 'images/calendar.png' %>
+<% # => <img src="/packs/images/calendar.png" /> %>
 ```

data/docs/css.md

@@ -16,7 +16,7 @@ Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScr
 
 ```js
 // React component example
-// app/javascripts/packs/hello_react.jsx
+// app/javascript/packs/hello_react.jsx
 
 import React from 'react'
 import helloIcon from '../hello_react/images/icon.png'
@@ -44,7 +44,7 @@ Stylesheets end with `.module.*` is treated as [CSS Modules](https://github.com/
 
 ```js
 // React component example
-// app/javascripts/packs/hello_react.jsx
+// app/javascript/packs/hello_react.jsx
 
 import React from 'react'
 import helloIcon from '../hello_react/images/icon.png'
@@ -64,7 +64,7 @@ const Hello = props => (
 ## Link styles from your Rails views
 
 Under the hood webpack uses
-[extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) plugin to extract all the referenced styles within your app and compile it into
+[mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) plugin to extract all the referenced styles within your app and compile it into
 a separate `[pack_name].css` bundle so that in your view you can use the
 `stylesheet_pack_tag` helper.
 
@@ -72,6 +72,7 @@ a separate `[pack_name].css` bundle so that in your view you can use the
 <%= stylesheet_pack_tag 'hello_react' %>
 ```
 
+Webpacker emits css files only if `extract_css` is set to true in webpacker.yml otherwise `stylesheet_pack_tag` returns nil.
 
 ## Add bootstrap
 
@@ -102,13 +103,22 @@ Or in your app/javascript/app.sass file:
 
 Webpacker out-of-the-box provides CSS post-processing using
 [postcss-loader](https://github.com/postcss/postcss-loader)
-and the installer sets up a standard `.postcssrc.yml`
+and the installer sets up a standard `postcss.config.js`
 file in your app root with standard plugins.
 
-```yml
-plugins:
-  postcss-import: {}
-  postcss-preset-env: {}
+```js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+}
 ```
 
 ## Using CSS with [vue-loader](https://github.com/vuejs/vue-loader)
@@ -144,3 +154,36 @@ environment.loaders.get('sass').use.splice(-1, 0, {
   }
 });
 ```
+
+## Working with TypeScript
+
+In order to get CSS to work with typescript you have two options.
+You can either use `require` to bypass typescript special `import`.
+
+```ts
+const styles = require('../hello_react/styles/hello-react');
+```
+You may also use the package [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) instead of `css-loader` to automatically generate typescript `.d.ts` files in order to help resolve any css/scss styles. To do that:
+
+```js
+// app/javascript/packs/hello_react.jsx
+import * as styles from '../hello_react.styles/hello-react.module.scss';
+```
+
+```bash
+yarn add --dev typings-for-css-modules-loader
+```
+
+```js
+// webpack/environment.js
+const { environment } = require('@rails/webpacker')
+
+// replace css-loader with typings-for-css-modules-loader
+environment.loaders.get('moduleSass').use = environment.loaders.get('moduleSass').use.map((u) => {
+  if(u.loader == 'css-loader') {
+    return { ...u, loader: 'typings-for-css-modules-loader' };
+  } else {
+    return u;
+  }
+});
+```