From 981b4bb7e68efde48a4382a1893419d69c29ac8b Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Tue, 20 Oct 2020 09:40:43 +0200 Subject: [PATCH] refactor(@angular-devkit/build-angular): remove deprecated browser build option rebaseRootRelativeCssUrls BREAKING CHANGE: Deprecated `rebaseRootRelativeCssUrls` browser builder option has been removed without replacement. This option was used to change root relative URLs in stylesheets to include base HREF and deploy URL and was used only for compatibility and transition as this behavior is non-standard. --- packages/angular/cli/lib/config/schema.json | 6 - .../build_angular/src/browser/schema.json | 6 - .../src/browser/specs/styles_spec.ts | 114 +----------------- .../build_angular/src/utils/build-options.ts | 2 - .../src/webpack/configs/styles.ts | 1 - .../webpack/plugins/postcss-cli-resources.ts | 23 +--- 6 files changed, 2 insertions(+), 150 deletions(-) diff --git a/packages/angular/cli/lib/config/schema.json b/packages/angular/cli/lib/config/schema.json index c8e163d12103..fe0cdfea4ff6 100644 --- a/packages/angular/cli/lib/config/schema.json +++ b/packages/angular/cli/lib/config/schema.json @@ -970,12 +970,6 @@ }, "default": [] }, - "rebaseRootRelativeCssUrls": { - "description": "Change root relative URLs in stylesheets to include base HREF and deploy URL. Use only for compatibility and transition. The behavior of this option is non-standard and will be removed in the next major release.", - "type": "boolean", - "default": false, - "x-deprecated": true - }, "webWorkerTsConfig": { "type": "string", "description": "TypeScript configuration for Web Worker modules." diff --git a/packages/angular_devkit/build_angular/src/browser/schema.json b/packages/angular_devkit/build_angular/src/browser/schema.json index 628b5dcd8dd8..70d7c8302036 100644 --- a/packages/angular_devkit/build_angular/src/browser/schema.json +++ b/packages/angular_devkit/build_angular/src/browser/schema.json @@ -348,12 +348,6 @@ }, "default": [] }, - "rebaseRootRelativeCssUrls": { - "description": "Change root relative URLs in stylesheets to include base HREF and deploy URL. Use only for compatibility and transition. The behavior of this option is non-standard and will be removed in the next major release.", - "type": "boolean", - "default": false, - "x-deprecated": true - }, "webWorkerTsConfig": { "type": "string", "description": "TypeScript configuration for Web Worker modules." diff --git a/packages/angular_devkit/build_angular/src/browser/specs/styles_spec.ts b/packages/angular_devkit/build_angular/src/browser/specs/styles_spec.ts index 7da64970b00e..577ca5a55c41 100644 --- a/packages/angular_devkit/build_angular/src/browser/specs/styles_spec.ts +++ b/packages/angular_devkit/build_angular/src/browser/specs/styles_spec.ts @@ -354,7 +354,7 @@ describe('Browser Builder styles', () => { }); // TODO: consider making this a unit test in the url processing plugins. - it(`supports baseHref/deployUrl in resource urls without rebaseRootRelativeCssUrls`, async () => { + it(`supports baseHref/deployUrl in resource urls`, async () => { // Use a large image for the relative ref so it cannot be inlined. host.copyFile('src/spectrum.png', './src/assets/global-img-relative.png'); host.copyFile('src/spectrum.png', './src/assets/component-img-relative.png'); @@ -458,118 +458,6 @@ describe('Browser Builder styles', () => { expect(main).toContain(`url('/assets/component-img-absolute.svg')`); }, 90000); - it(`supports baseHref/deployUrl in resource urls with rebaseRootRelativeCssUrls`, async () => { - // Use a large image for the relative ref so it cannot be inlined. - host.copyFile('src/spectrum.png', './src/assets/global-img-relative.png'); - host.copyFile('src/spectrum.png', './src/assets/component-img-relative.png'); - host.writeMultipleFiles({ - 'src/styles.css': ` - h1 { background: url('/assets/global-img-absolute.svg'); } - h2 { background: url('./assets/global-img-relative.png'); } - `, - 'src/app/app.component.css': ` - h3 { background: url('/assets/component-img-absolute.svg'); } - h4 { background: url('../assets/component-img-relative.png'); } - `, - 'src/assets/global-img-absolute.svg': imgSvg, - 'src/assets/component-img-absolute.svg': imgSvg, - }); - - // Check base paths are correctly generated. - const overrides = { - extractCss: true, - rebaseRootRelativeCssUrls: true, - }; - let { files } = await browserBuild(architect, host, target, { - ...overrides, - aot: true, - }); - - let styles = await files['styles.css']; - let main = await files['main.js']; - expect(styles).toContain(`url('/assets/global-img-absolute.svg')`); - expect(styles).toContain(`url('global-img-relative.png')`); - expect(main).toContain(`url('/assets/component-img-absolute.svg')`); - expect(main).toContain(`url('component-img-relative.png')`); - expect(host.scopedSync().exists(normalize('dist/assets/global-img-absolute.svg'))).toBe(true); - expect(host.scopedSync().exists(normalize('dist/global-img-relative.png'))).toBe(true); - expect(host.scopedSync().exists(normalize('dist/assets/component-img-absolute.svg'))).toBe( - true, - ); - expect(host.scopedSync().exists(normalize('dist/component-img-relative.png'))).toBe(true); - - // Check urls with deploy-url scheme are used as is. - files = (await browserBuild(architect, host, target, { - ...overrides, - baseHref: '/base/', - deployUrl: 'http://deploy.url/', - })).files; - - styles = await files['styles.css']; - main = await files['main.js']; - expect(styles).toContain(`url('http://deploy.url/assets/global-img-absolute.svg')`); - expect(main).toContain(`url('http://deploy.url/assets/component-img-absolute.svg')`); - - // Check urls with base-href scheme are used as is (with deploy-url). - files = (await browserBuild(architect, host, target, { - ...overrides, - baseHref: 'http://base.url/', - deployUrl: 'deploy/', - })).files; - - styles = await files['styles.css']; - main = await files['main.js']; - expect(styles).toContain(`url('http://base.url/deploy/assets/global-img-absolute.svg')`); - expect(main).toContain(`url('http://base.url/deploy/assets/component-img-absolute.svg')`); - - // Check urls with deploy-url and base-href scheme only use deploy-url. - files = (await browserBuild(architect, host, target, { - ...overrides, - baseHref: 'http://base.url/', - deployUrl: 'http://deploy.url/', - })).files; - - styles = await files['styles.css']; - main = await files['main.js']; - expect(styles).toContain(`url('http://deploy.url/assets/global-img-absolute.svg')`); - expect(main).toContain(`url('http://deploy.url/assets/component-img-absolute.svg')`); - - // Check with schemeless base-href and deploy-url flags. - files = (await browserBuild(architect, host, target, { - ...overrides, - baseHref: '/base/', - deployUrl: 'deploy/', - })).files; - - styles = await files['styles.css']; - main = await files['main.js']; - expect(styles).toContain(`url('/base/deploy/assets/global-img-absolute.svg')`); - expect(main).toContain(`url('/base/deploy/assets/component-img-absolute.svg')`); - - // Check with identical base-href and deploy-url flags. - files = (await browserBuild(architect, host, target, { - ...overrides, - baseHref: '/base/', - deployUrl: '/base/', - })).files; - - styles = await files['styles.css']; - main = await files['main.js']; - expect(styles).toContain(`url('/base/assets/global-img-absolute.svg')`); - expect(main).toContain(`url('/base/assets/component-img-absolute.svg')`); - - // Check with only base-href flag. - files = (await browserBuild(architect, host, target, { - ...overrides, - baseHref: '/base/', - })).files; - - styles = await files['styles.css']; - main = await files['main.js']; - expect(styles).toContain(`url('/base/assets/global-img-absolute.svg')`); - expect(main).toContain(`url('/base/assets/component-img-absolute.svg')`); - }, 90000); - it(`supports bootstrap@4 with full path`, async () => { const bootstrapPath = dirname(require.resolve('bootstrap/package.json')); diff --git a/packages/angular_devkit/build_angular/src/utils/build-options.ts b/packages/angular_devkit/build_angular/src/utils/build-options.ts index 386c3a89436c..0063bf0775e4 100644 --- a/packages/angular_devkit/build_angular/src/utils/build-options.ts +++ b/packages/angular_devkit/build_angular/src/utils/build-options.ts @@ -75,8 +75,6 @@ export interface BuildOptions { lazyModules: string[]; platform?: 'browser' | 'server'; fileReplacements: NormalizedFileReplacement[]; - /** @deprecated use only for compatibility in 8.x; will be removed in 9.0 */ - rebaseRootRelativeCssUrls?: boolean; experimentalRollupPass?: boolean; allowedCommonJsDependencies?: string[]; diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts index 002c7ecb699b..835712ba23bf 100644 --- a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts +++ b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts @@ -184,7 +184,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) { deployUrl: buildOptions.deployUrl, resourcesOutputPath: buildOptions.resourcesOutputPath, loader, - rebaseRootRelative: buildOptions.rebaseRootRelativeCssUrls, filename: `[name]${hashFormat.file}.[ext]`, emitFile: buildOptions.platform !== 'server', extracted, diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts index 3fbda764a394..db6af3669628 100644 --- a/packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts +++ b/packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts @@ -57,22 +57,19 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou deployUrl = '', baseHref = '', resourcesOutputPath = '', - rebaseRootRelative = false, filename, loader, emitFile, extracted, } = options; - const dedupeSlashes = (url: string) => url.replace(/\/\/+/g, '/'); - const process = async (inputUrl: string, context: string, resourceCache: Map) => { // If root-relative, absolute or protocol relative url, leave as is if (/^((?:\w+:)?\/\/|data:|chrome:|#)/.test(inputUrl)) { return inputUrl; } - if (!rebaseRootRelative && /^\//.test(inputUrl)) { + if (/^\//.test(inputUrl)) { return inputUrl; } @@ -88,24 +85,6 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou return cachedUrl; } - if (rebaseRootRelative && inputUrl.startsWith('/')) { - let outputUrl = ''; - if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) { - // If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is. - outputUrl = `${deployUrl.replace(/\/$/, '')}${inputUrl}`; - } else if (baseHref.match(/:\/\//)) { - // If baseHref contains a scheme, include it as is. - outputUrl = baseHref.replace(/\/$/, '') + dedupeSlashes(`/${deployUrl}/${inputUrl}`); - } else { - // Join together base-href, deploy-url and the original URL. - outputUrl = dedupeSlashes(`/${baseHref}/${deployUrl}/${inputUrl}`); - } - - resourceCache.set(cacheKey, outputUrl); - - return outputUrl; - } - if (inputUrl.startsWith('~')) { inputUrl = inputUrl.substr(1); }