Angular: Add styles and stylePreprocessorOptions to angular builder

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

@@ -5,6 +5,7 @@ import * as path from 'path';
 
 const buildStandaloneMock = jest.fn();
 jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock);
+jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));
 
 const cpSpawnMock = {
   spawn: jest.fn(),
@@ -75,15 +76,13 @@ describe('Build Storybook Builder', () => {
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
       angularBuilderContext: expect.any(Object),
+      angularBuilderOptions: {},
       configDir: '.storybook',
-      docsMode: false,
       loglevel: undefined,
       quiet: false,
       outputDir: 'storybook-static',
       mode: 'static',
-      compodoc: false,
-      compodocArgs: ['-e', 'json'],
-      tsConfig: 'src/tsconfig.app.json',
+      tsConfig: './storybook/tsconfig.ts',
     });
   });
 
@@ -102,14 +101,12 @@ describe('Build Storybook Builder', () => {
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: null,
       angularBuilderContext: expect.any(Object),
+      angularBuilderOptions: {},
       configDir: '.storybook',
-      docsMode: false,
       loglevel: undefined,
       quiet: false,
       outputDir: 'storybook-static',
       mode: 'static',
-      compodoc: false,
-      compodocArgs: ['-e', 'json'],
       tsConfig: 'path/to/tsConfig.json',
     });
   });
@@ -147,7 +144,7 @@ describe('Build Storybook Builder', () => {
     expect(output.success).toBeTruthy();
     expect(cpSpawnMock.spawn).toHaveBeenCalledWith('compodoc', [
       '-p',
-      'src/tsconfig.app.json',
+      './storybook/tsconfig.ts',
       '-d',
       '',
       '-e',
@@ -156,15 +153,39 @@ describe('Build Storybook Builder', () => {
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
       angularBuilderContext: expect.any(Object),
+      angularBuilderOptions: {},
       configDir: '.storybook',
-      docsMode: false,
       loglevel: undefined,
       quiet: false,
       outputDir: 'storybook-static',
       mode: 'static',
-      compodoc: true,
-      compodocArgs: ['-e', 'json'],
-      tsConfig: 'src/tsconfig.app.json',
+      tsConfig: './storybook/tsconfig.ts',
+    });
+  });
+
+  it('should start storybook with styles options', async () => {
+    const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
+      tsConfig: 'path/to/tsConfig.json',
+      compodoc: false,
+      styles: ['style.scss'],
+    });
+
+    const output = await run.result;
+
+    await run.stop();
+
+    expect(output.success).toBeTruthy();
+    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
+    expect(buildStandaloneMock).toHaveBeenCalledWith({
+      angularBrowserTarget: null,
+      angularBuilderContext: expect.any(Object),
+      angularBuilderOptions: { styles: ['style.scss'] },
+      configDir: '.storybook',
+      loglevel: undefined,
+      quiet: false,
+      outputDir: 'storybook-static',
+      mode: 'static',
+      tsConfig: 'path/to/tsConfig.json',
     });
   });
 });

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

@@ -9,10 +9,15 @@ import { JsonObject } from '@angular-devkit/core';
 import { from, Observable, of, throwError } from 'rxjs';
 import { CLIOptions } from '@storybook/core-common';
 import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
+import { sync as findUpSync } from 'find-up';
 
 // 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 +26,8 @@ export type StorybookBuilderOptions = JsonObject & {
   tsConfig?: string;
   compodoc: boolean;
   compodocArgs: string[];
+  styles?: ExtraEntryPoint[];
+  stylePreprocessorOptions?: StylePreprocessorOptions;
 } & Pick<
     // makes sure the option exists
     CLIOptions,
@@ -46,12 +53,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 ? { stylePreprocessorOptions } : {}),
+          ...(styles ? { styles } : {}),
+        },
         tsConfig,
       };
       return standaloneOptions;
@@ -76,7 +100,10 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext)
   }
 
   return {
-    tsConfig: options.tsConfig ?? browserOptions.tsConfig ?? undefined,
+    tsConfig:
+      options.tsConfig ??
+      findUpSync('tsconfig.json', { cwd: options.configDir }) ??
+      browserOptions.tsConfig,
   };
 }
 

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

@@ -51,15 +51,62 @@
       "items": {
         "type": "string"
       }
+    },
+    "styles": {
+      "type": "array",
+      "description": "Global styles to be included in the build.",
+      "items": {
+        "$ref": "#/definitions/extraEntryPoint"
+      },
+      "default": ""
+    },
+    "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,
+      "default": ""
     }
   },
   "additionalProperties": false,
-  "oneOf": [
-    {
-      "required": ["browserTarget"]
-    },
-    {
-      "required": ["tsConfig"]
+  "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.spec.ts

@@ -5,6 +5,7 @@ import * as path from 'path';
 
 const buildStandaloneMock = jest.fn();
 jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock);
+jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));
 
 const cpSpawnMock = {
   spawn: jest.fn(),
@@ -76,9 +77,9 @@ describe('Start Storybook Builder', () => {
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
       angularBuilderContext: expect.any(Object),
+      angularBuilderOptions: {},
       ci: false,
       configDir: '.storybook',
-      docsMode: false,
       host: 'localhost',
       https: false,
       port: 4400,
@@ -87,9 +88,7 @@ describe('Start Storybook Builder', () => {
       sslCa: undefined,
       sslCert: undefined,
       sslKey: undefined,
-      compodoc: false,
-      compodocArgs: ['-e', 'json'],
-      tsConfig: 'src/tsconfig.app.json',
+      tsConfig: './storybook/tsconfig.ts',
     });
   });
 
@@ -109,9 +108,9 @@ describe('Start Storybook Builder', () => {
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: null,
       angularBuilderContext: expect.any(Object),
+      angularBuilderOptions: {},
       ci: false,
       configDir: '.storybook',
-      docsMode: false,
       host: 'localhost',
       https: false,
       port: 4400,
@@ -120,8 +119,6 @@ describe('Start Storybook Builder', () => {
       sslCa: undefined,
       sslCert: undefined,
       sslKey: undefined,
-      compodoc: false,
-      compodocArgs: ['-e', 'json'],
       tsConfig: 'path/to/tsConfig.json',
     });
   });
@@ -159,7 +156,7 @@ describe('Start Storybook Builder', () => {
     expect(output.success).toBeTruthy();
     expect(cpSpawnMock.spawn).toHaveBeenCalledWith('compodoc', [
       '-p',
-      'src/tsconfig.app.json',
+      './storybook/tsconfig.ts',
       '-d',
       '',
       '-e',
@@ -168,9 +165,9 @@ describe('Start Storybook Builder', () => {
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
       angularBuilderContext: expect.any(Object),
+      angularBuilderOptions: {},
       ci: false,
       configDir: '.storybook',
-      docsMode: false,
       host: 'localhost',
       https: false,
       port: 9009,
@@ -179,9 +176,41 @@ describe('Start Storybook Builder', () => {
       sslCa: undefined,
       sslCert: undefined,
       sslKey: undefined,
-      compodoc: true,
-      compodocArgs: ['-e', 'json'],
-      tsConfig: 'src/tsconfig.app.json',
+      tsConfig: './storybook/tsconfig.ts',
+    });
+  });
+
+  it('should start storybook with styles options', async () => {
+    const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
+      tsConfig: 'path/to/tsConfig.json',
+      port: 4400,
+      compodoc: false,
+      styles: ['src/styles.css'],
+    });
+
+    const output = await run.result;
+
+    await run.stop();
+
+    expect(output.success).toBeTruthy();
+    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
+    expect(buildStandaloneMock).toHaveBeenCalledWith({
+      angularBrowserTarget: null,
+      angularBuilderContext: expect.any(Object),
+      angularBuilderOptions: {
+        styles: ['src/styles.css'],
+      },
+      ci: false,
+      configDir: '.storybook',
+      host: 'localhost',
+      https: false,
+      port: 4400,
+      quiet: false,
+      smokeTest: false,
+      sslCa: undefined,
+      sslCert: undefined,
+      sslKey: undefined,
+      tsConfig: 'path/to/tsConfig.json',
     });
   });
 });