refactor(@angular-devkit/build-angular): remove deprecated browser bu…

…ild 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.
angular · Oct 20, 2020 · 981b4bb · 981b4bb
1 parent 3d0b6be
commit 981b4bb
Show file tree

Hide file tree

Showing 6 changed files with 2 additions and 150 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<string, string>) => {
     // 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);
     }