add extract CSS option

ZachJW34 · Jun 30, 2020 · 91ec475 · 91ec475
1 parent 40a7fec
commit 91ec475
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 4 deletions.
diff --git a/libs/vue-plugin/src/builders/browser/builder.ts b/libs/vue-plugin/src/builders/browser/builder.ts
@@ -67,7 +67,10 @@ export function runBuilder(
       // https://github.com/vuejs/vue-cli/blob/c64afc3c2a8854aae30fbfb85e92c0bb8b07bad7/packages/%40vue/cli-service/lib/commands/build/resolveAppConfig.js#L6
       outputDir: getSystemPath(
         join(normalize(context.workspaceRoot), options.outputPath)
-      )
+      ),
+      css: {
+        extract: options.extractCss
+      }
     };
 
     return {

diff --git a/libs/vue-plugin/src/builders/browser/schema.d.ts b/libs/vue-plugin/src/builders/browser/schema.d.ts
@@ -16,6 +16,7 @@ export interface BrowserBuilderSchema extends JsonObject {
   assets: Array<string | AssetPattern>;
   fileReplacements: FileReplacementPattern[];
   outputHashing: 'none' | 'all' | 'media' | 'bundles';
+  extractCss: boolean;
 }
 
 interface AssetPattern {

diff --git a/libs/vue-plugin/src/builders/browser/schema.json b/libs/vue-plugin/src/builders/browser/schema.json
@@ -91,6 +91,11 @@
       "description": "Define the output filename cache-busting hashing mode.",
       "default": "none",
       "enum": ["none", "all", "media", "bundles"]
+    },
+    "extractCss": {
+      "type": "boolean",
+      "description": "Extract css from global styles into css files instead of js ones.",
+      "default": false
     }
   },
   "required": ["outputPath", "index", "main", "tsConfig"],

diff --git a/libs/vue-plugin/src/builders/dev-server/builder.ts b/libs/vue-plugin/src/builders/dev-server/builder.ts
@@ -71,6 +71,9 @@ export function runBuilder(
             }
           });
         }
+      },
+      css: {
+        extract: browserOptions.extractCss
       }
     };
 

diff --git a/libs/vue-plugin/src/schematics/application/schematic.spec.ts b/libs/vue-plugin/src/schematics/application/schematic.spec.ts
@@ -53,7 +53,8 @@ describe('application schematic', () => {
         }
       ],
       mode: 'production',
-      outputHashing: 'all'
+      outputHashing: 'all',
+      extractCss: true
     });
     expect(serve.builder).toBe('@nx-plus/vue-plugin:dev-server');
     expect(serve.options).toEqual({

diff --git a/libs/vue-plugin/src/schematics/application/schematic.ts b/libs/vue-plugin/src/schematics/application/schematic.ts
@@ -221,7 +221,8 @@ export default function(options: ApplicationSchematicSchema): Rule {
               }
             ],
             mode: 'production',
-            outputHashing: 'all'
+            outputHashing: 'all',
+            extractCss: true
           }
         }
       });

diff --git a/libs/vue-plugin/src/webpack.ts b/libs/vue-plugin/src/webpack.ts
@@ -186,7 +186,7 @@ export function modifyFilenameHashing(
       return loaderOptions;
     });
 
-  config.when(options.mode === 'production', config =>
+  config.when(options.extractCss, config =>
     config.plugin('extract-css').tap(args => {
       args[0].filename = `css/[name]${hashFormat.chunk}.css`;
       args[0].chunkFilename = `css/[name]${hashFormat.chunk}.css`;
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,6 +71,9 @@ export function runBuilder( @@
                 }
               });
             }
+          },
+          css: {
+            extract: browserOptions.extractCss
           }
         };
@@ Expand Down @@