Icons package dependency strategy

[alionazherdetska]

We're refactoring the post-icon mixin in #6214 to dynamically load icons as CSS files. This changes how the styles package interacts with the icons package, and we need to determine the appropriate dependency relationship.

Current State

• Icons package is a devDependency in styles package
• New post-icon-load mixin loads CSS from @swisspost/design-system-icons/dist/custom-properties

The new dynamic loading approach means users need the icons package available at build time. However, we cannot make icons a regular dependency due to pnpm issue #8338 - transitive dependencies are not installed when using publishConfig.linkDirectory: true.
This means when packages like internet-header depend on styles, pnpm won't install the icons package, causing build failures.

Available Options
Since regular dependencies don't work in our monorepo setup, we have two viable approaches:

Option 1: Use peer dependencies:

"peerDependencies": {
  "@swisspost/design-system-icons": "workspace:10.0.0-next.48"
}

Pros:

• Styles package itself is smaller
• Makes icon dependency visible and intentional

Cons:

• Users must remember to install icons separately
• Sass compilation breaks if icons package missing
• Cryptic "file not found" errors instead of clear dependency warnings
• Version Mismatches
• Existing users' builds will break until they install icons

Option 2: Copy Icons with Build Process(gulp task):

Similar to the existing token copying approach:

gulp.task('copy-icon-files', () => {
  return gulp.src(['../icons/dist/**/*.css'])
    .pipe(gulp.dest('./src/icons/temp'));
});

Pros:

• Solves pnpm issue: self-contained package works in all environments
• No external runtime dependencies
• Consistent with existing token handling approach
• Guaranteed availability during build
• No breaking changes for consumers

Cons:

• Duplicates files across packages
• Larger package size
• Need to keep copied files in sync

[oliverschuerch]

Resolution
As mentioned in the daily, coping over the icons CSS files is probably the easiest solution and follows the way we implemented the token files.
Therefore go with Option 2.