Description
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:
- Create a postcss.config.json file with the postcss-rtlcss plugin configured.
- 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:
- The first execution correctly applies the RTL CSS transformations and respects the ignore comments, producing CSS compatible with both LTR and RTL styles.
- 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