refactor(@ngtools/webpack): remove deprecated inlineStyleMimeType option

BREAKING CHANGE: Deprecated `inlineStyleMimeType` option has been removed from `AngularWebpackPluginOptions`. Use `inlineStyleFileExtension` instead.

Author: alan-agius4

goldens/public-api/ngtools/webpack/src/index.md

@@ -38,8 +38,6 @@ export interface AngularWebpackPluginOptions {
     fileReplacements: Record<string, string>;
     // (undocumented)
     inlineStyleFileExtension?: string;
-    // @deprecated (undocumented)
-    inlineStyleMimeType?: string;
     // (undocumented)
     jitMode: boolean;
     // (undocumented)

packages/ngtools/webpack/src/ivy/host.ts

@@ -20,7 +20,6 @@ export function augmentHostWithResources(
   resourceLoader: WebpackResourceLoader,
   options: {
     directTemplateLoading?: boolean;
-    inlineStyleMimeType?: string;
     inlineStyleFileExtension?: string;
   } = {},
 ) {
@@ -60,10 +59,9 @@ export function augmentHostWithResources(
       return null;
     }
 
-    if (options.inlineStyleMimeType || options.inlineStyleFileExtension) {
+    if (options.inlineStyleFileExtension) {
       const content = await resourceLoader.process(
         data,
-        options.inlineStyleMimeType,
         options.inlineStyleFileExtension,
         context.type,
         context.containingFile,

packages/ngtools/webpack/src/ivy/plugin.ts

@@ -51,8 +51,6 @@ export interface AngularWebpackPluginOptions {
   emitClassMetadata: boolean;
   emitNgModuleScope: boolean;
   jitMode: boolean;
-  /** @deprecated use `inlineStyleFileExtension` instead. */
-  inlineStyleMimeType?: string;
   inlineStyleFileExtension?: string;
 }
 
@@ -237,7 +235,6 @@ export class AngularWebpackPlugin {
       resourceLoader.update(compilation, changedFiles);
       augmentHostWithResources(host, resourceLoader, {
         directTemplateLoading: this.pluginOptions.directTemplateLoading,
-        inlineStyleMimeType: this.pluginOptions.inlineStyleMimeType,
         inlineStyleFileExtension: this.pluginOptions.inlineStyleFileExtension,
       });
 

packages/ngtools/webpack/src/ivy/transformation.ts

@@ -38,7 +38,6 @@ export function createJitTransformers(
   builder: ts.BuilderProgram,
   options: {
     directTemplateLoading?: boolean;
-    inlineStyleMimeType?: string;
     inlineStyleFileExtension?: string;
   },
 ): ts.CustomTransformers {
@@ -50,7 +49,6 @@ export function createJitTransformers(
         () => true,
         getTypeChecker,
         options.directTemplateLoading,
-        options.inlineStyleMimeType,
         options.inlineStyleFileExtension,
       ),
       constructorParametersDownlevelTransform(builder.getProgram()),

packages/ngtools/webpack/src/resource_loader.ts

@@ -102,7 +102,6 @@ export class WebpackResourceLoader {
   private async _compile(
     filePath?: string,
     data?: string,
-    mimeType?: string,
     fileExtension?: string,
     resourceType?: 'style' | 'template',
     containingFile?: string,
@@ -169,10 +168,6 @@ export class WebpackResourceLoader {
                 resourceData.resource = filePath;
               }
 
-              if (mimeType) {
-                resourceData.data.mimetype = mimeType;
-              }
-
               return true;
             });
           NormalModule.getCompilationHooks(compilation)
@@ -334,7 +329,6 @@ export class WebpackResourceLoader {
 
   async process(
     data: string,
-    mimeType: string | undefined,
     fileExtension: string | undefined,
     resourceType: 'template' | 'style',
     containingFile?: string,
@@ -346,7 +340,6 @@ export class WebpackResourceLoader {
     const compilationResult = await this._compile(
       undefined,
       data,
-      mimeType,
       fileExtension,
       resourceType,
       containingFile,

packages/ngtools/webpack/src/transformers/replace_resources.ts

@@ -14,13 +14,8 @@ export function replaceResources(
   shouldTransform: (fileName: string) => boolean,
   getTypeChecker: () => ts.TypeChecker,
   directTemplateLoading = false,
-  inlineStyleMimeType?: string,
   inlineStyleFileExtension?: string,
 ): ts.TransformerFactory<ts.SourceFile> {
-  if (inlineStyleMimeType && !/^text\/[-.\w]+$/.test(inlineStyleMimeType)) {
-    throw new Error('Invalid inline style MIME type.');
-  }
-
   return (context: ts.TransformationContext) => {
     const typeChecker = getTypeChecker();
     const resourceImportDeclarations: ts.ImportDeclaration[] = [];
@@ -38,7 +33,6 @@ export function replaceResources(
                 directTemplateLoading,
                 resourceImportDeclarations,
                 moduleKind,
-                inlineStyleMimeType,
                 inlineStyleFileExtension,
               )
             : node,
@@ -90,7 +84,6 @@ function visitDecorator(
   directTemplateLoading: boolean,
   resourceImportDeclarations: ts.ImportDeclaration[],
   moduleKind?: ts.ModuleKind,
-  inlineStyleMimeType?: string,
   inlineStyleFileExtension?: string,
 ): ts.Decorator {
   if (!isComponentDecorator(node, typeChecker)) {
@@ -121,7 +114,6 @@ function visitDecorator(
           directTemplateLoading,
           resourceImportDeclarations,
           moduleKind,
-          inlineStyleMimeType,
           inlineStyleFileExtension,
         )
       : node,
@@ -155,7 +147,6 @@ function visitComponentMetadata(
   directTemplateLoading: boolean,
   resourceImportDeclarations: ts.ImportDeclaration[],
   moduleKind?: ts.ModuleKind,
-  inlineStyleMimeType?: string,
   inlineStyleFileExtension?: string,
 ): ts.ObjectLiteralElementLike | undefined {
   if (!ts.isPropertyAssignment(node) || ts.isComputedPropertyName(node.name)) {
@@ -205,10 +196,7 @@ function visitComponentMetadata(
 
         let url;
         if (isInlineStyle) {
-          if (inlineStyleMimeType) {
-            const data = Buffer.from(node.text).toString('base64');
-            url = `data:${inlineStyleMimeType};charset=utf-8;base64,${data}`;
-          } else if (inlineStyleFileExtension) {
+          if (inlineStyleFileExtension) {
             const data = Buffer.from(node.text).toString('base64');
             const containingFile = node.getSourceFile().fileName;
             url = `${containingFile}.${inlineStyleFileExtension}!=!${InlineAngularResourceLoaderPath}?data=${encodeURIComponent(

packages/ngtools/webpack/src/transformers/replace_resources_spec.ts

@@ -18,7 +18,6 @@ function transform(
   directTemplateLoading = true,
   importHelpers = true,
   module: ts.ModuleKind = ts.ModuleKind.ES2020,
-  inlineStyleMimeType?: string,
 ) {
   const { program, compilerHost } = createTypescriptContext(input, undefined, undefined, {
     importHelpers,
@@ -29,7 +28,6 @@ function transform(
     () => shouldTransform,
     getTypeChecker,
     directTemplateLoading,
-    inlineStyleMimeType,
   );
 
   return transformTypescript(input, [transformer], program, compilerHost);
@@ -226,50 +224,6 @@ describe('@ngtools/webpack transformers', () => {
       expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
     });
 
-    it('should create data URIs for inline styles when inlineStyleMimeType is set', () => {
-      const input = tags.stripIndent`
-        import { Component } from '@angular/core';
-
-        @Component({
-          selector: 'app-root',
-          templateUrl: './app.component.html',
-          styles: ['a { color: red }'],
-        })
-        export class AppComponent {
-          title = 'app';
-        }
-      `;
-      const output = tags.stripIndent`
-        import { __decorate } from "tslib";
-        import __NG_CLI_RESOURCE__0 from "!${DirectAngularResourceLoaderPath}!./app.component.html";
-        import __NG_CLI_RESOURCE__1 from "data:text/css;charset=utf-8;base64,YSB7IGNvbG9yOiByZWQgfQ==";
-        import { Component } from '@angular/core';
-
-        let AppComponent = class AppComponent {
-            constructor() {
-                this.title = 'app';
-            }
-        };
-        AppComponent = __decorate([
-            Component({
-                selector: 'app-root',
-                template: __NG_CLI_RESOURCE__0,
-                styles: [__NG_CLI_RESOURCE__1]
-            })
-        ], AppComponent);
-        export { AppComponent };
-      `;
-
-      const result = transform(input, true, true, true, ts.ModuleKind.ESNext, 'text/css');
-      expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
-    });
-
-    it('should throw error if inlineStyleMimeType value has invalid format', () => {
-      expect(() =>
-        transform('', true, true, true, ts.ModuleKind.ESNext, 'asdfsd;sdfsd//sdfsdf'),
-      ).toThrowError('Invalid inline style MIME type.');
-    });
-
     it('should replace resources with backticks', () => {
       const input = `
         import { Component } from '@angular/core';