feat(angular): add styles and stylePreprocessorOptions to add dedicated styles config

Allow the angular project to set styles config without using `browserTarget` in order to rely on another builder's config.

Very useful in the case of a library where you don't have an application but you want to configure styles in storybook like an app

app/angular/src/builders/build-storybook/index.ts

@@ -12,7 +12,11 @@ import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone';
-import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
+import {
+  BrowserBuilderOptions,
+  ExtraEntryPoint,
+  StylePreprocessorOptions,
+} from '@angular-devkit/build-angular';
 import { runCompodoc } from '../utils/run-compodoc';
 import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
 
@@ -21,6 +25,8 @@ export type StorybookBuilderOptions = JsonObject & {
   tsConfig?: string;
   compodoc: boolean;
   compodocArgs: string[];
+  styles?: ExtraEntryPoint[];
+  stylePreprocessorOptions?: StylePreprocessorOptions;
 } & Pick<
     // makes sure the option exists
     CLIOptions,
@@ -46,12 +52,29 @@ function commandBuilder(
       return runCompodoc$.pipe(mapTo({ tsConfig }));
     }),
     map(({ tsConfig }) => {
-      const { browserTarget, ...otherOptions } = options;
+      const {
+        browserTarget,
+        stylePreprocessorOptions,
+        styles,
+        configDir,
+        docs,
+        loglevel,
+        outputDir,
+        quiet,
+      } = options;
 
       const standaloneOptions: StandaloneOptions = {
-        ...otherOptions,
+        configDir,
+        docs,
+        loglevel,
+        outputDir,
+        quiet,
         angularBrowserTarget: browserTarget,
         angularBuilderContext: context,
+        angularBuilderOptions: {
+          stylePreprocessorOptions,
+          styles,
+        },
         tsConfig,
       };
       return standaloneOptions;

app/angular/src/builders/build-storybook/schema.json

@@ -51,7 +51,60 @@
       "items": {
         "type": "string"
       }
+    },
+    "styles": {
+      "type": "array",
+      "description": "Global styles to be included in the build.",
+      "items": {
+        "$ref": "#/definitions/extraEntryPoint"
+      }
+    },
+    "stylePreprocessorOptions": {
+      "description": "Options to pass to style preprocessors.",
+      "type": "object",
+      "properties": {
+        "includePaths": {
+          "description": "Paths to include. Paths will be resolved to workspace root.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "default": []
+        }
+      },
+      "additionalProperties": false
     }
   },
-  "additionalProperties": false
+  "additionalProperties": false,
+  "definitions": {
+    "extraEntryPoint": {
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "input": {
+              "type": "string",
+              "description": "The file to include."
+            },
+            "bundleName": {
+              "type": "string",
+              "pattern": "^[\\w\\-.]*$",
+              "description": "The bundle name for this extra entry point."
+            },
+            "inject": {
+              "type": "boolean",
+              "description": "If the bundle will be referenced in the HTML file.",
+              "default": true
+            }
+          },
+          "additionalProperties": false,
+          "required": ["input"]
+        },
+        {
+          "type": "string",
+          "description": "The file to include."
+        }
+      ]
+    }
+  }
 }

app/angular/src/builders/start-storybook/index.ts

@@ -6,7 +6,11 @@ import {
   Target,
 } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
-import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
+import {
+  BrowserBuilderOptions,
+  ExtraEntryPoint,
+  StylePreprocessorOptions,
+} from '@angular-devkit/build-angular';
 import { from, Observable, of } from 'rxjs';
 import { CLIOptions } from '@storybook/core-common';
 import { map, switchMap, mapTo } from 'rxjs/operators';
@@ -21,6 +25,8 @@ export type StorybookBuilderOptions = JsonObject & {
   tsConfig?: string;
   compodoc: boolean;
   compodocArgs: string[];
+  styles?: ExtraEntryPoint[];
+  stylePreprocessorOptions?: StylePreprocessorOptions;
 } & Pick<
     // makes sure the option exists
     CLIOptions,
@@ -56,12 +62,41 @@ function commandBuilder(
       return runCompodoc$.pipe(mapTo({ tsConfig }));
     }),
     map(({ tsConfig }) => {
-      const { browserTarget, ...otherOptions } = options;
+      const {
+        browserTarget,
+        stylePreprocessorOptions,
+        styles,
+        ci,
+        configDir,
+        docs,
+        host,
+        https,
+        port,
+        quiet,
+        smokeTest,
+        sslCa,
+        sslCert,
+        sslKey,
+      } = options;
 
       const standaloneOptions: StandaloneOptions = {
-        ...otherOptions,
+        ci,
+        configDir,
+        docs,
+        host,
+        https,
+        port,
+        quiet,
+        smokeTest,
+        sslCa,
+        sslCert,
+        sslKey,
         angularBrowserTarget: browserTarget,
         angularBuilderContext: context,
+        angularBuilderOptions: {
+          stylePreprocessorOptions,
+          styles,
+        },
         tsConfig,
       };
 

app/angular/src/builders/start-storybook/schema.json

@@ -78,7 +78,60 @@
       "items": {
         "type": "string"
       }
+    },
+    "styles": {
+      "type": "array",
+      "description": "Global styles to be included in the build.",
+      "items": {
+        "$ref": "#/definitions/extraEntryPoint"
+      }
+    },
+    "stylePreprocessorOptions": {
+      "description": "Options to pass to style preprocessors.",
+      "type": "object",
+      "properties": {
+        "includePaths": {
+          "description": "Paths to include. Paths will be resolved to workspace root.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "default": []
+        }
+      },
+      "additionalProperties": false
     }
   },
-  "additionalProperties": false
+  "additionalProperties": false,
+  "definitions": {
+    "extraEntryPoint": {
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "input": {
+              "type": "string",
+              "description": "The file to include."
+            },
+            "bundleName": {
+              "type": "string",
+              "pattern": "^[\\w\\-.]*$",
+              "description": "The bundle name for this extra entry point."
+            },
+            "inject": {
+              "type": "boolean",
+              "description": "If the bundle will be referenced in the HTML file.",
+              "default": true
+            }
+          },
+          "additionalProperties": false,
+          "required": ["input"]
+        },
+        {
+          "type": "string",
+          "description": "The file to include."
+        }
+      ]
+    }
+  }
 }

app/angular/src/server/framework-preset-angular-cli.ts

@@ -115,10 +115,9 @@ async function getBuilderOptions(
    */
   const builderOptions = {
     ...browserTargetOptions,
-    ...options.angularBuilderOptions,
+    ...(options.angularBuilderOptions as JsonObject),
     tsConfig:
       options.tsConfig ??
-      options.angularBuilderOptions?.tsConfig ??
       browserTargetOptions.tsConfig ??
       findUpSync('tsconfig.json', { cwd: options.configDir }),
   };

app/angular/src/server/options.ts

@@ -2,13 +2,17 @@ import { sync } from 'read-pkg-up';
 import { LoadOptions, Options as CoreOptions } from '@storybook/core-common';
 
 import { BuilderContext } from '@angular-devkit/architect';
-import { JsonObject } from '@angular-devkit/core';
+import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { JsonValue } from '@angular-devkit/core';
 
 export type PresetOptions = CoreOptions & {
   /* Allow to get the options of a targeted "browser builder"  */
   angularBrowserTarget?: string | null;
   /* Defined set of options. These will take over priority from angularBrowserTarget options  */
-  angularBuilderOptions?: JsonObject | null;
+  angularBuilderOptions?: {
+    styles?: ExtraEntryPoint[];
+    stylePreprocessorOptions?: StylePreprocessorOptions;
+  };
   /* Angular context from builder */
   angularBuilderContext?: BuilderContext | null;
   tsConfig?: string;

app/angular/standalone.d.ts

@@ -1,6 +1,7 @@
 import { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common';
 import { BuilderContext } from '@angular-devkit/architect';
-import { JsonObject } from '@angular-devkit/core';
+import { JsonValue } from '@angular-devkit/core';
+import { JsonSchema } from '@angular-devkit/core/src/json/schema';
 
 export type StandaloneOptions = Partial<
   CLIOptions &
@@ -8,7 +9,10 @@ export type StandaloneOptions = Partial<
     BuilderOptions & {
       mode?: 'static' | 'dev';
       angularBrowserTarget?: string | null;
-      angularBuilderOptions?: JsonObject;
+      angularBuilderOptions?: JsonObject & {
+        styles?: ExtraEntryPoint[];
+        stylePreprocessorOptions?: StylePreprocessorOptions;
+      };
       angularBuilderContext?: BuilderContext | null;
       tsConfig?: string;
     }