Why was the postcss-import added?

What was the reason the postcss-import plugin was added? seems to be working without it as well.

[vltansky]

@shaharkazaz @nartc I’ve succeeded to make it work according to answers in this issue: https://github.com/angular/angular-cli/issues/8427 As Angular 11.0.5 uses Postcss 8 we don’t need to install PostCSS 8, postcss-import, autoprefixer and etc. as angular already have it.

So after ng add @ngneat/tailwind I’ve removed all node modules that we don’t need anymore:

$ npm uninstall postcss postcss-loader postcss-import autoprefixer postcss-scss -D

and according to https://github.com/angular/angular-cli/issues/8427#issuecomment-742294238 with small modifications changed webpack.config.js to:

module.exports = (config) => {
  const isProd = config.mode === 'production';
  const tailwindConfig = require('./tailwind.config.js')(isProd);

  const globalStylesPostcssLoaderOptions = config.module.rules
    .find((r) => r.include && r.test && r.test.toString().includes('\\.scss$'))
    .use.find((u) => u.loader && u.loader.includes('postcss-loader')).options;

  const globalStylesPostcssOptionsCreator = globalStylesPostcssLoaderOptions.postcssOptions;

  globalStylesPostcssLoaderOptions.postcssOptions = (loader) => {
    const postcssOptions = globalStylesPostcssOptionsCreator(loader);
    postcssOptions.plugins.splice(postcssOptions.plugins.length - 1, 0, require('tailwindcss')(tailwindConfig));

    return postcssOptions;
  };
  return config;
};

Here is a repo to test it: https://github.com/vltansky/tailwind-ng11

In this commit you can see all changes: https://github.com/vltansky/tailwind-ng11/commit/1e58ee15546557ceeb5b35ec33d22c9d84bb9cf0

Now @apply is working and all the imports (e.g ag-grid, ionic) will work too. The only thing to mention, that @apply will work only in global styles, not in components (do we need it on components level? it may slow down builds)

[shaharkazaz]

@nartc Share your findings once you have some 🙂