search

csstools / postcss-preset-env

Convert modern CSS into something browsers understand
https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
Creative Commons Zero v1.0 Universal
2.22k stars 90 forks source link

Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.0, but postcss-preset-env uses 7.0.36. #212

Closed ShahViral6438 closed 3 years ago

ShahViral6438 commented 3 years ago

While running ng test command, we are getting this error.

Below is package.json:

"dependencies": { "@angular/animations": "12.0.0", "@angular/cdk": "^12.0.0", "@angular/common": "~12.0.0", "@angular/compiler": "~12.0.0", "@angular/core": "^12.0.0", "@angular/forms": "~12.0.0", "@angular/localize": "~12.0.0", "@angular/material": "^12.0.0", "@angular/platform-browser": "~12.0.0", "@angular/platform-browser-dynamic": "~12.0.0", "@angular/router": "~12.0.0", "@azure/msal-angular": "^2.0.0", "@azure/msal-browser": "^2.14.1", "@microsoft/applicationinsights-web": "^2.6.2", "@microsoft/office-js": "^1.1.53", "@microsoft/office-js-helpers": "^1.0.2", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", "@progress/kendo-angular-buttons": "^6.2.0", "@progress/kendo-angular-common": "^2.0.1", "@progress/kendo-angular-dateinputs": "^5.2.0", "@progress/kendo-angular-dialog": "^5.0.1", "@progress/kendo-angular-dropdowns": "^5.3.0", "@progress/kendo-angular-editor": "^2.2.0", "@progress/kendo-angular-excel-export": "^4.0.1", "@progress/kendo-angular-grid": "^5.1.2", "@progress/kendo-angular-icons": "^0.4.3", "@progress/kendo-angular-indicators": "^1.1.0", "@progress/kendo-angular-inputs": "^7.3.0", "@progress/kendo-angular-intl": "^3.1.1", "@progress/kendo-angular-l10n": "^3.0.1", "@progress/kendo-angular-label": "^3.0.3", "@progress/kendo-angular-layout": "^6.1.5", "@progress/kendo-angular-listview": "^2.0.1", "@progress/kendo-angular-menu": "^3.0.2", "@progress/kendo-angular-notification": "^3.0.1", "@progress/kendo-angular-pager": "^2.0.1", "@progress/kendo-angular-pdf-export": "^3.0.1", "@progress/kendo-angular-popup": "^4.0.1", "@progress/kendo-angular-progressbar": "^2.0.1", "@progress/kendo-angular-toolbar": "^4.1.1", "@progress/kendo-angular-tooltip": "^3.0.2", "@progress/kendo-angular-treeview": "^5.3.1", "@progress/kendo-data-query": "^1.5.5", "@progress/kendo-drawing": "^1.10.1", "@progress/kendo-licensing": "^1.2.0", "@progress/kendo-svg-icons": "^0.1.2", "@progress/kendo-theme-default": "^4.38.1", "@types/office-js": "^1.0.181", "angular-material": "^1.2.2", "autoprefixer": "^9.8.6", "classlist.js": "^1.1.20150312", "guid-typescript": "^1.0.9", "office-ui-fabric-js": "^1.3.0", "officejs-mock": "^1.0.5", "postcss": "^8.3.6", "rxjs": "~6.6.0", "stream": "0.0.2", "timers": "^0.1.1", "tslib": "^2.0.0", "web-animations-js": "^2.3.2", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.0.0", "@angular-eslint/builder": "12.0.0", "@angular-eslint/eslint-plugin": "12.0.0", "@angular-eslint/eslint-plugin-template": "12.0.0", "@angular-eslint/schematics": "12.0.0", "@angular-eslint/template-parser": "12.0.0", "@angular/cli": "~12.0.0", "@angular/compiler-cli": "~12.0.0", "@types/jasmine": "3.7.1", "@types/node": "^12.11.1", "@types/xml2js": "^0.4.8", "@typescript-eslint/eslint-plugin": "4.23.0", "@typescript-eslint/parser": "4.23.0", "eslint": "^7.26.0", "jasmine-core": "3.7.1", "jasmine-spec-reporter": "7.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.6.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "typescript": "~4.2.4" }

Below are npm and node versions installed in my machine: node -v => V14.17.5 npm -v => 6.14.14

Result of ng version command: Angular CLI: 12.0.5 Node: 14.17.5 Package Manager: npm 6.14.14 OS: win32 x64

Angular: 12.2.1 ... cdk, core, material

Package Version

@angular-devkit/architect 0.1200.5 @angular-devkit/build-angular 12.0.5 @angular-devkit/core 12.0.5 @angular-devkit/schematics 12.0.5 @angular/animations 12.0.0 @angular/cli 12.0.5 @angular/common 12.0.5 @angular/compiler 12.0.5 @angular/compiler-cli 12.0.5 @angular/forms 12.0.5 @angular/localize 12.0.5 @angular/platform-browser 12.0.5 @angular/platform-browser-dynamic 12.0.5 @angular/router 12.0.5 @schematics/angular 12.0.5 rxjs 6.6.7 typescript 4.2.4

erikjoling commented 3 years ago

I ran into the same problem. But for me it was an issue in my CSS. (Wrong placement of parantheses in complex calc declaration). When I solved the bug, the warning was gone.

ShahViral6438 commented 3 years ago

Thanks @erikjoling for pointing out that.

I had a small error in one of the scss file (comma was missing). Also, I installed postcss and postcss-loader packages and then build started working.