search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.76k stars 11.98k forks source link

postcss in Angular 18+ version running twice #27804

Closed oarshad closed 4 months ago

oarshad commented 4 months ago

Which @angular/* package(s) are the source of the bug?

compiler-cli, compiler

Is this a regression?

Yes

Description

In Angular 18+ versions, the PostCSS configuration appears to execute twice during both development and production builds. This behavior can cause issues, particularly for users employing plugins such as postcss-rtlcss. In Angular 17 and earlier versions, this issue did not occur.

Steps to Reproduce:

  1. Create a postcss.config.json file with the postcss-rtlcss plugin configured.
  2. Run the Angular application in development mode or build it for production.

Expected Behavior:

PostCSS should execute once, correctly applying the postcss-rtlcss plugin and preserving specific CSS comments for RTL processing (e.g., /!rtl:begin:ignore/).

Observed Behavior:

PostCSS runs twice:

  1. The first execution correctly applies the RTL CSS transformations and respects the ignore comments, producing CSS compatible with both LTR and RTL styles.
  2. The second execution occurs after the comments have been removed, causing postcss-rtlcss to apply transformations again, leading to unintended CSS changes where comments were intended to prevent modifications.

Impact:

This issue causes CSS styles to be incorrectly processed, particularly in areas where ignore comments are used to maintain certain styles. The double processing results in unexpected changes to the CSS, breaking the intended styling for both LTR and RTL directions.

Request:

Please investigate and resolve the issue of PostCSS running twice in Angular 18+ to ensure consistent and expected CSS processing. This will help maintain compatibility with plugins like postcss-rtlcss and preserve the integrity of the styling configurations.

Please provide a link to a minimal reproduction of the bug

https://github.com/oarshad/angular-postcss-issue

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular Cli: 18.0.3

Anything else?

No response

angular-automatic-lock-bot[bot] commented 3 months ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.