Merge remote-tracking branch 'nuxt/dev' into dev

bin/nuxt-dev

@@ -84,24 +84,41 @@ function startDev(oldNuxt) {
   const port = argv.port || process.env.PORT || process.env.npm_package_config_nuxt_port
   const host = argv.hostname || process.env.HOST || process.env.npm_package_config_nuxt_host
 
+  // Error handler
+  const onError = (err, nuxt) => {
+    debug('Error while reloading [nuxt.config.js]', err)
+    return Promise.resolve(nuxt) // Wait for next reload
+  }
+
   // Load options
   let options = {}
   try {
     options = loadNuxtConfig()
   } catch (err) {
-    console.error(err)
+    return onError(err, oldNuxt)
-    return // Wait for next reload
   }
 
   // Create nuxt and builder instance
-  const nuxt = new Nuxt(options)
+  let nuxt
-  const builder = new Builder(nuxt)
+  let builder
+  try {
+    nuxt = new Nuxt(options)
+    builder = new Builder(nuxt)
+  } catch (err) {
+    return onError(err, nuxt || oldNuxt)
+  }
 
   return Promise.resolve()
-    .then(() => builder.build()) // 1- Start build
+    // Start build
-    .then(() => oldNuxt ? oldNuxt.close() : Promise.resolve()) // 2- Close old nuxt after successful build
+    .then(() => builder.build())
-    .then(() => nuxt.listen(port, host)) // 3- Start listening
+    // Close old nuxt after successful build
-    .then(() => nuxt) // 4- Pass new nuxt to watch chain
+    .then(() => oldNuxt ? oldNuxt.close() : Promise.resolve())
+    // Start listening
+    .then(() => nuxt.listen(port, host))
+    // Pass new nuxt to watch chain
+    .then(() => nuxt)
+    // Handle errors
+    .catch((err) => onError(err, nuxt))
 }
 
 function loadNuxtConfig() {

examples/style-resources/README.md

@@ -0,0 +1,3 @@
+# Using build.styleResources with Nuxt.js
+
+https://nuxtjs.org/examples

examples/style-resources/assets/resources.scss

@@ -0,0 +1 @@
+$main: #ccc;

examples/style-resources/nuxt.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  build: {
+    styleResources: {
+      patterns: [
+        './assets/resources.scss'
+      ]
+    }
+  }
+}

examples/style-resources/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "style-resources",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  },
+  "devDependencies": {
+    "node-sass": "^4.7.2",
+    "sass-loader": "^6.0.6"
+  }
+}

examples/style-resources/pages/index.vue

@@ -0,0 +1,12 @@
+<style lang="scss">
+.main {
+  background: $main;
+}
+</style>
+
+<template>
+  <div class="main">
+    <h1>Welcome!</h1>
+    <p>Background is grey</p>
+  </div>
+</template>

lib/app/components/no-ssr.js

@@ -17,11 +17,12 @@ export default {
     if (this.canRender) {
       if (
         process.env.NODE_ENV === 'development' &&
+        this.$slots.default &&
         this.$slots.default.length > 1
       ) {
         throw new Error('<no-ssr> You cannot use multiple child components')
       }
-      return this.$slots.default[0]
+      return this.$slots.default && this.$slots.default[0]
     }
     return h('div', { class: { 'no-ssr-placeholder': true } }, this.placeholder)
   }

lib/builder/webpack/style-loader.js

@@ -56,10 +56,20 @@ export default function styleLoader(ext, loaders = [], isVueLoader = false) {
     })
   }
 
+  // https://github.com/yenshih/style-resources-loader
+  let styleResourcesLoader
+  if (this.options.build.styleResources) {
+    styleResourcesLoader = {
+      loader: 'style-resources-loader',
+      options: this.options.build.styleResources
+    }
+  }
+
   return [
     vueStyleLoader,
     cssLoader,
     postcssLoader,
-    ...loaders
+    ...loaders,
+    styleResourcesLoader
   ].filter(l => l)
 }

package.json

@@ -108,6 +108,7 @@
     "server-destroy": "^1.0.1",
     "source-map": "^0.6.1",
     "source-map-support": "^0.5.0",
+    "style-resources-loader": "^0.3.0",
     "uglifyjs-webpack-plugin": "^1.0.1",
     "url-loader": "^0.6.2",
     "vue": "^2.5.6",

test/basic.ssr.test.js

@@ -43,6 +43,12 @@ test('/css', async t => {
   t.is(window.getComputedStyle(element).color, 'red')
 })
 
+test('/postcss', async t => {
+  const window = await nuxt.renderAndGetWindow(url('/css'))
+  const element = window.document.querySelector('div.red')
+  t.is(window.getComputedStyle(element)['background-color'], 'blue')
+})
+
 test('/stateful', async t => {
   const { html } = await nuxt.renderRoute('/stateful')
   t.true(html.includes('<div><p>The answer is 42</p></div>'))

test/fixtures/basic/nuxt.config.js

@@ -15,5 +15,10 @@ module.exports = {
     bad: null,
     '': true
   },
-  transition: false
+  transition: false,
+  build: {
+    postcss: [
+      require('postcss-cssnext')()
+    ]
+  }
 }

test/fixtures/basic/pages/css.vue

@@ -3,6 +3,10 @@
 </template>
 
 <style>
+@custom-selector :--red div.red;
+:--red {
+  background-color: blue;
+}
 .red {
   color: red;
 }

test/fixtures/with-config/nuxt.config.js

@@ -19,6 +19,7 @@ module.exports = {
   modulesDir: path.join(__dirname, '..', '..', '..', 'node_modules'),
   transition: 'test',
   layoutTransition: 'test',
+  loadingIndicator: 'circle',
   offline: true,
   plugins: [
     '~/plugins/test.js',

test/fixtures/with-config/pages/index.vue

@@ -4,3 +4,9 @@
     <nuxt-link to="/about">About page</nuxt-link>
   </div>
 </template>
+
+<style>
+::placeholder {
+  color: black;
+}
+</style>

test/fixtures/with-config/postcss.config.js

@@ -0,0 +1,17 @@
+const path = require('path')
+const modulesDir = path.join(__dirname, '..', '..', '..', 'node_modules')
+const rootDir = __dirname
+
+module.exports = {
+  plugins: {
+    'postcss-import': {
+      root: rootDir,
+      path: [
+        rootDir,
+        modulesDir
+      ]
+    },
+    'postcss-url': {},
+    'postcss-cssnext': {}
+  }
+}

test/with-config.test.js

@@ -44,6 +44,11 @@ test('/ (custom build.publicPath)', async t => {
   t.true(html.includes('src="/test/orion/vendor.'))
 })
 
+test('/ (custom postcss.config.js)', async t => {
+  const { html } = await nuxt.renderRoute('/')
+  t.true(html.includes('::-webkit-input-placeholder'))
+})
+
 test('/test/ (router base)', async t => {
   const window = await nuxt.renderAndGetWindow(url('/test/'))
   const html = window.document.body.innerHTML