search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.68k stars 9.32k forks source link

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

Open pushred opened 2 years ago

pushred commented 2 years ago

Describe the bug

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

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

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 commented 2 years ago

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 commented 2 years ago

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:

https://github.com/storybookjs/storybook/issues/12625

jithurjacob commented 2 years ago

Facing the same issue.

el-j commented 1 year ago

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

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