[v8.x] Cherrypick more non-breaking changes from master

docs/api/README.md

@@ -412,7 +412,7 @@ command. The results of this command can be returned with `call`, which is loade
 ```js
 const { Neutrino } = require('neutrino');
 
-const eslintConfig = Neutrino()
+const eslintConfig = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('eslintrc');
 ```

docs/middleware/README.md

@@ -97,17 +97,6 @@ module.exports = {
 };
 ```
 
-```js
-// Array format being used within an object-format .neutrinorc.js
-module.exports = {
-  use: [
-    ['@neutrinojs/react', {
-      devServer: { port: 3000 }
-    }]
-  ]
-};
-```
-
 ```js
 // Array format being used within function format
 module.exports = neutrino => {
@@ -244,7 +233,7 @@ module.exports = (neutrino, additionalVars = []) => neutrino.config
 ```
 
 ```js
-// react preset (which is also middleware)
+// env preset (which is also middleware)
 const env = require('@neutrinojs/env');
 
 module.exports = neutrino => {

docs/migration-guide.md

@@ -40,7 +40,7 @@ For a concrete example, `.eslintrc.js`, which utilizes these changes, would migr
 ```js
 const { Neutrino } = require('neutrino');
 
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('eslintrc');
 ```

docs/packages/airbnb-base/README.md

@@ -261,7 +261,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // Even if using .neutrinorc.js, you must specify it when using
 // the API
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('eslintrc');
 ```
@@ -275,7 +275,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // You can choose to not use .neutrinorc.js as the middleware to
 // use if you prefer, specifying any middleware you wish.
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('@neutrinojs/airbnb-base', {
     eslint: {
       rules: { semi: 'off' }

docs/packages/airbnb/README.md

@@ -5,7 +5,7 @@ config, following the [Airbnb styleguide](https://github.com/airbnb/javascript).
 
 [![NPM version][npm-image]][npm-url]
 [![NPM downloads][npm-downloads]][npm-url]
-[![Join the Neutrino community on Spectrum][spectrum-image]][spectrum-url] 
+[![Join the Neutrino community on Spectrum][spectrum-image]][spectrum-url]
 
 ## Features
 
@@ -258,7 +258,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // Even if using .neutrinorc.js, you must specify it when using
 // the API
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('eslintrc');
 ```
@@ -272,7 +272,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // You can choose to not use .neutrinorc.js as the middleware to
 // use if you prefer, specifying any middleware you wish.
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('@neutrinojs/airbnb', {
     eslint: {
       rules: { semi: 'off' }

docs/packages/eslint/README.md

@@ -145,7 +145,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // Even if using .neutrinorc.js, you must specify it when using
 // the API
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('eslintrc');
 ```
@@ -156,7 +156,7 @@ _Example: Create a .eslintrc.js file in the root of the project, using specified
 // .eslintrc.js
 const { Neutrino } = require('neutrino');
 
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('@neutrinojs/eslint', {
     eslint: {
       rules: { semi: 'off' }

docs/packages/standardjs/README.md

@@ -259,7 +259,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // Even if using .neutrinorc.js, you must specify it when using
 // the API
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('eslintrc');
 ```
@@ -270,7 +270,7 @@ _Example: Create a .eslintrc.js file in the root of the project, using specified
 // .eslintrc.js
 const { Neutrino } = require('neutrino');
 
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('@neutrinojs/standardjs', {
     eslint: {
       rules: { semi: 'error' }

docs/packages/style-loader/README.md

@@ -139,8 +139,8 @@ Using a string to define loaders will cause `@neutrinojs/style-loader` to still
 will be used as the `loader` property, `options` will be left blank, and the `useId` will be derived from
 `cssUseId` option above plus the index of this loader within the `loaders` array.
 
-**Important: The `useId` for string-defined loaders will start at `2`, since all loaders are preceded by the included
-`style-loader` and `css-loader`.**
+**Important:** The `useId` for string-defined loaders will start at `2`, since all loaders are preceded by the included
+`style-loader` and `css-loader`.
 
 ```js
 module.exports = {
@@ -156,14 +156,8 @@ module.exports = {
       },
       {
         loader: 'postcss-loader',
-        useId: 'postcss',
         options: {
-          config: {
-
-            // Where to look for config (postcss.config.js)
-            // https://github.com/postcss/postcss-loader#path
-            path: neutrino.options.root
-          }
+          plugins: [require('autoprefixer')]
         }
       }
     ]
@@ -190,6 +184,45 @@ module.exports = {
 Due to the inferred loader names, we highly recommend you stick to using objects
 to define loaders.
 
+### Loader Configuration
+
+You can configure loaders directly by passing `options`.
+For PostCSS, if you want to use an [external config file](https://github.com/michael-ciniawsky/postcss-load-config),
+you need to pass `options.config`:
+
+```js
+// .neutrinorc.js
+module.exports = {
+  use: ['@neutrinojs/style-loader', {
+    loaders: [
+      {
+        loader: 'postcss-loader',
+        useId: 'postcss',
+        options: {
+          config: {
+
+            // Where to look for config (postcss.config.js)
+            // https://github.com/postcss/postcss-loader#path
+            // See "Loader Configuration" below
+            path: neutrino.options.root
+          }
+        }
+      }
+    ]
+  }]
+}
+```
+
+```js
+// .postcssrc.js
+// Example: load tailwindcss plugin
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  }
+};
+```
+
 ## Customization
 
 `@neutrinojs/style-loader` creates some conventions to make overriding the configuration easier once you are

docs/packages/stylelint/README.md

@@ -95,7 +95,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling stylelintrc.
 // Even if using .neutrinorc.js, you must specify it when using
 // the API
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('stylelintrc');
 ```
@@ -106,7 +106,7 @@ _Example: Create a .stylelintrc.js file in the root of the project, using specif
 // .stylelintrc.js
 const { Neutrino } = require('neutrino');
 
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('@neutrinojs/stylelint', {
     config: {
       rules: { 'max-empty-lines': 2 }

packages/airbnb-base/README.md

@@ -261,7 +261,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // Even if using .neutrinorc.js, you must specify it when using
 // the API
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('eslintrc');
 ```
@@ -275,7 +275,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // You can choose to not use .neutrinorc.js as the middleware to
 // use if you prefer, specifying any middleware you wish.
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('@neutrinojs/airbnb-base', {
     eslint: {
       rules: { semi: 'off' }

packages/airbnb/README.md

@@ -5,7 +5,7 @@ config, following the [Airbnb styleguide](https://github.com/airbnb/javascript).
 
 [![NPM version][npm-image]][npm-url]
 [![NPM downloads][npm-downloads]][npm-url]
-[![Join the Neutrino community on Spectrum][spectrum-image]][spectrum-url] 
+[![Join the Neutrino community on Spectrum][spectrum-image]][spectrum-url]
 
 ## Features
 
@@ -258,7 +258,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // Even if using .neutrinorc.js, you must specify it when using
 // the API
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('eslintrc');
 ```
@@ -272,7 +272,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // You can choose to not use .neutrinorc.js as the middleware to
 // use if you prefer, specifying any middleware you wish.
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('@neutrinojs/airbnb', {
     eslint: {
       rules: { semi: 'off' }

packages/create-project/commands/init/index.js

@@ -185,10 +185,15 @@ module.exports = class Project extends Generator {
 
     if (this.data.linter) {
       this.log(`${chalk.green('⏳  Performing one-time lint')}`);
-      this.spawnCommandSync(packages.NEUTRINO, ['lint', '--fix'], {
-        stdio: this.options.stdio === 'inherit' ? 'ignore' : this.options.stdio,
-        cwd: this.options.directory
-      });
+      this.spawnCommandSync(packageManager,
+        isYarn
+          ? ['lint', '--fix']
+          : ['run', 'lint', '--fix'],
+        {
+          stdio: this.options.stdio === 'inherit' ? 'ignore' : this.options.stdio,
+          env: process.env,
+          cwd: this.options.directory
+        });
     }
   }
 

packages/eslint/README.md

@@ -145,7 +145,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // Even if using .neutrinorc.js, you must specify it when using
 // the API
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('eslintrc');
 ```
@@ -156,7 +156,7 @@ _Example: Create a .eslintrc.js file in the root of the project, using specified
 // .eslintrc.js
 const { Neutrino } = require('neutrino');
 
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('@neutrinojs/eslint', {
     eslint: {
       rules: { semi: 'off' }

packages/react-components/index.js

@@ -13,7 +13,8 @@ module.exports = (neutrino, opts = {}) => {
       title: 'React Preview'
     },
     manifest: process.env.NODE_ENV === 'development',
-    externals: opts.externals !== false && {}
+    externals: opts.externals !== false && {},
+    style: { extract: { plugin: { filename: '[name].css' } } }
   }, opts);
 
   neutrino.config.resolve.modules

packages/standardjs/README.md

@@ -259,7 +259,7 @@ const { Neutrino } = require('neutrino');
 // Specify middleware to Neutrino prior to calling eslintrc.
 // Even if using .neutrinorc.js, you must specify it when using
 // the API
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('.neutrinorc.js')
   .call('eslintrc');
 ```
@@ -270,7 +270,7 @@ _Example: Create a .eslintrc.js file in the root of the project, using specified
 // .eslintrc.js
 const { Neutrino } = require('neutrino');
 
-module.exports = Neutrino()
+module.exports = Neutrino({ root: __dirname })
   .use('@neutrinojs/standardjs', {
     eslint: {
       rules: { semi: 'error' }