fix(nx): fix style selection on windows

Author: vsavkin

packages/create-nx-workspace/bin/create-nx-workspace.ts

@@ -60,11 +60,13 @@ const packageManager = determinePackageManager();
 determineWorkspaceName(parsedArgs).then(name => {
   determinePreset(parsedArgs).then(preset => {
     return determineAppName(preset, parsedArgs).then(appName => {
-      return determineCli(preset, parsedArgs).then(cli => {
-        const tmpDir = createSandbox(packageManager, cli);
-        createApp(tmpDir, cli, parsedArgs, name, preset, appName);
-        showNxWarning();
-        showCliWarning(preset, parsedArgs);
+      return determineStyle(preset).then(style => {
+        return determineCli(preset, parsedArgs).then(cli => {
+          const tmpDir = createSandbox(packageManager, cli);
+          createApp(tmpDir, cli, parsedArgs, name, preset, appName, style);
+          showNxWarning();
+          showCliWarning(preset, parsedArgs);
+        });
       });
     });
   });
@@ -126,7 +128,7 @@ function determineWorkspaceName(parsedArgs: any) {
       .prompt([
         {
           name: 'WorkspaceName',
-          message: `Workspace name (e.g., org name)    `,
+          message: `Workspace name (e.g., org name)               `,
           type: 'string'
         }
       ])
@@ -141,8 +143,6 @@ function determineWorkspaceName(parsedArgs: any) {
         return a.WorkspaceName;
       });
   }
-
-  return workspaceName;
 }
 
 function determinePreset(parsedArgs: any): Promise<string> {
@@ -165,7 +165,7 @@ function determinePreset(parsedArgs: any): Promise<string> {
       .prompt([
         {
           name: 'Preset',
-          message: `What to create in the new workspace`,
+          message: `What to create in the new workspace           `,
           default: 'empty',
           type: 'list',
           choices: presetOptions
@@ -187,7 +187,7 @@ function determineAppName(preset: string, parsedArgs: any): Promise<string> {
       .prompt([
         {
           name: 'AppName',
-          message: `Application name                   `,
+          message: `Application name                              `,
           type: 'string'
         }
       ])
@@ -241,7 +241,7 @@ function determineCli(preset: string, parsedArgs: any) {
       .prompt([
         {
           name: 'CLI',
-          message: `CLI to power the Nx workspace      `,
+          message: `CLI to power the Nx workspace                 `,
           default: 'nx',
           type: 'list',
           choices: [
@@ -262,6 +262,46 @@ function determineCli(preset: string, parsedArgs: any) {
   }
 }
 
+function determineStyle(preset: string) {
+  if (preset === 'empty') return Promise.resolve(null);
+  return inquirer
+    .prompt([
+      {
+        name: 'style',
+        message: `Which stylesheet format would you like to use?`,
+        default: 'css',
+        type: 'list',
+        choices: [
+          {
+            value: 'css',
+            name: 'CSS'
+          },
+          {
+            value: 'scss',
+            name: 'SASS(.scss)  [ http://sass-lang.com   ]'
+          },
+          {
+            value: 'styl',
+            name: 'Stylus(.styl)[ http://stylus-lang.com ]'
+          },
+          {
+            value: 'less',
+            name: 'LESS         [ http://lesscss.org     ]'
+          },
+          {
+            value: 'styled-components',
+            name: 'styled-components [ https://styled-components.com ]'
+          },
+          {
+            value: '@emotion/styled',
+            name: 'emotion           [ https://emotion.sh]'
+          }
+        ]
+      }
+    ])
+    .then(a => a.style);
+}
+
 function createSandbox(
   packageManager: string,
   cli: { package: string; version: string }
@@ -294,7 +334,8 @@ function createApp(
   parsedArgs: any,
   name: string,
   preset: string,
-  appName: string
+  appName: string,
+  style: string | null
 ) {
   // creating the app itself
   const args = [
@@ -309,7 +350,11 @@ function createApp(
     ? ''
     : ` --preset=${preset} --appName=${appName}`;
 
-  console.log(`new ${args}${presetArg} --collection=@nrwl/workspace`);
+  const styleArg = style ? ` --style=${style}` : ``;
+
+  console.log(
+    `new ${args}${presetArg}${styleArg} --collection=@nrwl/workspace`
+  );
   execSync(
     `"${path.join(
       tmpDir,

packages/workspace/src/schematics/ng-new/schema.json

@@ -17,37 +17,7 @@
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
-      "default": "css",
-      "x-prompt": {
-        "message": "Which stylesheet format would you like to use?",
-        "type": "list",
-        "items": [
-          {
-            "value": "css",
-            "label": "CSS"
-          },
-          {
-            "value": "scss",
-            "label": "SASS(.scss)  [ http://sass-lang.com   ]"
-          },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)[ http://stylus-lang.com ]"
-          },
-          {
-            "value": "less",
-            "label": "LESS         [ http://lesscss.org     ]"
-          },
-          {
-            "value": "styled-components",
-            "label": "styled-components [ https://styled-components.com ]"
-          },
-          {
-            "value": "@emotion/styled",
-            "label": "emotion           [ https://emotion.sh            ]"
-          }
-        ]
-      }
+      "default": "css"
     },
     "directory": {
       "type": "string",

packages/workspace/src/schematics/tao-new/schema.json

@@ -17,37 +17,7 @@
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
-      "default": "css",
-      "x-prompt": {
-        "message": "Which stylesheet format would you like to use?",
-        "type": "list",
-        "items": [
-          {
-            "value": "css",
-            "label": "CSS"
-          },
-          {
-            "value": "scss",
-            "label": "SASS(.scss)  [ http://sass-lang.com   ]"
-          },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)[ http://stylus-lang.com ]"
-          },
-          {
-            "value": "less",
-            "label": "LESS         [ http://lesscss.org     ]"
-          },
-          {
-            "value": "styled-components",
-            "label": "styled-components [ https://styled-components.com ]"
-          },
-          {
-            "value": "@emotion/styled",
-            "label": "emotion           [ https://emotion.sh            ]"
-          }
-        ]
-      }
+      "default": "css"
     },
     "directory": {
       "type": "string",