From d5c0bad621f470744d99627be624f434395e9328 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?= Date: Wed, 11 Jan 2023 10:42:02 +0100 Subject: [PATCH] feat(angular): add backwards compat support for package and ng-packagr-lite executors --- .../styles/stylesheet-processor.ts | 32 ++++++++++++++++++- .../styles/stylesheet-processor.ts | 32 ++++++++++++++++++- .../utilities/angular-version-utils.ts | 16 ++++++++++ .../src/generators/add-linting/add-linting.ts | 4 +-- .../src/generators/application/application.ts | 4 +-- packages/angular/src/generators/init/init.ts | 4 +-- .../angular/src/generators/karma/karma.ts | 4 +-- .../angular/src/generators/library/library.ts | 9 ++---- .../utils/angular-version-utils.spec.ts} | 12 +++---- .../utils/angular-version-utils.ts} | 21 ++++++------ .../src/generators/utils/create-ts-config.ts | 8 ++--- 11 files changed, 111 insertions(+), 35 deletions(-) create mode 100644 packages/angular/src/executors/utilities/angular-version-utils.ts rename packages/angular/src/{utils/user-installed-angular-versions.spec.ts => generators/utils/angular-version-utils.spec.ts} (87%) rename packages/angular/src/{utils/user-installed-angular-versions.ts => generators/utils/angular-version-utils.ts} (62%) diff --git a/packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/styles/stylesheet-processor.ts b/packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/styles/stylesheet-processor.ts index 47714ea4936cb..89460d8fcca6d 100644 --- a/packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/styles/stylesheet-processor.ts +++ b/packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/styles/stylesheet-processor.ts @@ -20,13 +20,14 @@ import * as log from 'ng-packagr/lib/utils/log'; import { dirname, extname, join } from 'path'; import * as postcssPresetEnv from 'postcss-preset-env'; import * as postcssUrl from 'postcss-url'; +import { pathToFileURL } from 'url'; +import { getInstalledAngularVersionInfo } from '../../../utilities/angular-version-utils'; import { getTailwindPostCssPlugins, getTailwindSetup, tailwindDirectives, TailwindSetup, } from '../../../utilities/tailwindcss'; -import { pathToFileURL } from 'url'; const postcss = require('postcss'); @@ -250,6 +251,19 @@ export class StylesheetProcessor { switch (ext) { case '.sass': case '.scss': { + const angularVersion = getInstalledAngularVersionInfo(); + if (angularVersion && angularVersion.major < 15) { + return (await import('sass')) + .renderSync({ + file: filePath, + data: css, + indentedSyntax: '.sass' === ext, + importer: customSassImporter, + includePaths: this.styleIncludePaths, + }) + .css.toString(); + } + return (await import('sass')) .compileString(css, { url: pathToFileURL(filePath), @@ -318,3 +332,19 @@ function transformSupportedBrowsersToTargets( return transformed.length ? transformed : undefined; } + +function customSassImporter( + url: string, + prev: string +): { file: string; prev: string } | undefined { + // NB: Sass importer should always be sync as otherwise it will cause + // sass to go in the async path which is slower. + if (url[0] !== '~') { + return undefined; + } + + return { + file: url.slice(1), + prev, + }; +} diff --git a/packages/angular/src/executors/package/ng-packagr-adjustments/styles/stylesheet-processor.ts b/packages/angular/src/executors/package/ng-packagr-adjustments/styles/stylesheet-processor.ts index 6b0f5699f2a91..b6cf531e6fbb5 100644 --- a/packages/angular/src/executors/package/ng-packagr-adjustments/styles/stylesheet-processor.ts +++ b/packages/angular/src/executors/package/ng-packagr-adjustments/styles/stylesheet-processor.ts @@ -20,13 +20,14 @@ import * as log from 'ng-packagr/lib/utils/log'; import { dirname, extname, join } from 'path'; import * as postcssPresetEnv from 'postcss-preset-env'; import * as postcssUrl from 'postcss-url'; +import { pathToFileURL } from 'url'; +import { getInstalledAngularVersionInfo } from '../../../utilities/angular-version-utils'; import { getTailwindPostCssPlugins, getTailwindSetup, tailwindDirectives, TailwindSetup, } from '../../../utilities/tailwindcss'; -import { pathToFileURL } from 'url'; const postcss = require('postcss'); @@ -243,6 +244,19 @@ export class StylesheetProcessor { switch (ext) { case '.sass': case '.scss': { + const angularVersion = getInstalledAngularVersionInfo(); + if (angularVersion && angularVersion.major < 15) { + return (await import('sass')) + .renderSync({ + file: filePath, + data: css, + indentedSyntax: '.sass' === ext, + importer: customSassImporter, + includePaths: this.styleIncludePaths, + }) + .css.toString(); + } + return (await import('sass')) .compileString(css, { url: pathToFileURL(filePath), @@ -311,3 +325,19 @@ function transformSupportedBrowsersToTargets( return transformed.length ? transformed : undefined; } + +function customSassImporter( + url: string, + prev: string +): { file: string; prev: string } | undefined { + // NB: Sass importer should always be sync as otherwise it will cause + // sass to go in the async path which is slower. + if (url[0] !== '~') { + return undefined; + } + + return { + file: url.slice(1), + prev, + }; +} diff --git a/packages/angular/src/executors/utilities/angular-version-utils.ts b/packages/angular/src/executors/utilities/angular-version-utils.ts new file mode 100644 index 0000000000000..13b4a51a7cb51 --- /dev/null +++ b/packages/angular/src/executors/utilities/angular-version-utils.ts @@ -0,0 +1,16 @@ +import { readModulePackageJson } from 'nx/src/utils/package-json'; +import { major } from 'semver'; + +type AngularVersionInfo = { major: number; version: string }; + +export function getInstalledAngularVersionInfo(): AngularVersionInfo | null { + try { + const { + packageJson: { version }, + } = readModulePackageJson('@angular/core'); + + return { major: major(version), version }; + } catch { + return null; + } +} diff --git a/packages/angular/src/generators/add-linting/add-linting.ts b/packages/angular/src/generators/add-linting/add-linting.ts index 799a73cfe5414..a398e8a1c9ff5 100755 --- a/packages/angular/src/generators/add-linting/add-linting.ts +++ b/packages/angular/src/generators/add-linting/add-linting.ts @@ -7,11 +7,11 @@ import { import { Linter, lintProjectGenerator } from '@nrwl/linter'; import { mapLintPattern } from '@nrwl/linter/src/generators/lint-project/lint-project'; import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial'; +import { join } from 'path'; +import { getGeneratorDirectoryForInstalledAngularVersion } from '../utils/angular-version-utils'; import { addAngularEsLintDependencies } from './lib/add-angular-eslint-dependencies'; import { extendAngularEslintJson } from './lib/create-eslint-configuration'; import type { AddLintingGeneratorSchema } from './schema'; -import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions'; -import { join } from 'path'; export async function addLintingGenerator( tree: Tree, diff --git a/packages/angular/src/generators/application/application.ts b/packages/angular/src/generators/application/application.ts index df3fa53478dc2..bf2c035770664 100644 --- a/packages/angular/src/generators/application/application.ts +++ b/packages/angular/src/generators/application/application.ts @@ -8,9 +8,11 @@ import { } from '@nrwl/devkit'; import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter'; import { convertToNxProjectGenerator } from '@nrwl/workspace/generators'; +import { join } from 'path'; import { UnitTestRunner } from '../../utils/test-runners'; import { angularInitGenerator } from '../init/init'; import { setupTailwindGenerator } from '../setup-tailwind/setup-tailwind'; +import { getGeneratorDirectoryForInstalledAngularVersion } from '../utils/angular-version-utils'; import { addE2e, addLinting, @@ -29,8 +31,6 @@ import { updateNxComponentTemplate, } from './lib'; import type { Schema } from './schema'; -import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions'; -import { join } from 'path'; export async function applicationGenerator( tree: Tree, diff --git a/packages/angular/src/generators/init/init.ts b/packages/angular/src/generators/init/init.ts index 3cb471d69a675..929a7f326d900 100755 --- a/packages/angular/src/generators/init/init.ts +++ b/packages/angular/src/generators/init/init.ts @@ -11,6 +11,7 @@ import { import { jestInitGenerator } from '@nrwl/jest'; import { Linter } from '@nrwl/linter'; import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial'; +import { join } from 'path'; import { E2eTestRunner, UnitTestRunner } from '../../utils/test-runners'; import { angularDevkitVersion, @@ -27,9 +28,8 @@ import { zoneJsVersion, } from '../../utils/versions'; import { karmaGenerator } from '../karma/karma'; +import { getGeneratorDirectoryForInstalledAngularVersion } from '../utils/angular-version-utils'; import { Schema } from './schema'; -import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions'; -import { join } from 'path'; export async function angularInitGenerator( tree: Tree, diff --git a/packages/angular/src/generators/karma/karma.ts b/packages/angular/src/generators/karma/karma.ts index 2799a5f33d1f5..372644fd2e5a0 100644 --- a/packages/angular/src/generators/karma/karma.ts +++ b/packages/angular/src/generators/karma/karma.ts @@ -7,6 +7,7 @@ import { readNxJson, updateNxJson, } from '@nrwl/devkit'; +import { join } from 'path'; import { jasmineCoreVersion, jasmineSpecReporterVersion, @@ -18,9 +19,8 @@ import { typesJasmineVersion, typesNodeVersion, } from '../../utils/versions'; +import { getGeneratorDirectoryForInstalledAngularVersion } from '../utils/angular-version-utils'; import { GeneratorOptions } from './schema'; -import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions'; -import { join } from 'path'; function addTestInputs(tree: Tree) { const nxJson = readNxJson(tree); diff --git a/packages/angular/src/generators/library/library.ts b/packages/angular/src/generators/library/library.ts index 06e705f8e5cd8..2e2f354b42cb6 100644 --- a/packages/angular/src/generators/library/library.ts +++ b/packages/angular/src/generators/library/library.ts @@ -33,7 +33,7 @@ import { updateProject } from './lib/update-project'; import { updateTsConfig } from './lib/update-tsconfig'; import { addStandaloneComponent } from './lib/add-standalone-component'; import { Schema } from './schema'; -import { getUserInstalledAngularVersionInfo } from '../../utils/user-installed-angular-versions'; +import { getInstalledAngularVersionInfo } from '../utils/angular-version-utils'; import { coerce, lt, major } from 'semver'; export async function libraryGenerator(tree: Tree, schema: Schema) { @@ -54,11 +54,8 @@ export async function libraryGenerator(tree: Tree, schema: Schema) { ); } - const userInstalledAngularVersion = getUserInstalledAngularVersionInfo(tree); - if ( - lt(userInstalledAngularVersion.cleanedVersion, '14.1.0') && - schema.standalone - ) { + const userInstalledAngularVersion = getInstalledAngularVersionInfo(tree); + if (lt(userInstalledAngularVersion.version, '14.1.0') && schema.standalone) { throw new Error( `The "--standalone" option is not supported in Angular versions < 14.1.0.` ); diff --git a/packages/angular/src/utils/user-installed-angular-versions.spec.ts b/packages/angular/src/generators/utils/angular-version-utils.spec.ts similarity index 87% rename from packages/angular/src/utils/user-installed-angular-versions.spec.ts rename to packages/angular/src/generators/utils/angular-version-utils.spec.ts index 97f4414bece21..5b7ae523ca4b5 100644 --- a/packages/angular/src/utils/user-installed-angular-versions.spec.ts +++ b/packages/angular/src/generators/utils/angular-version-utils.spec.ts @@ -2,11 +2,11 @@ import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; import { updateJson } from '@nrwl/devkit'; import { getGeneratorDirectoryForInstalledAngularVersion, - getUserInstalledAngularMajorVersion, - getUserInstalledAngularVersion, -} from './user-installed-angular-versions'; + getInstalledAngularMajorVersion, + getInstalledAngularVersion, +} from './angular-version-utils'; -describe('userInstalledAngularVersions', () => { +describe('angularVersionUtils', () => { test.each(['14.0.0', '~14.1.0', '^14.2.0', '~14.3.0-beta.0'])( 'should return correct directory name for v14', (ngVersion) => { @@ -41,7 +41,7 @@ describe('userInstalledAngularVersions', () => { })); // ACT - const angularVersion = getUserInstalledAngularMajorVersion(tree); + const angularVersion = getInstalledAngularMajorVersion(tree); // ASSERT expect(angularVersion).toBe(14); @@ -64,7 +64,7 @@ describe('userInstalledAngularVersions', () => { })); // ACT - const angularVersion = getUserInstalledAngularVersion(tree); + const angularVersion = getInstalledAngularVersion(tree); // ASSERT expect(angularVersion).toEqual(expectedVersion); diff --git a/packages/angular/src/utils/user-installed-angular-versions.ts b/packages/angular/src/generators/utils/angular-version-utils.ts similarity index 62% rename from packages/angular/src/utils/user-installed-angular-versions.ts rename to packages/angular/src/generators/utils/angular-version-utils.ts index 8a282f6502009..63e564b4d235b 100644 --- a/packages/angular/src/utils/user-installed-angular-versions.ts +++ b/packages/angular/src/generators/utils/angular-version-utils.ts @@ -1,10 +1,12 @@ import type { Tree } from '@nrwl/devkit'; import { readJson } from '@nrwl/devkit'; import { clean, coerce, major } from 'semver'; -import { angularVersion } from './versions'; +import { angularVersion } from '../../utils/versions'; -export function getGeneratorDirectoryForInstalledAngularVersion(tree: Tree) { - const majorAngularVersion = getUserInstalledAngularMajorVersion(tree); +export function getGeneratorDirectoryForInstalledAngularVersion( + tree: Tree +): string | null { + const majorAngularVersion = getInstalledAngularMajorVersion(tree); const directoryDictionary = { 14: 'angular-v14', @@ -13,7 +15,7 @@ export function getGeneratorDirectoryForInstalledAngularVersion(tree: Tree) { return directoryDictionary[majorAngularVersion] ?? null; } -export function getUserInstalledAngularVersion(tree: Tree) { +export function getInstalledAngularVersion(tree: Tree): string { const pkgJson = readJson(tree, 'package.json'); const installedAngularVersion = pkgJson.dependencies && pkgJson.dependencies['@angular/core']; @@ -31,14 +33,15 @@ export function getUserInstalledAngularVersion(tree: Tree) { ); } -export function getUserInstalledAngularMajorVersion(tree: Tree): number { - return major(getUserInstalledAngularVersion(tree)); +export function getInstalledAngularMajorVersion(tree: Tree): number { + return major(getInstalledAngularVersion(tree)); } -export function getUserInstalledAngularVersionInfo(tree: Tree) { - const installedVersion = getUserInstalledAngularVersion(tree); +export function getInstalledAngularVersionInfo(tree: Tree) { + const installedVersion = getInstalledAngularVersion(tree); + return { - cleanedVersion: installedVersion, + version: installedVersion, major: major(installedVersion), }; } diff --git a/packages/angular/src/generators/utils/create-ts-config.ts b/packages/angular/src/generators/utils/create-ts-config.ts index 4334bf0ad72d6..5beb2a4eeb08f 100644 --- a/packages/angular/src/generators/utils/create-ts-config.ts +++ b/packages/angular/src/generators/utils/create-ts-config.ts @@ -1,7 +1,7 @@ -import { Tree } from 'nx/src/generators/tree'; +import type { Tree } from '@nrwl/devkit'; +import { writeJson } from '@nrwl/devkit'; import { tsConfigBaseOptions } from '@nrwl/workspace/src/utils/create-ts-config'; -import { writeJson } from 'nx/src/generators/utils/json'; -import { getUserInstalledAngularMajorVersion } from '../../utils/user-installed-angular-versions'; +import { getInstalledAngularMajorVersion } from './angular-version-utils'; export { extractTsConfigBase } from '@nrwl/workspace/src/utils/create-ts-config'; @@ -17,7 +17,7 @@ export function createTsConfig( }, relativePathToRootTsConfig: string ) { - let majorAngularVersion = getUserInstalledAngularMajorVersion(host); + const majorAngularVersion = getInstalledAngularMajorVersion(host); const json = { compilerOptions: {