From e2e849fbd2ebcd2c475d73efe2186f4cf189e0d7 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 5 May 2017 18:40:12 +0430 Subject: [PATCH 1/3] [vue-style-loader] Inline global css on SSR Currently with ` -<% }) %> From 6504b0666aad12f18394b9f8cdf6d1cf0a042b06 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 5 May 2017 18:45:00 +0430 Subject: [PATCH 2/3] ESLint Fixes --- lib/generate.js | 15 ++++++++------- lib/webpack/client.config.js | 2 -- lib/webpack/helpers.js | 4 ++-- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/lib/generate.js b/lib/generate.js index f0e656dec2..4cb1f2b398 100644 --- a/lib/generate.js +++ b/lib/generate.js @@ -100,18 +100,18 @@ export default function () { yield waitFor(n++ * self.options.generate.interval) try { var { html, error } = yield self.renderRoute(route, { _generate: true }) - if(error) { - errors.push({ type : 'handled', route, error }) + if (error) { + errors.push({type: 'handled', route, error}) } } catch (err) { - errors.push({ type : 'unhandled', route, error: err }) + errors.push({type: 'unhandled', route, error: err}) return } try { var minifiedHtml = minify(html, self.options.generate.minify) - } catch(err) { + } catch (err) { let minifyErr = new Error(`HTML minification failed. Make sure the route generates valid HTML. Failed HTML:\n ${html}`) - errors.push({ type : 'unhandled', route, error: minifyErr }) + errors.push({type: 'unhandled', route, error: minifyErr}) return } var path = join(route, sep, 'index.html') // /about -> /about/index.html @@ -136,8 +136,9 @@ export default function () { debug(`HTML Files generated in ${duration}s`) if (errors.length) { - console.error('==== Error report ==== \n' + errors.map( ({type, route, error}) => { - if(type === 'unhandled') { + /* eslint-disable no-console */ + console.error('==== Error report ==== \n' + errors.map(({type, route, error}) => { + if (type === 'unhandled') { return `Route: '${route}'\n${error.stack}` } else { return `Route: '${route}' thrown an error: \n` + JSON.stringify(error) diff --git a/lib/webpack/client.config.js b/lib/webpack/client.config.js index f4054c05e0..fda3296344 100644 --- a/lib/webpack/client.config.js +++ b/lib/webpack/client.config.js @@ -3,14 +3,12 @@ import { each, defaults } from 'lodash' import webpack from 'webpack' import VueSSRClientPlugin from 'vue-server-renderer/client-plugin' -import ExtractTextPlugin from 'extract-text-webpack-plugin' import HTMLPlugin from 'html-webpack-plugin' import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin' import ProgressBarPlugin from 'progress-bar-webpack-plugin' import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer' import OfflinePlugin from 'offline-plugin' import base from './base.config.js' -import { extractStyles } from './helpers' import { resolve } from 'path' /* diff --git a/lib/webpack/helpers.js b/lib/webpack/helpers.js index 9681212994..3a43041095 100755 --- a/lib/webpack/helpers.js +++ b/lib/webpack/helpers.js @@ -1,10 +1,10 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin' -export function extractStyles(ext) { +export function extractStyles (ext) { return !this.dev && !!this.options.build.extractCSS && this.options.build.extractCSS[ext] !== false } -export function styleLoader(ext, loader = []) { +export function styleLoader (ext, loader = []) { if (!extractStyles.call(this, ext)) { return ['vue-style-loader', 'css-loader'].concat(loader) } From 98ffc2110be26f2a76c363db131888bbde5c6502 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 5 May 2017 18:55:17 +0430 Subject: [PATCH 3/3] [tests] ensure global styles are inlined --- test/fixtures/with-config/assets/app.css | 3 +++ test/fixtures/with-config/nuxt.config.js | 5 ++++- test/with-config.test.js | 5 +++++ 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100755 test/fixtures/with-config/assets/app.css diff --git a/test/fixtures/with-config/assets/app.css b/test/fixtures/with-config/assets/app.css new file mode 100755 index 0000000000..f69fcd8bbc --- /dev/null +++ b/test/fixtures/with-config/assets/app.css @@ -0,0 +1,3 @@ +.global-css-selector { + color: red; +} diff --git a/test/fixtures/with-config/nuxt.config.js b/test/fixtures/with-config/nuxt.config.js index f6ef845ad5..b1aec4f60d 100644 --- a/test/fixtures/with-config/nuxt.config.js +++ b/test/fixtures/with-config/nuxt.config.js @@ -31,5 +31,8 @@ module.exports = { extend (config, options) { config.devtool = 'nosources-source-map' } - } + }, + css: [ + {src: '~/assets/app.css'} + ] } diff --git a/test/with-config.test.js b/test/with-config.test.js index d9b4845f52..862bbf4901 100644 --- a/test/with-config.test.js +++ b/test/with-config.test.js @@ -24,6 +24,11 @@ test('/', async t => { t.true(html.includes('

I have custom configurations

')) }) +test('/ (global styles inlined)', async t => { + const { html } = await nuxt.renderRoute('/') + t.true(html.includes('.global-css-selector')) +}) + test('/ (custom app.html)', async t => { const { html } = await nuxt.renderRoute('/') t.true(html.includes('

Made by Nuxt.js team

'))