When using the `application` builder, the usage of a custom postcss configuration is now supported.
The builder will automatically detect and use specific postcss configuration files if present in
either the project root directory or the workspace root. Files present in the project root will have
priority over a workspace root file. If using a custom postcss configuration file, the automatic
tailwind integration will be disabled. To use both a custom postcss configuration and tailwind, the
tailwind setup must be included in the custom postcss configuration file.
The configuration files must be JSON and named one of the following:
* `postcss.config.json`
* `.postcssrc.json`
A configuration file can use either an array form or an object form to setup plugins.
An example of the array form:
```
{
"plugins": [
"tailwindcss",
["rtlcss", { "useCalc": true }]
]
}
```
The same in an object form:
```
{
"plugins": {
"tailwindcss": {},
"rtlcss": { "useCalc": true }
}
}
```
NOTE: Using a custom postcss configuration may result in reduced build and rebuild
performance. Postcss will be used to process all global and component stylesheets
when a custom configuration is present. Without a custom postcss configuration,
postcss is only used for a stylesheet when tailwind is enabled and the stylesheet
requires tailwind processing.
Prior to this change in the stats table we listed all the lazy chunk, in some cases this could be hundreds of files.
With this change, we limit the number of files listed. To display all entire list of files users would need to use the `--verbose` flag.
The `elide-angular-metadata` build optimization pass have been cleaned up
and restructured to remove the need for a direct runtime dependency on `@babel/core`.
The `pure-toplevel-functions` build optimization pass have been cleaned up
and restructured to remove the need for a direct runtime dependency on `@babel/core`.
Prior to this change using an absolute path as a `output-path` resulted in the path to be combined with the workspace root instead of resolved which caused the output to be emitted in the incorrect directory or error in Windows.
Closes#26935
The `load` event for each stylesheet may not always be triggered by Google Chrome's handling. Refer to: https://crbug.com/1521256
This results in the media attribute persistently being set to print, leading to distorted styles in the UI. To address this issue, we substitute the onload logic by replacing `link.addEventListener('load', ...` with `document.documentElement.addEventListener('load', ...` and filtering for link tags.
Closes#26932
Vite v5 updated the client code's error dialog text. This requires that the
text replacement code also be updated to remove unactionable information from
the error dialog.
Previously, the `application` builder would consider all imports originating from a package
to be considered external when caching was enabled. This allows Vite's prebundling to function
and optimize the build/rebuild experience for the development server. However, when using the
newly introduced `loader` option, this also inadvertently caused files that should be affected
by the option that originate from a package to also be considered external. This behavior would
then prevent the loader customization from being performed. To rectify this situation, all files
that would be affected by a loader customization will not be marked as external for the purposes
of prebundling unless explicitly configured by the `externalDependencies` option.
This commit fixes a regression which causes a pre-transform error when using vite with ssr. The `request.url` is now passed to the index transformer instead of `request.originalUrl`. This is because the `request.url` will have a value of the `index.html`.
Closes#26897
Previously, we `joined` the workspace root with the `outputFile.path`, in windows this caused a problem as during the 2nd rebuild it caused the workspace root to be prepended again which causes a `ENOENT` error. To avoid this problem, now we `clone` the output file.
Closes#26900
To reduce the amount of code within the main Vite development server file, the Vite plugin
that handles the in-memory output file integration for the Angular build system is now within
a separate file.
To support generate diagnostics in varying ways, the internal compilation classes
now support a `modes` argument when diagnosing files during a build using the `application` builder.
This is not exposed as an option at this time but can be experimented with a build using the
`NG_BUILD_TYPE_CHECK` environment variable. This environment variable is not considered part of the
public API and may be removed or altered in the future. Its current purpose is to allow profiling
of the type checking diagnostics functionality of the build system.
The `buildTarget` options for both the `dev-server` and `extract-i8n` builders
now have default values that reflect the recommended and new project generated
values. The defaults are as follows where `<current-project>` is the name of the project
where the `dev-server` or `extract-i18n` builder target is located:
* `dev-server` --> `<current-project>:build:development`
* `extract-i18n` --> `<current-project>:build`
Additionally, abbreviated target specifiers are now supported for these
options. This allows target specifiers such as `::production` which would expand
to `<current-project>:build:production` for either builder.
Abbreviated target specifiers are only supported for the `buildTarget` option in
the `dev-server` and `extract-i18n` builders.
When using the experimental programmatic API for the development server, the choice of builder used
to execute the actual underlying build can now be chosen via a selector function extension option.
The returned string value must be one of the first-party esbuild-based builders for the Vite-based
development server to be used. All other returned values will cause the Webpack-based development
server to be used. The Vite-based development server currently requires one of those builders to
be used (either `@angular-devkit/build-angular:application` or `@angular-devkit/build-angular:browser-esbuild`).
The logging of diagnostic (error/warning) messages from the build execution within the
`application` builder has been moved up one level. This allows the actual execution to
focus more on generating a result and leaves the enclosing builder system to handle
notification of the results.
To reduce the amount of code within the main `application` builder execution function,
the bundler context setup has been moved into a separate file. This also reduces the
amount of imports within the main execution function's module.
