Dependency issues with latest version

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

[3/4] Linking dependencies...
warning " > postcss-ng-tailwind-in-components@0.0.2" has unmet peer dependency "postcss@^8.2.4".
warning " > tailwindcss@2.0.2" has unmet peer dependency "autoprefixer@^10.0.2".
warning " > tailwindcss@2.0.2" has unmet peer dependency "postcss@^8.0.9".
warning "tailwindcss > postcss-nested@5.0.3" has unmet peer dependency "postcss@^8.1.13".

Expected behavior

No dependency warnings

Minimal reproduction of the problem with instructions

Create new Angular 11.1.1 app Add @ngneat/tailwind schematics

Adding the missing postcss and autoprefixer dependencies manually solved the problem.

What is the motivation / use case for changing the behavior?

No dependency warnings

Environment

Angular version: X.Y.Z
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.1.2
Node: 15.7.0
OS: linux x64

Angular: 11.1.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.2
@angular-devkit/build-angular   0.1101.2
@angular-devkit/core            11.1.2
@angular-devkit/schematics      11.1.2
@angular/cli                    11.1.2
@schematics/angular             11.1.2
@schematics/update              0.1101.2
rxjs                            6.6.3
typescript                      4.1.3

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v15.7.0
- Platform:  Ubuntu

[MatthewAlner]

Same issue with a fresh ng new some-app-name

Error: ./src/styles.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

Using

“@angular-builders/custom-webpack”: “11.0.0”

I picked scss and am using yarn in the initial setup if that makes a difference

yarn add --dev postcss@8

Fixed it for me

[lacolaco]

I hit the same situation. Today I executed the commands below and postcss@8 is missing.

$ npx @angular/cli@latest new my-app
$ cd my-app
$ npx ng add @ngneat/tailwind@latest
$ npm run build

Error: ./src/styles.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin postcss-nested requires PostCSS 8.
Migration guide for end-users:

$ npx ng version

Angular CLI: 11.1.2
Node: 12.18.3
OS: darwin x64

Angular: 11.1.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.2
@angular-devkit/build-angular   0.1101.2
@angular-devkit/core            11.1.2
@angular-devkit/schematics      11.1.2
@angular/cli                    11.1.2
@schematics/angular             11.1.2
@schematics/update              0.1101.2
rxjs                            6.6.3
typescript                      4.1.3

It’s able to be solved by npm install -D postcss@8. Until that, node_modules/postcss is still version 7.