Add postcss vue-loader support

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        'postcss-custom-properties': {}
+    }
+};

src/components/Vue.js

@@ -33,8 +33,32 @@ class Vue {
      * Update all preprocessor loaders to support CSS extraction.
      */
     updateCssLoaders(webpackConfig) {
-        // Basic CSS
-        this.updateCssLoader('css', ['css-loader'], webpackConfig);
+        // Basic CSS and PostCSS
+        this.updateCssLoader(
+            'css',
+            [
+                { loader: 'css-loader', options: { importLoaders: 1 } },
+                {
+                    loader: 'postcss-loader',
+                    options: (() => {
+                        let postCssOptions = { ident: 'postcss' };
+
+                        if (Mix.components.get('postCss')) {
+                            postCssOptions.plugins = Mix.components.get(
+                                'postCss'
+                            ).details[0].postCssPlugins;
+                        } else if (
+                            !File.exists(Mix.paths.root('postcss.config.js'))
+                        ) {
+                            postCssOptions.plugins = [];
+                        }
+
+                        return postCssOptions;
+                    })()
+                }
+            ],
+            webpackConfig
+        );
 
         // LESS
         this.updateCssLoader(

test/features/vue.js

@@ -229,6 +229,31 @@ test.cb.serial('it extracts vue .sass styles to a dedicated file', t => {
     });
 });
 
+test.cb.serial('it extracts vue PostCSS styles to a dedicated file', t => {
+    mix.js(
+        'test/fixtures/fake-app/resources/assets/vue/app-with-vue-and-postcss.js',
+        'js/app.js'
+    ).options({ extractVueStyles: 'css/components.css' });
+
+    compile(t, config => {
+        // In this example, postcss-loader is reading from postcss.config.js.
+        let expected = `
+:root {
+    --color: white;
+}
+.hello {
+    color: white;
+    color: var(--color);
+}
+`;
+
+        t.is(
+            expected,
+            File.find('test/fixtures/fake-app/public/css/components.css').read()
+        );
+    });
+});
+
 test.cb.serial('it extracts vue Less styles to a dedicated file', t => {
     mix.js(
         'test/fixtures/fake-app/resources/assets/vue/app-with-vue-and-less.js',

test/fixtures/fake-app/resources/assets/vue/BasicWithPostCss.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="hello">{{ message }}</div>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            message: 'Hello World'
+        };
+    }
+};
+</script>
+
+<style>
+:root {
+    --color: white;
+}
+
+.hello {
+    color: var(--color);
+}
+</style>

test/fixtures/fake-app/resources/assets/vue/app-with-vue-and-postcss.js

@@ -0,0 +1,8 @@
+import 'vue';
+import BasicWithPostCss from './BasicWithPostCss.vue';
+
+new Vue({
+    components: {
+        BasicWithPostCss
+    }
+}).$mount('#app');