Feature: postcss extensions to default loader if no loader provided

If no postcss loader is provided in vue loader options then default to
vue-loader handling

This allows you to use vue internal postcss/css handling with known
postcss extensions

fixes: #942
fixes: #800
fixes: #654

Author: blake-newman

lib/loader.js

@@ -29,6 +29,10 @@ const defaultLang = {
   script: 'js'
 }
 
+const postcssExtensions = [
+  'postcss', 'pcss', 'sugarss', 'sss'
+]
+
 // When extracting parts from the source vue file, we want to apply the
 // loaders chained before vue-loader, but exclude some loaders that simply
 // produces side effects such as linting.
@@ -556,9 +560,11 @@ module.exports = function (content) {
           hasInlineConfig: !!query.postcss
         }) +
         '!'
-      // normalize scss/sass if no specific loaders have been provided
+      // normalize scss/sass/postcss if no specific loaders have been provided
       if (!loaders[lang]) {
-        if (lang === 'sass') {
+        if (postcssExtensions.indexOf(lang) !== -1) {
+          lang = 'css'
+        } else if (lang === 'sass') {
           lang = 'sass?indentedSyntax'
         } else if (lang === 'scss') {
           lang = 'sass'

test/fixtures/postcss-lang.vue

@@ -0,0 +1,6 @@
+<style lang="pcss">
+h1 {
+  color: red;
+  font-size: 14px
+}
+</style>

test/test.js

@@ -507,6 +507,17 @@ describe('vue-loader', () => {
     })
   })
 
+  it('postcss options', done => {
+    test({
+      entry: './test/fixtures/postcss-lang.vue'
+    }, (window) => {
+      let style = window.document.querySelector('style').textContent
+      style = normalizeNewline(style)
+      expect(style).to.contain('h1 {\n  color: red;\n  font-size: 14px\n}')
+      done()
+    })
+  })
+
   it('transpile ES2015 features in template', done => {
     test({
       entry: './test/fixtures/es2015.vue'