Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PostCSS dependency conflict in fresh CRA v5 + Storybook project following node_modules and package-lock.json removal #19218

Open
pushred opened this issue Sep 20, 2022 · 4 comments

Comments

@pushred
Copy link

pushred commented Sep 20, 2022

Describe the bug

As the repro demonstrates I have created a project using Create React App and Storybook init scripts, like so:

  • npx create-react-app <name> --template typescript
  • npx storybook init

The result works, until I reach a point in the project where I need to remove package-lock.json and node_modules in order to address some unrelated dependency issue. If I install dependencies from this point using the latest npm version v8.19.1 I am from thereon unable to build CRA production bundles due to this error:

> react-scripts build

Creating an optimized production build...
Failed to compile.

static/css/main.a6b5f62b.css from Css Minimizer plugin
Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

Running npm ls postcss I see that the dependency graph is in a terrible state:

Tons of dependency errors
├─┬ @storybook/builder-webpack5@6.5.12
│ └─┬ css-loader@5.2.7
│   ├─┬ icss-utils@5.1.0
│   │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils
│   ├─┬ postcss-modules-extract-imports@3.0.0
│   │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports

··· truncated, repeated errors exceed GitHub comment length max ···

│   ├─┬ postcss-modules-values@4.0.0
│   │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values
│   └── postcss@8.4.16
├─┬ @storybook/react@6.5.12
│ └─┬ @storybook/core@6.5.12
│   └─┬ @storybook/core-server@6.5.12
│     ├─┬ @storybook/builder-webpack4@6.5.12
│     │ ├─┬ autoprefixer@9.8.8
│     │ │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested, "^8.2.15" from node_modules/cssnano-preset-default, "^8.2" from node_modules/@csstools/selector-specificity
│     │ ├─┬ css-loader@3.6.0
│     │ │ ├─┬ icss-utils@4.1.1
│     │ │ │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested, "^8.2.15" from node_modules/cssnano-preset-default, "^8.2" from node_modules/@csstools/selector-specificity, "^8.0.9" from node_modules/css-declaration-sorter, "^8.2.15" from node_modules/cssnano-utils, "^8.2.2" from node_modules/postcss-calc, "^8.2.15" from node_modules/postcss-colormin, "^8.2.15" from node_modules/postcss-convert-values, "^8.2.15" from node_modules/postcss-discard-comments, "^8.2.15" from node_modules/postcss-discard-duplicates, "^8.2.15" from node_modules/postcss-discard-empty, "^8.2.15" from node_modules/postcss-discard-overridden, "^8.2.15" from node_modules/postcss-merge-longhand, "^8.2.15" from node_modules/postcss-merge-rules, "^8.2.15" from node_modules/postcss-minify-font-values, "^8.2.15" from node_modules/postcss-minify-gradients, "^8.2.15" from node_modules/postcss-minify-params, "^8.2.15" from node_modules/postcss-minify-selectors, "^8.2.15" from node_modules/postcss-normalize-charset, "^8.2.15" from node_modules/postcss-normalize-display-values, "^8.2.15" from node_modules/postcss-normalize-positions, "^8.2.15" from node_modules/postcss-normalize-repeat-style, "^8.2.15" from node_modules/postcss-normalize-string, "^8.2.15" from node_modules/postcss-normalize-timing-functions, "^8.2.15" from node_modules/postcss-normalize-unicode, "^8.2.15" from node_modules/postcss-normalize-url, "^8.2.15" from node_modules/postcss-normalize-whitespace, "^8.2.15" from node_modules/postcss-ordered-values, "^8.2.15" from node_modules/postcss-reduce-initial, "^8.2.15" from node_modules/postcss-reduce-transforms, "^8.2.15" from node_modules/postcss-svgo, "^8.2.15" from node_modules/postcss-unique-selectors
│     │ │ ├─┬ postcss-modules-extract-imports@2.0.0
│     │ │ │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested, "^8.2.15" from node_modules/cssnano-preset-default, "^8.2" from node_modules/@csstools/selector-specificity, "^8.0.9" from node_modules/css-declaration-sorter, "^8.2.15" from node_modules/cssnano-utils, "^8.2.2" from node_modules/postcss-calc, "^8.2.15" from node_modules/postcss-colormin, "^8.2.15" from node_modules/postcss-convert-values, "^8.2.15" from node_modules/postcss-discard-comments, "^8.2.15" from node_modules/postcss-discard-duplicates, "^8.2.15" from node_modules/postcss-discard-empty, "^8.2.15" from node_modules/postcss-discard-overridden, "^8.2.15" from node_modules/postcss-merge-longhand, "^8.2.15" from node_modules/postcss-merge-rules, "^8.2.15" from node_modules/postcss-minify-font-values, "^8.2.15" from node_modules/postcss-minify-gradients, "^8.2.15" from node_modules/postcss-minify-params, "^8.2.15" from node_modules/postcss-minify-selectors, "^8.2.15" from node_modules/postcss-normalize-charset, "^8.2.15" from node_modules/postcss-normalize-display-values, "^8.2.15" from node_modules/postcss-normalize-positions, "^8.2.15" from node_modules/postcss-normalize-repeat-style, "^8.2.15" from node_modules/postcss-normalize-string, "^8.2.15" from node_modules/postcss-normalize-timing-functions, "^8.2.15" from node_modules/postcss-normalize-unicode, "^8.2.15" from node_modules/postcss-normalize-url, "^8.2.15" from node_modules/postcss-normalize-whitespace, "^8.2.15" from node_modules/postcss-ordered-values, "^8.2.15" from node_modules/postcss-reduce-initial, "^8.2.15" from node_modules/postcss-reduce-transforms, "^8.2.15" from node_modules/postcss-svgo, "^8.2.15" from node_modules/postcss-unique-selectors

··· truncated, repeated errors exceed GitHub comment length max ···

│     │ ├─┬ postcss-loader@4.3.0
│     │ │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested, "^8.2.15" from node_modules/cssnano-preset-default, "^8.2" from node_modules/@csstools/selector-specificity
│     │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested
│     └─┬ @storybook/manager-webpack4@6.5.12
│       └─┬ css-loader@3.6.0
│         ├─┬ icss-utils@4.1.1
│         │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested, "^8.2.15" from node_modules/cssnano-preset-default, "^8.2" from node_modules/@csstools/selector-specificity, "^8.0.9" from node_modules/css-declaration-sorter, "^8.2.15" from node_modules/cssnano-utils, "^8.2.2" from node_modules/postcss-calc, "^8.2.15" from node_modules/postcss-colormin, "^8.2.15" from node_modules/postcss-convert-values, "^8.2.15" from node_modules/postcss-discard-comments, "^8.2.15" from node_modules/postcss-discard-duplicates, "^8.2.15" from node_modules/postcss-discard-empty, "^8.2.15" from node_modules/postcss-discard-overridden, "^8.2.15" from node_modules/postcss-merge-longhand, "^8.2.15" from node_modules/postcss-merge-rules, "^8.2.15" from node_modules/postcss-minify-font-values, "^8.2.15" from node_modules/postcss-minify-gradients, "^8.2.15" from node_modules/postcss-minify-params, "^8.2.15" from node_modules/postcss-minify-selectors, "^8.2.15" from node_modules/postcss-normalize-charset, "^8.2.15" from node_modules/postcss-normalize-display-values, "^8.2.15" from node_modules/postcss-normalize-positions, "^8.2.15" from node_modules/postcss-normalize-repeat-style, "^8.2.15" from node_modules/postcss-normalize-string, "^8.2.15" from node_modules/postcss-normalize-timing-functions, "^8.2.15" from node_modules/postcss-normalize-unicode, "^8.2.15" from node_modules/postcss-normalize-url, "^8.2.15" from node_modules/postcss-normalize-whitespace, "^8.2.15" from node_modules/postcss-ordered-values, "^8.2.15" from node_modules/postcss-reduce-initial, "^8.2.15" from node_modules/postcss-reduce-transforms, "^8.2.15" from node_modules/postcss-svgo, "^8.2.15" from node_modules/postcss-unique-selectors
│         ├─┬ postcss-modules-extract-imports@2.0.0
│         │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested, "^8.2.15" from node_modules/cssnano-preset-default, "^8.2" from node_modules/@csstools/selector-specificity, "^8.0.9" from node_modules/css-declaration-sorter, "^8.2.15" from node_modules/cssnano-utils, "^8.2.2" from node_modules/postcss-calc, "^8.2.15" from node_modules/postcss-colormin, "^8.2.15" from node_modules/postcss-convert-values, "^8.2.15" from node_modules/postcss-discard-comments, "^8.2.15" from node_modules/postcss-discard-duplicates, "^8.2.15" from node_modules/postcss-discard-empty, "^8.2.15" from node_modules/postcss-discard-overridden, "^8.2.15" from node_modules/postcss-merge-longhand, "^8.2.15" from node_modules/postcss-merge-rules, "^8.2.15" from node_modules/postcss-minify-font-values, "^8.2.15" from node_modules/postcss-minify-gradients, "^8.2.15" from node_modules/postcss-minify-params, "^8.2.15" from node_modules/postcss-minify-selectors, "^8.2.15" from node_modules/postcss-normalize-charset, "^8.2.15" from node_modules/postcss-normalize-display-values, "^8.2.15" from node_modules/postcss-normalize-positions, "^8.2.15" from node_modules/postcss-normalize-repeat-style, "^8.2.15" from node_modules/postcss-normalize-string, "^8.2.15" from node_modules/postcss-normalize-timing-functions, "^8.2.15" from node_modules/postcss-normalize-unicode, "^8.2.15" from node_modules/postcss-normalize-url, "^8.2.15" from node_modules/postcss-normalize-whitespace, "^8.2.15" from node_modules/postcss-ordered-values, "^8.2.15" from node_modules/postcss-reduce-initial, "^8.2.15" from node_modules/postcss-reduce-transforms, "^8.2.15" from node_modules/postcss-svgo, "^8.2.15" from node_modules/postcss-unique-selectors

··· truncated, repeated errors exceed GitHub comment length max ···

│         ├─┬ postcss-modules-values@3.0.0
│         │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested, "^8.2.15" from node_modules/cssnano-preset-default, "^8.2" from node_modules/@csstools/selector-specificity, "^8.0.9" from node_modules/css-declaration-sorter, "^8.2.15" from node_modules/cssnano-utils, "^8.2.2" from node_modules/postcss-calc, "^8.2.15" from node_modules/postcss-colormin, "^8.2.15" from node_modules/postcss-convert-values, "^8.2.15" from node_modules/postcss-discard-comments, "^8.2.15" from node_modules/postcss-discard-duplicates, "^8.2.15" from node_modules/postcss-discard-empty, "^8.2.15" from node_modules/postcss-discard-overridden, "^8.2.15" from node_modules/postcss-merge-longhand, "^8.2.15" from node_modules/postcss-merge-rules, "^8.2.15" from node_modules/postcss-minify-font-values, "^8.2.15" from node_modules/postcss-minify-gradients, "^8.2.15" from node_modules/postcss-minify-params, "^8.2.15" from node_modules/postcss-minify-selectors, "^8.2.15" from node_modules/postcss-normalize-charset, "^8.2.15" from node_modules/postcss-normalize-display-values, "^8.2.15" from node_modules/postcss-normalize-positions, "^8.2.15" from node_modules/postcss-normalize-repeat-style, "^8.2.15" from node_modules/postcss-normalize-string, "^8.2.15" from node_modules/postcss-normalize-timing-functions, "^8.2.15" from node_modules/postcss-normalize-unicode, "^8.2.15" from node_modules/postcss-normalize-url, "^8.2.15" from node_modules/postcss-normalize-whitespace, "^8.2.15" from node_modules/postcss-ordered-values, "^8.2.15" from node_modules/postcss-reduce-initial, "^8.2.15" from node_modules/postcss-reduce-transforms, "^8.2.15" from node_modules/postcss-svgo, "^8.2.15" from node_modules/postcss-unique-selectors
│         └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested, "^8.2.15" from node_modules/cssnano-preset-default, "^8.2" from node_modules/@csstools/selector-specificity
└─┬ react-scripts@5.0.1
  ├─┬ css-loader@6.7.1
  │ └── postcss@8.4.16 deduped
  ├─┬ css-minimizer-webpack-plugin@3.4.1
  │ ├─┬ cssnano@5.1.13
  │ │ ├─┬ cssnano-preset-default@5.2.12

··· truncated, repeated errors exceed GitHub comment length max ···

  │ └── postcss@8.4.16
  ├─┬ postcss-flexbugs-fixes@5.0.2
  │ └── postcss@8.4.16 deduped
  ├─┬ postcss-loader@6.2.1
  │ └── postcss@8.4.16 deduped
  ├─┬ postcss-normalize@10.0.1
  │ ├─┬ postcss-browser-comments@4.0.0
  │ │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments
  │ └── postcss@7.0.39 invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments
  ├─┬ postcss-preset-env@7.8.2
  │ ├─┬ @csstools/postcss-cascade-layers@1.1.1
  │ │ ├─┬ @csstools/selector-specificity@2.0.2
  │ │ │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested, "^8.2.15" from node_modules/cssnano-preset-default, "^8.2" from node_modules/@csstools/selector-specificity
  │ │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers
  │ ├─┬ @csstools/postcss-color-function@1.1.1
  │ │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function

··· truncated, repeated errors exceed GitHub comment length max ···

  │ ├─┬ postcss-replace-overflow-wrap@4.0.0
  │ │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap
  │ ├─┬ postcss-selector-not@6.0.1
  │ │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not
  │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env
  ├── postcss@8.4.16
  ├─┬ resolve-url-loader@4.0.0
  │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env
  └─┬ tailwindcss@3.1.8
    ├─┬ postcss-import@14.1.0
    │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import

··· truncated, repeated errors exceed GitHub comment length max ···

    ├─┬ postcss-nested@5.0.6
    │ └── postcss@7.0.39 deduped invalid: ">= 8" from node_modules/postcss-normalize, "^8.2" from node_modules/postcss-preset-env, "^8.1.0" from node_modules/icss-utils, "^8.1.0" from node_modules/postcss-modules-extract-imports, "^8.1.0" from node_modules/postcss-modules-local-by-default, "^8.1.0" from node_modules/postcss-modules-scope, "^8.1.0" from node_modules/postcss-modules-values, "^8.2.15" from node_modules/cssnano, ">=8" from node_modules/postcss-browser-comments, "^8.2" from node_modules/@csstools/postcss-cascade-layers, "^8.2" from node_modules/@csstools/postcss-color-function, "^8.2" from node_modules/@csstools/postcss-font-format-keywords, "^8.2" from node_modules/@csstools/postcss-hwb-function, "^8.2" from node_modules/@csstools/postcss-ic-unit, "^8.2" from node_modules/@csstools/postcss-is-pseudo-class, "^8.2" from node_modules/@csstools/postcss-nested-calc, "^8.2" from node_modules/@csstools/postcss-normalize-display-values, "^8.2" from node_modules/@csstools/postcss-oklab-function, "^8.3" from node_modules/@csstools/postcss-progressive-custom-properties, "^8.2" from node_modules/@csstools/postcss-stepped-value-functions, "^8.2" from node_modules/@csstools/postcss-text-decoration-shorthand, "^8.2" from node_modules/@csstools/postcss-trigonometric-functions, "^8.2" from node_modules/@csstools/postcss-unset-value, "^8.1.0" from node_modules/postcss-preset-env/node_modules/autoprefixer, "^8.4" from node_modules/css-blank-pseudo, "^8.4" from node_modules/css-has-pseudo, "^8.4" from node_modules/css-prefers-color-scheme, "^8.2" from node_modules/postcss-attribute-case-insensitive, "^8.4.6" from node_modules/postcss-clamp, "^8.2" from node_modules/postcss-color-functional-notation, "^8.4" from node_modules/postcss-color-hex-alpha, "^8.2" from node_modules/postcss-color-rebeccapurple, "^8.3" from node_modules/postcss-custom-media, "^8.2" from node_modules/postcss-custom-properties, "^8.3" from node_modules/postcss-custom-selectors, "^8.2" from node_modules/postcss-dir-pseudo-class, "^8.2" from node_modules/postcss-double-position-gradients, "^8.4" from node_modules/postcss-env-function, "^8.4" from node_modules/postcss-focus-visible, "^8.4" from node_modules/postcss-focus-within, "^8.1.0" from node_modules/postcss-font-variant, "^8.2" from node_modules/postcss-gap-properties, "^8.2" from node_modules/postcss-image-set-function, "^8.0.0" from node_modules/postcss-initial, "^8.2" from node_modules/postcss-lab-function, "^8.4" from node_modules/postcss-logical, "^8.1.0" from node_modules/postcss-media-minmax, "^8.2" from node_modules/postcss-nesting, "^8.2" from node_modules/postcss-overflow-shorthand, "^8" from node_modules/postcss-page-break, "^8.2" from node_modules/postcss-place, "^8.2" from node_modules/postcss-pseudo-class-any-link, "^8.0.3" from node_modules/postcss-replace-overflow-wrap, "^8.2" from node_modules/postcss-selector-not, "^8.0.0" from node_modules/postcss-import, "^8.3.3" from node_modules/postcss-js, ">=8.0.9" from node_modules/postcss-load-config, "^8.2.14" from node_modules/postcss-nested
    └── postcss@8.4.16

npm ERR! code ELSPROBLEMS

To Reproduce

As with #18298 this cannot use npx sb@next repro because it is only reproducible when using npm v8. Here is a repository that contains three commits demonstrating the issue:

https://github.com/pushred/storybook-init-npm-v8-lockfile-issue-repro/commits/main

  • To return to a working state reset HEAD to pushred/storybook-init-npm-v8-lockfile-issue-repro@410cb43

  • To break it again: run rm package-lock.json && node_modules && npm i

    • Alternately, run npm i --legacy-peer-deps but the effect is the same
  • npm ls postcss to observe broken dependency graph andnpm run build to observe failing CRA production build

System

System:
  OS: macOS 12.5.1
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
  Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 8.19.1 - ~/.nvm/versions/node/v16.15.1/bin/npm
Browsers:
  Chrome: 105.0.5195.125
  Edge: 105.0.1343.42
  Firefox: 88.0.1
  Safari: 15.6.1
npmPackages:
  @storybook/addon-actions: ^6.5.12 => 6.5.12 
  @storybook/addon-essentials: ^6.5.12 => 6.5.12 
  @storybook/addon-interactions: ^6.5.12 => 6.5.12 
  @storybook/addon-links: ^6.5.12 => 6.5.12 
  @storybook/builder-webpack5: ^6.5.12 => 6.5.12 
  @storybook/manager-webpack5: ^6.5.12 => 6.5.12 
  @storybook/node-logger: ^6.5.12 => 6.5.12 
  @storybook/preset-create-react-app: ^4.1.2 => 4.1.2 
  @storybook/react: ^6.5.12 => 6.5.12 
  @storybook/testing-library: ^0.0.13 => 0.0.13 

Additional context

This uses the legacy peer dependency flag workaround previously discussed in #18298

We cannot use Yarn unfortunately. Storybook will be removed from the project if it is not compatible with the latest patch version of npm shipping with the active LTS version of Node. I am going to attempt making Storybook an optional dependency to avoid this from affecting our prod builds but I'm not optimistic this will work without breaking Storybook and/or Chromatic.

@pushred
Copy link
Author

pushred commented Sep 20, 2022

I've managed to workaround this issue (so far) by overriding a Sass-related Webpack plugin that react-scripts/CRA require, called resolve-url-loader. The version required depends on PostCSS v7 but the latest major version upgrades to PostCSS v8. The override creates a separate issue where PostCSS is not found and builds fail with this error:

Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'postcss'
Require stack:
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/utils.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/browsers.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/autoprefixer.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/postcss-preset-env/dist/index.cjs
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/react-scripts/node_modules/postcss-loader/dist/utils.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/react-scripts/node_modules/postcss-loader/dist/index.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/react-scripts/node_modules/postcss-loader/dist/cjs.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/loader-runner/lib/loadLoader.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/webpack/lib/NormalModule.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/webpack-manifest-plugin/dist/index.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/react-scripts/config/webpack.config.js
- /Users/example/dev/storybook-init-npm-v8-lockfile-issue-repro/node_modules/react-scripts/scripts/build.js

Simply installing the same version of PostCSS as react-scripts directly in the project addresses this however. So given the solution this isn't necessarily a Storybook-related issue. I'll open a CRA PR to bump resolve-url-loader. In my testing I have seen some non-deterministic install behavior post-override however where I still got a PostCSS conflict when installing fresh without an existing node_modules and package-lock.json file. I'm currently not able to reproduce that but I was able to workaround that as well by installing all Storybook-related packages as optional dependencies. This removed manager-webpack4 from the tree and it's potential for conflict.

The full workaround can be seen here:

https://github.com/pushred/storybook-init-npm-v8-lockfile-issue-repro/tree/workaround

@pushred
Copy link
Author

pushred commented Sep 20, 2022

Actually optional dependencies are not a possible solution for this. Builds fail when Storybook is missing due to a separate CRA issue where it attempts to bundle story modules:

#12625

@jithurjacob
Copy link

Facing the same issue.

@el-j
Copy link

el-j commented Nov 23, 2022

had the same issue and fixed with override in package.json

 "overrides": {
    "postcss": "8.4.19",
 }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants