feat(@angular-devkit/build-angular): support using custom postcss configuration with application builder

[clydin]

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.

Closes #25411
Closes #26867

[sod]

On the topic of overhead. I always liked that you moved sass into a worker. So you already made the heavy lifting of worker handling and sending options, source and sourceMaps back and forth. Instead you could have the StylesheetPluginFactory itself as a worker, so the the entire stylesheet pipeline.

We did that in our custom build and it cut buildtime in half. But we do tons of postcss (purge, nano, autoprefix, url replacement), so I'm not sure about the average cli user.

[sod]

nevermind this though, I love that you add postcss support :)

[clydin]

Improvements to stylesheet processing performance are definitely something we are considering. There is added complexity with some of the options though. Based on usage, we will evaluate potentials such as the parallel processing you mentioned.
However, when using CSS directly there is currently a fast path that keeps all processing inside the bundler when tailwind is not used. So even with something like the worker integration there would still be some performance overhead.

Also, the application builder uses the bundler (esbuild) to handle CSS minification and prefixing so you may be able to remove those from your stylesheet pipeline if your application is on the new builder.

[nofalx]

It would be nice if we can add support for exclude as with using plugin like postcss-rtlcss it would output style based on dir and that would get lost in view encapsulation. I want to use it on global sheets but not components so something like this doesnt work and its affecting the components

{
    "plugins": {
        "postcss-rtlcss": { }
    },
    "exclude": "*.component.scss"
}

Issue faced with components, left and right are not applied due to view encapsulation

Another suggestion im unsure if is possible to apply the postcss plugins after the view encapsulation logic is applied as this would solve the issue for rtlcss components

[nofalx]

Update for those stuck into integrating rtlcss to angular you can make the components auto flip like this, make sure to use postcss-rtlcss and not rtlcss to generate single stylesheets

{
    "plugins": {
        "postcss-rtlcss": {
            "useCalc": true,
            "ltrPrefix": [
                "[dir=\"ltr\"]",
                "[dir=\"ltr\"] :host"
            ],
            "rtlPrefix": [
                "[dir=\"rtl\"]",
                "[dir=\"rtl\"] :host"
            ]
        }
    }
}

This seem to work as all what we need to make [dir="rtl"] escape the view encapsulation is to have it as prefix to :host .class

mention #26867

[Majky1423]

I am really going crazy but is this really everything that needs to be done? Create postcss.config.json in project's root and no other configs needs to be set or updated? I am trying to use postcss-rtlcss plugin and it doesn't do anything with setup like this. I thought that this would take styles from angular.json (we are using NX, so project.json in our case, could this be a problem?) and generates rtl styles accordingly but nothing happens. Thats the part of me going crazy, dunno if I missing some other config to further specify what I want or I am completely missing a point of this feature.

I was able to generate rtl styles with the help of postcss-cli and commands, so all should be installed correctly.

And also, I guess a little bit offtopic, can postcss-rtlcss be combined with tailwind in a way that tailwind.css with all classes would be processed as rtl stylesheet, so I dont need rewrite all classes in templates for RTL? I don't really understand the whole process behind this but for me it looks like that both tailwind.css and rtl stylesheets from postcss-rtlcss are generated at the same time and something like this is not possible. But as I said, this is all new to me and I am little bit lost :/

[angular-automatic-lock-bot]

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.}