From d904226c52b68e8fbc2b375c545f231d8c391812 Mon Sep 17 00:00:00 2001 From: Marc Stammerjohann <8985933+marcjulian@users.noreply.github.com> Date: Sat, 15 May 2021 17:36:20 +0200 Subject: [PATCH] feat(cli): check @angular/cli version * install tailwind deps based on cli version * change prod flag for cli above 12 --- README.md | 1 - src/ng-add/index.ts | 23 ++++++++++++++++------- src/ng-add/schema.json | 5 ----- src/ng-add/schema.ts | 5 ----- src/util/has-tailwind-support.ts | 6 ++++++ src/util/ng-cli-version.ts | 29 +++++++++++++++++++++++++++++ 6 files changed, 51 insertions(+), 18 deletions(-) create mode 100644 src/util/has-tailwind-support.ts create mode 100644 src/util/ng-cli-version.ts diff --git a/README.md b/README.md index 89944f3..e1e3489 100644 --- 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 index c0d6a51..654a6c4 100755 --- 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 index 5deadf8..903077f 100755 --- 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 index 6f6949b..524ca32 100644 --- 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 new file mode 100644 index 0000000..6a9028b --- /dev/null +++ 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 new file mode 100644 index 0000000..941a6c0 --- /dev/null +++ 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)); +}