Add support for configuring PostCSS for Angular projects

[ambeur]

I created new nx/angular project with tailwind and storybook. All works fine, but now I need to add postcss nesting plugin, like postcss-nested or tailwindcss/nesting.
I created postcss.config.js in my app and lib directory with following config

module.exports = {
  plugins: [
    'postcss-import',
    'tailwindcss/nesting',
    'tailwindcss',
    'autoprefixer',
  ]
}

Current Behavior

I got "Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin before Tailwind in your configuration." message in build log. Seems like nx doesn't respect postcss.config.js.

Expected Behavior

Should be possibe to add postcss-plugins.

Environment

Node : 16.13.0
   OS   : win32 x64
   yarn : 1.22.17

   nx : 13.8.3
   @nrwl/angular : 13.8.3
   @nrwl/cli : 13.8.3
   @nrwl/cypress : 13.8.3
   @nrwl/detox : undefined
         @angular/cli: 13.2.5
         @angular/compiler-cli: 13.2.4
         @angular/language-service: 13.2.4
         @storybook/angular: 6.4.19

[CasualBot]

Have you tried the following?
https://nx.dev/guides/using-tailwind-css-in-react#pointing-postcss-to-tailwind-config

const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'), 
    },
    autoprefixer: {},
  },
};

[ambeur]

Yes, i tried, but it looks like postcss.config.js just ignored by builder.

[leosvelperez]

Thanks for reporting this!

This limitation comes from ng-packagr, which is the package used to build Angular libraries, and it doesn't support PostCSS. It's not exactly a bug but rather a feature that's currently not supported. Note that the documentation shared in #9650 (comment) above is for React projects, not for Angular projects.

I'm changing the label and title of the issue to track the request correctly.

[ambeur]

@leosvelperez hi! my problem occurs with applications in serve and build mode too. as far as I know the application builder does not use ng-packagr.

[leosvelperez]

@zvnt I'm sorry, somehow I missed you were referring to apps as well 🤦🏻

Still, there's no built-in/automatic support for PostCSS configuration in Angular apps either (you can see here angular/angular-cli#22849 (comment)). Again, this is a limitation on the underlying Angular tech used by the Nx executors to build projects. You can still configure PostCSS by using a custom webpack configuration.

[ambeur]

I tried custom webpack config with @nrwl/angular:webpack-browser builder and storybook builder. It works!

const {join} = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "postcss-loader",
            options: {
              implementation: require("postcss"),
              postcssOptions: {
                plugins: [
                  'postcss-import',
                  'tailwindcss/nesting',
                  [
                    'tailwindcss',
                    {
                      config: join(__dirname, 'tailwind.config.js'),
                    },
                  ],
                  "autoprefixer",
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

Are there any pitfalls with overwriting the rule for css-files?

[leosvelperez]

@zvnt you need to be careful not to overwrite the default Angular CLI webpack configuration for styles. The above will replace the rule configuration for the .css extension. Instead, you could use the function syntax that receives the base webpack configuration and update it with the changes you need:

module.exports = config => {
	// add your logic here updating the config
};

That way, you can obtain the specific rule(s) you want to update from the base configuration and make the needed changes without losing any functionality. You can take a look at some docs/examples updating the webpack config in a similar way to get an idea:

https://indepth.dev/posts/1294/angular-css-modules
angular/angular-cli#8427 (comment)

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.