Add tests for async style-containing vue components when extracting s…

…tyles (#2712) * Fix docblock * Extract vendor deps in integration test This tests more edge cases * Extract vue styles This ensures extracted styles work as expected * Add async component with styles This used to fail but now works with webpack 5.25.1 * Fix extraction of JSX styles
laravel-mix · Mar 14, 2021 · 9780e7e · 9780e7e
1 parent 3b06f0d
commit 9780e7e
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 8 deletions.
diff --git a/src/components/Preprocessor.js b/src/components/Preprocessor.js
@@ -103,7 +103,7 @@ class Preprocessor {
     /**
      * Prepare the preprocessor plugin options.
      *
-     * @param {Object} preprocessor
+     * @param {Detail} preprocessor
      * @param {Boolean} processUrls
      */
     loaderOptions(preprocessor, processUrls) {

diff --git a/src/components/Vue.js b/src/components/Vue.js
@@ -134,6 +134,17 @@ class Vue {
                 type: 'css/mini-extract'
             }
         );
+
+        this.chunks.add(
+            'styles-jsx',
+            this.styleChunkName(),
+            [/.jsx$/, module => module.type === 'css/mini-extract'],
+            {
+                chunks: 'all',
+                enforce: true,
+                type: 'css/mini-extract'
+            }
+        );
     }
 
     /**

diff --git a/test/fixtures/integration/dist/index.html b/test/fixtures/integration/dist/index.html
@@ -2,16 +2,20 @@
 <html lang="en">
     <head>
         <link rel="stylesheet" href="/css/app.css" />
+        <link rel="stylesheet" href="/css/vue-styles.css" />
     </head>
     <body>
         <p>Laravel Mix Fixture Integration Test Page</p>
         <div id="app">
             <div>
                 This is a test
                 <scss-module></scss-module>
+                <async-component></async-component>
             </div>
         </div>
         <div id="react-app"></div>
+        <script src="/js/manifest.js"></script>
+        <script src="/js/vendor.js"></script>
         <script src="/js/app.js"></script>
     </body>
 </html>
diff --git a/test/fixtures/integration/src/js/AsyncComponent.vue b/test/fixtures/integration/src/js/AsyncComponent.vue
@@ -0,0 +1,32 @@
+<style>
+.async-style {
+    color: #ff7700;
+}
+</style>
+<style scoped>
+.async-style-scoped {
+    border: 1px solid #ff7700;
+}
+</style>
+
+<template>
+    <div id="async-component" class="async-style async-style-scoped">
+        This will have an orange border and orange text.
+    </div>
+</template>
+
+<script>
+import { onMounted } from 'vue';
+
+export default {
+    setup() {
+        onMounted(() => {
+            const style = window.getComputedStyle(
+                document.querySelector('#async-component')
+            );
+
+            console.log(`async component style: ${style.color} ${style.borderColor}`);
+        });
+    }
+};
+</script>
diff --git a/test/fixtures/integration/src/js/app-vue.js b/test/fixtures/integration/src/js/app-vue.js
@@ -1,4 +1,4 @@
-import { createApp } from 'vue';
+import { createApp, defineAsyncComponent } from 'vue';
 import ScssModule from './ScssModule.vue';
 
 async function run() {
@@ -12,7 +12,8 @@ async function run() {
 export function setupVueApp() {
     const app = createApp({
         components: {
-            ScssModule
+            ScssModule,
+            AsyncComponent: defineAsyncComponent(() => import('./AsyncComponent.vue'))
         },
 
         setup() {

diff --git a/test/integration/mix.js b/test/integration/mix.js
@@ -33,8 +33,10 @@ test('compiling just js', async t => {
     // Build a simple mix setup
     setupVueAliases(3);
 
-    mix.js('test/fixtures/integration/src/js/app.js', 'js/app.js').vue();
+    mix.js('test/fixtures/integration/src/js/app.js', 'js/app.js');
+    mix.vue({ extractStyles: 'css/vue-styles.css' });
     mix.react();
+    mix.extract();
 
     await webpack.compile();
     await assertProducesLogs(t, ['loaded: app.js']);
@@ -44,10 +46,12 @@ test('compiling js and css together', async t => {
     setupVueAliases(3);
 
     // Build a simple mix setup
-    mix.js('test/fixtures/integration/src/js/app.js', 'js/app.js').vue();
+    mix.js('test/fixtures/integration/src/js/app.js', 'js/app.js');
     mix.react();
     mix.sass('test/fixtures/integration/src/css/app.scss', 'css/app.css');
     mix.postCss('test/fixtures/integration/src/css/app.css', 'css/app.css');
+    mix.vue({ extractStyles: 'css/vue-styles.css' });
+    mix.extract();
 
     await webpack.compile();
     await assertProducesLogs(t, [
@@ -56,15 +60,18 @@ test('compiling js and css together', async t => {
         'loaded: dynamic.js',
         'run: dynamic.js',
         'style: rgb(255, 119, 0)',
-        'style: rgb(119, 204, 51)'
+        'style: rgb(119, 204, 51)',
+        'async component style: rgb(255, 119, 0) rgb(255, 119, 0)'
     ]);
 });
 
 test('node browser polyfills: enabled', async t => {
     setupVueAliases(3);
 
-    mix.js('test/fixtures/integration/src/js/app.js', 'js/app.js').vue();
+    mix.js('test/fixtures/integration/src/js/app.js', 'js/app.js');
+    mix.vue({ extractStyles: 'css/vue-styles.css' });
     mix.react();
+    mix.extract();
 
     await webpack.compile();
     await assertProducesLogs(t, [
@@ -79,8 +86,10 @@ test('node browser polyfills: enabled', async t => {
 test('node browser polyfills: disabled', async t => {
     setupVueAliases(3);
 
-    mix.js('test/fixtures/integration/src/js/app.js', 'js/app.js').vue();
+    mix.js('test/fixtures/integration/src/js/app.js', 'js/app.js');
+    mix.vue({ extractStyles: 'css/vue-styles.css' });
     mix.react();
+    mix.extract();
     mix.options({ legacyNodePolyfills: false });
 
     await webpack.compile();