feat(cli): check @angular/cli version

* install tailwind deps based on cli version * change prod flag for cli above 12
notiz-dev · May 15, 2021 · d904226 · d904226
1 parent 823b999
commit d904226
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -60,7 +60,6 @@ All available flags:
 | Flag                             |  Description                                                   | Type             |  Default                                              |
 | -------------------------------- | -------------------------------------------------------------- | ---------------- | ----------------------------------------------------- |
 |  `autoprefixerVersion`           | The autoprefixer version to be installed.                      | string           | `^10.2.4`                                             |
-|  `angularCliWithTailwindSupport` | Angular CLI Version above 11.2 with Tailwind CSS support.      | boolean          | Prompted                                              |
 |  `cssFormat`                     | The file extension or preprocessor to use for style files.     | `css` \|  `scss` | `css`                                                 |
 |  `ngxBuildPlusVersion`           | The ngx-build-plus version to be installed.                    | `string`         | `^11.0.0`                                             |
 |  `project`                       | The project to initialize with Tailwind CSS.                   | `string`         | **First** Angular project                             |

diff --git a/src/ng-add/index.ts b/src/ng-add/index.ts
@@ -28,6 +28,8 @@ import {
 import { InsertChange } from '@schematics/angular/utility/change';
 import { Builders } from '@schematics/angular/utility/workspace-models';
 import { WorkspaceDefinition } from '@angular-devkit/core/src/workspace';
+import { getCliVersionAsNumber } from '../util/ng-cli-version';
+import { hasTailwindSupport } from '../util/has-tailwind-support';
 
 const NGX_BUILD_PLUS_BUILDER_TARGET = 'ngx-build-plus:browser';
 const NGX_BUILD_PLUS_DEV_BUILDER_TARGET = 'ngx-build-plus:dev-server';
@@ -61,11 +63,13 @@ export function ngAdd(_options: Schema): Rule {
       (plugin) => `require('${plugin}')\n`,
     );
 
-    if (_options.angularCliWithTailwindSupport) {
+    const cliVersion = getCliVersionAsNumber(host);
+
+    if (hasTailwindSupport(host)) {
       return chain([
         addDependenciesWithTailwindSupport(_options),
         addTailwindPlugins(tailwindPluginDependencies),
-        addNpmScripts(_options),
+        addNpmScripts(_options, cliVersion),
         updateStyles(_options, workspace),
         generateTailwindConfig(_options, requireTailwindPlugins),
         install(),
@@ -74,7 +78,7 @@ export function ngAdd(_options: Schema): Rule {
       return chain([
         addDependenciesBeforeTailwindSupport(_options),
         addTailwindPlugins(tailwindPluginDependencies),
-        addNpmScripts(_options),
+        addNpmScripts(_options, cliVersion),
         updateStyles(_options, workspace),
         generateTailwindAndWebpackConfig(_options, requireTailwindPlugins),
         updateAngularJSON(_options, workspace),
@@ -310,7 +314,7 @@ function updateAngularJSON(
   };
 }
 
-function addNpmScripts(_options: Schema): Rule {
+function addNpmScripts(_options: Schema, cliVersion: number): Rule {
   return (tree: Tree) => {
     const pkgPath = 'package.json';
     const buffer = tree.read(pkgPath);
@@ -320,12 +324,17 @@ function addNpmScripts(_options: Schema): Rule {
     }
 
     const pkg = JSON.parse(buffer.toString());
+    let prodFlag = '--prod';
+    if (cliVersion >= 12) {
+      prodFlag = '--configuration production';
+    }
 
     if (_options.disableCrossPlatform) {
-      pkg.scripts['build:prod'] = 'NODE_ENV=production ng build --prod';
+      pkg.scripts['build:prod'] = `NODE_ENV=production ng build ${prodFlag}`;
     } else {
-      pkg.scripts['build:prod'] =
-        'cross-env NODE_ENV=production ng build --prod';
+      pkg.scripts[
+        'build:prod'
+      ] = `cross-env NODE_ENV=production ng build ${prodFlag}`;
     }
 
     tree.overwrite(pkgPath, JSON.stringify(pkg, null, 2));

diff --git a/src/ng-add/schema.json b/src/ng-add/schema.json
@@ -10,11 +10,6 @@
       "description": "The autoprefixer version to be installed.",
       "default": "^10.2.5"
     },
-    "angularCliWithTailwindSupport": {
-      "description": "Angular CLI Version above 11.2 with Tailwind CSS support.",
-      "type": "boolean",
-      "x-prompt": "Are you using Angular CLI in version 11.2 or above?"
-    },
     "crossEnvVersion": {
       "type": "string",
       "description": "The cross-env version to be installed.",

diff --git a/src/ng-add/schema.ts b/src/ng-add/schema.ts
@@ -1,9 +1,4 @@
 export interface Schema {
-  /**
-   * Angular CLI Version above 11.2 with Tailwind CSS support.
-   */
-  angularCliWithTailwindSupport: boolean;
-
   /**
    * Autoprefixer version.
    */

diff --git a/src/util/has-tailwind-support.ts b/src/util/has-tailwind-support.ts
@@ -0,0 +1,6 @@
+import { Tree } from '@angular-devkit/schematics';
+import { getCliVersion } from './ng-cli-version';
+
+export function hasTailwindSupport(tree: Tree): boolean {
+  return Number(getCliVersion(tree, false)) >= 11.2;
+}
diff --git a/src/util/ng-cli-version.ts b/src/util/ng-cli-version.ts
@@ -0,0 +1,29 @@
+import { SchematicsException, Tree } from '@angular-devkit/schematics';
+
+export function getCliVersion(tree: Tree, withPatch = false): string {
+  try {
+    const cliPackageJsonBuffer = tree.read(
+      './node_modules/@angular/cli/package.json',
+    );
+
+    if (cliPackageJsonBuffer == null) {
+      return '';
+    }
+
+    const packageJson = JSON.parse(cliPackageJsonBuffer.toString());
+    const currentCliVersion = packageJson['version'] as string;
+    if (withPatch) {
+      return currentCliVersion;
+    } else {
+      return currentCliVersion.substring(0, currentCliVersion.lastIndexOf('.'));
+    }
+  } catch (e) {
+    throw new SchematicsException(
+      'Could not identify @angular/cli version. Make sure you have @angular/cli installed.',
+    );
+  }
+}
+
+export function getCliVersionAsNumber(tree: Tree): number {
+  return Number(getCliVersion(tree, false));
+}