Angular: Fix filtering of workspace config styles

[valentinpalkovic]

Relates #24768

What I did

Currently, every kind of style is injected into the iframe HTML, although some of them are marked with inject:false to not inject them, but rather to leave it to the user to dynamically load them if required.

So, let's say a user defines two different styles via workspace configuration:

{
  ...
  "projects": {
    "angular-latest": {
     ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            ...
            "styles": [
              "src/styles.scss",
              {
                "input": "src/design.tokens.css",
                "inject": false,
                "bundleName": "design-tokens"
              }
            ],

Then styles.scss should be injected into the iframe.html, whereas the design-tokens one shouldn't be.

Huge shoutout to @andriy-statsenko-lightit to figuring out this bug and has helped with the solution!

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Run an Angular sandbox in no-link mode`
2. Adjust the workspace configuration in angular.json to use two different styles, where one is injected (string or object notation with inject=true) and the other one is not injected (inject=false)
3. Make sure, that only injected styles are put into the iframe.html

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-27108-sha-2470133a. Try it out in a new sandbox by running npx storybook@0.0.0-pr-27108-sha-2470133a sandbox or in an existing project with npx storybook@0.0.0-pr-27108-sha-2470133a upgrade.

More information

Published version	0.0.0-pr-27108-sha-2470133a
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/fix-angular-styles-options-filtering
Commit	2470133a
Datetime	Wed May 15 11:50:01 UTC 2024 (1715773801)
Workflow run	9095112714

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=27108

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit cca91fc. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected -t check -c production --parallel=7
• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[yannbf]

LGTM! Did not test but seems like a community member with a real use case has extensively tested which is amazing!