webpacker 3.2.2 → 3.3.0

data/package/config_types/__tests__/config_list.js

@@ -8,11 +8,6 @@ test('new', () => {
   expect(list).toBeInstanceOf(Array)
 })
 
-test('set', () => {
-  const list = new ConfigList()
-  expect(list.set('key', 'value')).toEqual([{ key: 'key', value: 'value' }])
-})
-
 test('get', () => {
   const list = new ConfigList()
   list.append('key', 'value')

data/package/config_types/config_list.js

@@ -10,15 +10,6 @@ class ConfigList extends Array {
     return this[index].value
   }
 
-  /**
-    * @deprecated after the 3.0.2 release and will be removed in the next major release
-  */
-  set(key, value) {
-    /* eslint no-console: 0 */
-    console.warn('set is deprecated! Use append instead')
-    return this.append(key, value)
-  }
-
   append(key, value) {
     return this.add({ key, value })
   }

data/package/dev_server.js

@@ -0,0 +1,23 @@
+const { isBoolean, isEmpty } = require('./utils/helpers')
+const config = require('./config')
+
+const fetch = (key) => {
+  const value = process.env[key]
+  return isBoolean(value) ? JSON.parse(value) : value
+}
+
+const devServer = () => {
+  const devServerConfig = config.dev_server
+
+  if (devServerConfig) {
+    Object.keys(devServerConfig).forEach((key) => {
+      const envValue = fetch(`WEBPACKER_DEV_SERVER_${key.toUpperCase().replace(/_/g, '')}`)
+      if (isEmpty(envValue)) return devServerConfig[key]
+      devServerConfig[key] = envValue
+    })
+  }
+
+  return devServerConfig || {}
+}
+
+module.exports = devServer()

data/package/env.js

@@ -0,0 +1,23 @@
+const { resolve } = require('path')
+const { safeLoad } = require('js-yaml')
+const { readFileSync } = require('fs')
+
+const configPath = resolve('config', 'webpacker.yml')
+const DEFAULT_ENV = 'production'
+
+const env = () => {
+  const nodeEnv = process.env.NODE_ENV
+  const railsEnv = process.env.RAILS_ENV
+  const config = safeLoad(readFileSync(configPath), 'utf8')
+  const availableEnvironments = Object.keys(config).join('|')
+  const regex = new RegExp(availableEnvironments, 'g')
+
+  if (nodeEnv && nodeEnv.match(regex)) return nodeEnv
+  if (railsEnv && railsEnv.match(regex)) return railsEnv
+
+  /* eslint no-console: 0 */
+  console.warn(`NODE_ENV=${nodeEnv} and RAILS_ENV=${railsEnv} environment is not defined in config/webpacker.yml, falling back to ${DEFAULT_ENV}`)
+  return DEFAULT_ENV
+}
+
+module.exports = env()

data/package/{__tests__/environment.js → environments/__tests__/base.js}

@@ -3,14 +3,14 @@
 // environment.js expects to find config/webpacker.yml and resolved modules from
 // the root of a Rails project
 
-const chdirApp = () => process.chdir('test/test_app')
-const chdirCwd = () => process.chdir(process.cwd())
-chdirApp()
+const { chdirTestApp, chdirCwd } = require('../../utils/helpers')
+
+chdirTestApp()
 
 const { resolve } = require('path')
-const rules = require('../rules')
-const { ConfigList } = require('../config_types')
-const Environment = require('../environment')
+const rules = require('../../rules')
+const { ConfigList } = require('../../config_types')
+const Environment = require('../base')
 
 describe('Environment', () => {
   afterAll(chdirCwd)

data/package/{environment.js → environments/base.js}

@@ -12,9 +12,9 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 
-const { ConfigList, ConfigObject } = require('./config_types')
-const rules = require('./rules')
-const config = require('./config')
+const { ConfigList, ConfigObject } = require('../config_types')
+const rules = require('../rules')
+const config = require('../config')
 
 const getLoaderList = () => {
   const result = new ConfigList()
@@ -85,7 +85,7 @@ const getBaseConfig = () =>
     }
   })
 
-module.exports = class Environment {
+module.exports = class Base {
   constructor() {
     this.loaders = getLoaderList()
     this.plugins = getPluginList()

data/package/environments/development.js

@@ -1,8 +1,9 @@
 const webpack = require('webpack')
-const Environment = require('../environment')
-const { dev_server: devServer, outputPath: contentBase, publicPath } = require('../config')
+const Base = require('./base')
+const devServer = require('../dev_server')
+const { outputPath: contentBase, publicPath } = require('../config')
 
-module.exports = class extends Environment {
+module.exports = class extends Base {
   constructor() {
     super()
 

data/package/environments/production.js

@@ -1,40 +1,46 @@
 const webpack = require('webpack')
 const CompressionPlugin = require('compression-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const Environment = require('../environment')
+const Base = require('./base')
 
-module.exports = class extends Environment {
+module.exports = class extends Base {
   constructor() {
     super()
 
     this.plugins.append('ModuleConcatenation', new webpack.optimize.ModuleConcatenationPlugin())
 
-    this.plugins.append('UglifyJs', new UglifyJsPlugin({
-      parallel: true,
-      cache: true,
-      sourceMap: true,
-      uglifyOptions: {
-        ie8: false,
-        ecma: 8,
-        warnings: false,
-        mangle: {
-          safari10: true
-        },
-        compress: {
+    this.plugins.append(
+      'UglifyJs',
+      new UglifyJsPlugin({
+        parallel: true,
+        cache: true,
+        sourceMap: true,
+        uglifyOptions: {
+          ie8: false,
+          ecma: 8,
           warnings: false,
-          comparisons: false
-        },
-        output: {
-          ascii_only: true
+          mangle: {
+            safari10: true
+          },
+          compress: {
+            warnings: false,
+            comparisons: false
+          },
+          output: {
+            ascii_only: true
+          }
         }
-      }
-    }))
+      })
+    )
 
-    this.plugins.append('Compression', new CompressionPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
-    }))
+    this.plugins.append(
+      'Compression',
+      new CompressionPlugin({
+        asset: '[path].gz[query]',
+        algorithm: 'gzip',
+        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
+      })
+    )
 
     this.config.merge({
       devtool: 'nosources-source-map',

data/package/environments/test.js

@@ -1,3 +1,3 @@
-const Environment = require('../environment')
+const Base = require('./base')
 
-module.exports = class extends Environment {}
+module.exports = class extends Base {}

data/package/index.js

@@ -3,18 +3,22 @@
 
 const { resolve } = require('path')
 const { existsSync } = require('fs')
-const Environment = require('./environment')
-const config = require('./config')
+const Environment = require('./environments/base')
 const loaders = require('./rules')
+const env = require('./env')
+const config = require('./config')
+const devServer = require('./dev_server')
 
 const createEnvironment = () => {
-  const path = resolve(__dirname, 'environments', `${process.env.NODE_ENV}.js`)
+  const path = resolve(__dirname, 'environments', `${env}.js`)
   const constructor = existsSync(path) ? require(path) : Environment
   return new constructor()
 }
 
-const environment = createEnvironment()
-
 module.exports = {
-  environment, config, loaders, Environment
+  config,
+  devServer,
+  environment: createEnvironment(),
+  Environment,
+  loaders
 }

data/package/rules/babel.js

@@ -1,13 +1,15 @@
 const { join } = require('path')
-const { cache_path } = require('../config')
+const { cache_path: cachePath } = require('../config')
 
 module.exports = {
   test: /\.(js|jsx)?(\.erb)?$/,
   exclude: /node_modules/,
-  use: [{
-    loader: 'babel-loader',
-    options: {
-      cacheDirectory: join(cache_path, 'babel-loader')
+  use: [
+    {
+      loader: 'babel-loader',
+      options: {
+        cacheDirectory: join(cachePath, 'babel-loader')
+      }
     }
-  }]
+  ]
 }

data/package/rules/css.js

@@ -1,39 +1,3 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const path = require('path')
-const { dev_server: devServer } = require('../config')
+const getStyleRule = require('../utils/get_style_rule')
 
-const postcssConfigPath = path.resolve(process.cwd(), '.postcssrc.yml')
-const isProduction = process.env.NODE_ENV === 'production'
-const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
-const isHMR = inDevServer && (devServer && devServer.hmr)
-const extractCSS = !(isHMR) || isProduction
-
-const styleLoader = {
-  loader: 'style-loader',
-  options: {
-    hmr: isHMR,
-    sourceMap: true
-  }
-}
-
-const extractOptions = {
-  fallback: styleLoader,
-  use: [
-    { loader: 'css-loader', options: { minimize: isProduction, sourceMap: true, importLoaders: 2 } },
-    { loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfigPath } } }
-  ]
-}
-
-// For production extract styles to a separate bundle
-const extractCSSLoader = {
-  test: /\.(css)$/i,
-  use: ExtractTextPlugin.extract(extractOptions)
-}
-
-// For hot-reloading use regular loaders
-const inlineCSSLoader = {
-  test: /\.(css)$/i,
-  use: [styleLoader].concat(extractOptions.use)
-}
-
-module.exports = extractCSS ? extractCSSLoader : inlineCSSLoader
+module.exports = getStyleRule(/\.(css)$/i)

data/package/rules/file.js

@@ -1,13 +1,15 @@
 const { join } = require('path')
-const { source_path } = require('../config')
+const { source_path: sourcePath } = require('../config')
 
 module.exports = {
   test: /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2)$/i,
-  use: [{
-    loader: 'file-loader',
-    options: {
-      name: '[path][name]-[hash].[ext]',
-      context: join(source_path)
+  use: [
+    {
+      loader: 'file-loader',
+      options: {
+        name: '[path][name]-[hash].[ext]',
+        context: join(sourcePath)
+      }
     }
-  }]
+  ]
 }

data/package/rules/index.js

@@ -2,10 +2,14 @@ const babel = require('./babel')
 const file = require('./file')
 const css = require('./css')
 const sass = require('./sass')
+const moduleCss = require('./module.css')
+const moduleSass = require('./module.sass')
 
 module.exports = {
   babel,
   css,
   sass,
+  moduleCss,
+  moduleSass,
   file
 }

data/package/rules/module.css.js

@@ -0,0 +1,3 @@
+const getStyleRule = require('../utils/get_style_rule')
+
+module.exports = getStyleRule(/\.(css)$/i, true)

data/package/rules/module.sass.js

@@ -0,0 +1,8 @@
+const getStyleRule = require('../utils/get_style_rule')
+
+module.exports = getStyleRule(/\.(scss|sass)$/i, true, [
+  {
+    loader: 'sass-loader',
+    options: { sourceMap: true }
+  }
+])

data/package/rules/sass.js

@@ -1,15 +1,8 @@
-const cssLoader = require('./css')
-const deepMerge = require('../utils/deep_merge')
+const getStyleRule = require('../utils/get_style_rule')
 
-// Duplicate and remove css loader object reference
-let sassLoader = JSON.parse(JSON.stringify(cssLoader))
-
-sassLoader = deepMerge(sassLoader, {
-  test: /\.(scss|sass)$/i,
-  use: [{
+module.exports = getStyleRule(/\.(scss|sass)$/i, false, [
+  {
     loader: 'sass-loader',
     options: { sourceMap: true }
-  }]
-})
-
-module.exports = sassLoader
+  }
+])

data/package/utils/__tests__/get_style_rule.js

@@ -0,0 +1,36 @@
+const { chdirTestApp, chdirCwd } = require('../helpers')
+
+chdirTestApp()
+
+const getStyleRule = require('../get_style_rule')
+
+describe('getStyleRule', () => {
+  afterAll(chdirCwd)
+
+  test('excludes modules by default', () => {
+    const cssRule = getStyleRule(/\.(css)$/i)
+    const expectation = {
+      test: /\.(css)$/i,
+      exclude: /\.module\.[a-z]+$/
+    }
+
+    expect(cssRule).toMatchObject(expectation)
+  })
+
+  test('includes modules if set to true', () => {
+    const cssRule = getStyleRule(/\.(scss)$/i, true)
+    const expectation = {
+      test: /\.(scss)$/i,
+      include: /\.module\.[a-z]+$/
+    }
+
+    expect(cssRule).toMatchObject(expectation)
+  })
+
+  test('adds extra preprocessors if supplied', () => {
+    const expectation = [{ foo: 'bar' }]
+    const cssRule = getStyleRule(/\.(css)$/i, true, expectation)
+
+    expect(cssRule.use).toMatchObject(expect.arrayContaining(expectation))
+  })
+})

data/package/utils/get_style_rule.js

@@ -0,0 +1,62 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const path = require('path')
+const devServer = require('../dev_server')
+
+const postcssConfigPath = path.resolve(process.cwd(), '.postcssrc.yml')
+const isProduction = process.env.NODE_ENV === 'production'
+const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
+const isHMR = inDevServer && (devServer && devServer.hmr)
+const extractCSS = !isHMR || isProduction
+
+const styleLoader = {
+  loader: 'style-loader',
+  options: {
+    hmr: isHMR,
+    sourceMap: true
+  }
+}
+
+const getStyleRule = (test, modules = false, preprocessors = []) => {
+  const extractOptions = {
+    fallback: styleLoader,
+    use: [
+      {
+        loader: 'css-loader',
+        options: {
+          minimize: isProduction,
+          sourceMap: true,
+          importLoaders: 2,
+          modules
+        }
+      },
+      {
+        loader: 'postcss-loader',
+        options: {
+          sourceMap: true,
+          config: { path: postcssConfigPath }
+        }
+      },
+      ...preprocessors
+    ]
+  }
+
+  const options = modules ? { include: /\.module\.[a-z]+$/ } : { exclude: /\.module\.[a-z]+$/ }
+
+  // For production extract styles to a separate bundle
+  const extractCSSLoader = Object.assign(
+    {},
+    { test, use: ExtractTextPlugin.extract(extractOptions) },
+    options
+  )
+
+  // For hot-reloading use regular loaders
+  const inlineCSSLoader = Object.assign(
+    {},
+    { test, use: [styleLoader].concat(extractOptions.use) },
+    options
+  )
+
+  return extractCSS ? extractCSSLoader : inlineCSSLoader
+}
+
+module.exports = getStyleRule