From 9fb2fdf4f5a97217d2b0f310b45afaa1dc7235db Mon Sep 17 00:00:00 2001 From: Dmitri Efimenko Date: Tue, 21 Nov 2017 02:56:14 +0300 Subject: [PATCH 1/8] build.styleResourcesLoader https://github.com/yenshih/style-resources-loader --- examples/style-resources/README.md | 3 +++ examples/style-resources/assets/resources.scss | 1 + examples/style-resources/nuxt.config.js | 9 +++++++++ examples/style-resources/package.json | 11 +++++++++++ examples/style-resources/pages/index.vue | 12 ++++++++++++ lib/builder/webpack/style-loader.js | 12 +++++++++++- package.json | 1 + 7 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 examples/style-resources/README.md create mode 100644 examples/style-resources/assets/resources.scss create mode 100644 examples/style-resources/nuxt.config.js create mode 100644 examples/style-resources/package.json create mode 100755 examples/style-resources/pages/index.vue diff --git a/examples/style-resources/README.md b/examples/style-resources/README.md new file mode 100644 index 0000000000..58371a7551 --- /dev/null +++ b/examples/style-resources/README.md @@ -0,0 +1,3 @@ +# Using build.styleResources with Nuxt.js + +https://nuxtjs.org/examples diff --git a/examples/style-resources/assets/resources.scss b/examples/style-resources/assets/resources.scss new file mode 100644 index 0000000000..81a376da5c --- /dev/null +++ b/examples/style-resources/assets/resources.scss @@ -0,0 +1 @@ +$main: #ccc; diff --git a/examples/style-resources/nuxt.config.js b/examples/style-resources/nuxt.config.js new file mode 100644 index 0000000000..ed8339dee0 --- /dev/null +++ b/examples/style-resources/nuxt.config.js @@ -0,0 +1,9 @@ +module.exports = { + build: { + styleResources: { + patterns: [ + './assets/resources.scss' + ] + } + } +} diff --git a/examples/style-resources/package.json b/examples/style-resources/package.json new file mode 100644 index 0000000000..2e16d42040 --- /dev/null +++ b/examples/style-resources/package.json @@ -0,0 +1,11 @@ +{ + "name": "hello-nuxt", + "dependencies": { + "nuxt": "latest" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start" + } +} diff --git a/examples/style-resources/pages/index.vue b/examples/style-resources/pages/index.vue new file mode 100755 index 0000000000..920d697356 --- /dev/null +++ b/examples/style-resources/pages/index.vue @@ -0,0 +1,12 @@ + + + diff --git a/lib/builder/webpack/style-loader.js b/lib/builder/webpack/style-loader.js index 1e4b71171d..90f29d57be 100755 --- a/lib/builder/webpack/style-loader.js +++ b/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) } diff --git a/package.json b/package.json index 587da9634f..f82912b4eb 100644 --- a/package.json +++ b/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", From f71abff6c6a1594649d734eb04a5f38c99a61a8c Mon Sep 17 00:00:00 2001 From: Dmitri Efimenko Date: Tue, 21 Nov 2017 03:02:21 +0300 Subject: [PATCH 2/8] Fix style-resources example --- examples/style-resources/pages/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/style-resources/pages/index.vue b/examples/style-resources/pages/index.vue index 920d697356..d414f78af6 100755 --- a/examples/style-resources/pages/index.vue +++ b/examples/style-resources/pages/index.vue @@ -7,6 +7,6 @@ From e56adee99894adc92f993eb77c3d7d95c412bfe6 Mon Sep 17 00:00:00 2001 From: Dmitri Efimenko Date: Tue, 21 Nov 2017 03:14:06 +0300 Subject: [PATCH 3/8] Fix style-resources package.json --- examples/style-resources/package.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/examples/style-resources/package.json b/examples/style-resources/package.json index 2e16d42040..6e9386ab8b 100644 --- a/examples/style-resources/package.json +++ b/examples/style-resources/package.json @@ -1,5 +1,5 @@ { - "name": "hello-nuxt", + "name": "style-resources", "dependencies": { "nuxt": "latest" }, @@ -7,5 +7,9 @@ "dev": "nuxt", "build": "nuxt build", "start": "nuxt start" + }, + "devDependencies": { + "node-sass": "^4.7.2", + "sass-loader": "^6.0.6" } } From 162b56ee4e34e2dffa84b321afd8b7c586fe0aec Mon Sep 17 00:00:00 2001 From: Clark Du Date: Tue, 21 Nov 2017 09:54:02 +0800 Subject: [PATCH 4/8] test: custom postcss config --- test/fixtures/with-config/nuxt.config.js | 1 + test/fixtures/with-config/pages/index.vue | 6 ++++++ test/fixtures/with-config/postcss.config.js | 17 +++++++++++++++++ test/with-config.test.js | 5 +++++ 4 files changed, 29 insertions(+) create mode 100644 test/fixtures/with-config/postcss.config.js diff --git a/test/fixtures/with-config/nuxt.config.js b/test/fixtures/with-config/nuxt.config.js index 34012a7fc1..8acd8c068f 100644 --- a/test/fixtures/with-config/nuxt.config.js +++ b/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', diff --git a/test/fixtures/with-config/pages/index.vue b/test/fixtures/with-config/pages/index.vue index a24e4f00e8..4655686e0f 100644 --- a/test/fixtures/with-config/pages/index.vue +++ b/test/fixtures/with-config/pages/index.vue @@ -4,3 +4,9 @@ About page + + diff --git a/test/fixtures/with-config/postcss.config.js b/test/fixtures/with-config/postcss.config.js new file mode 100644 index 0000000000..a09f38e1b9 --- /dev/null +++ b/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': {} + } +} diff --git a/test/with-config.test.js b/test/with-config.test.js index f179df1e39..0dd726da0c 100644 --- a/test/with-config.test.js +++ b/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 From 9bf73b0b5a4d254d710d8e10bf57b177bee09655 Mon Sep 17 00:00:00 2001 From: Clark Du Date: Tue, 21 Nov 2017 15:38:12 +0800 Subject: [PATCH 5/8] test: inline postcss config --- test/basic.ssr.test.js | 6 ++++++ test/fixtures/basic/nuxt.config.js | 7 ++++++- test/fixtures/basic/pages/css.vue | 4 ++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/test/basic.ssr.test.js b/test/basic.ssr.test.js index 9b9a4d62a8..e3dc4559b2 100755 --- a/test/basic.ssr.test.js +++ b/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('

The answer is 42

')) diff --git a/test/fixtures/basic/nuxt.config.js b/test/fixtures/basic/nuxt.config.js index e291976a5c..6d0b354c14 100644 --- a/test/fixtures/basic/nuxt.config.js +++ b/test/fixtures/basic/nuxt.config.js @@ -15,5 +15,10 @@ module.exports = { bad: null, '': true }, - transition: false + transition: false, + build: { + postcss: [ + require('postcss-cssnext')() + ] + } } diff --git a/test/fixtures/basic/pages/css.vue b/test/fixtures/basic/pages/css.vue index 902c7a07f2..08eca4556c 100755 --- a/test/fixtures/basic/pages/css.vue +++ b/test/fixtures/basic/pages/css.vue @@ -3,6 +3,10 @@