PostCSS types not included; TypeError #146

MynockSpit · 2021-12-20T22:40:16Z

Bug report

When using css-minimizer-webpack-plugin with npm 7.7.6 and Typescript, the cssnano/node_modules/postcss is not being installed. As a result, builds fail on this type error.

Actual Behavior


node_modules/css-minimizer-webpack-plugin/types/utils.d.ts:9:30 - error TS2307: Cannot find module 'cssnano/node_modules/postcss' or its corresponding type declarations.

9 export type CssNano = import("cssnano/node_modules/postcss").Plugin<
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error.

Expected Behavior

I know I'm not supposed to say "it should work", but, uh. It looks like you're pulling a type from somewhere that is unreliable. From what I can tell, it's possibly be the result of @types/cssnano being a direct dependency in your package (and getting it's deps installed), but being a transitive dependency when it's being used. Not sure. What I do know for certain is that in my project that's using css-minimizer-webpack-plugin, the @types/cssnano folder looks like this:

When you pull down css-minimizer-webpack-plugin directly, it looks like this:

How Do We Reproduce?

Using css-minimizer-webpack-plugin in a Typescript project should trigger this.

Please paste the results of `npx webpack-cli info` here, and mention other relevant information

forge [get-css-smaller-nh] $ npx webpack-cli info

  System:
    OS: macOS 11.6.1
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 1.35 GB / 32.00 GB
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 91.4.0
    Safari: 15.2
  Packages:
    css-loader: ^6.2.0 => 6.5.1
    css-minimizer-webpack-plugin: ^3.1.4 => 3.3.0
    csv-loader: ^3.0.3 => 3.0.3
    filemanager-webpack-plugin: ^6.1.4 => 6.1.7
    html-webpack-plugin: ^5.3.2 => 5.5.0
    style-loader: ^3.2.1 => 3.3.1
    ts-loader: ^9.2.3 => 9.2.6
    webpack: ^5.45.1 => 5.65.0
    webpack-bundle-analyzer: ^4.5.0 => 4.5.0
    webpack-cli: ^4.7.2 => 4.9.1
    webpack-dev-server: ^3.11.2 => 3.11.3
    xml-loader: ^1.2.1 => 1.2.1

I suspect that if you change the type to point at postcss instead of cssnano/node_modules/postcss that this error will go away, but you may need to add @types/postcss to your dependencies.

The text was updated successfully, but these errors were encountered:

alexander-akait · 2021-12-21T09:40:42Z

Postcss has own types, we don't need to install @types/postcss, check it out https://github.com/postcss/postcss/tree/main/lib, run npm ls postcss

alexander-akait · 2021-12-21T10:11:37Z

But yes, interesting, we don't use this import directly (ts generates it), look at source code https://github.com/webpack-contrib/css-minimizer-webpack-plugin/blob/master/src/utils.js#L8, looks like @types/cssnano is broken, we planned to add types to cssnano, but it is not implemented yet, it should fix the problem, I am afraid we can't fix it here

MynockSpit · 2021-12-21T17:33:56Z

Oh dumb. I thought I saw it in my deps somewhere, but @types/postcss doesn't even exist.

This might be naive, but do we need that line at all? It doesn't appear to actually be used anywhere: https://github.com/search?q=CssNano+repo%3Awebpack-contrib%2Fcss-minimizer-webpack-plugin+NOT+filename%3A.md+NOT+filename%3A.json&type=Code&ref=advsearch&l=&l=

alexander-akait · 2021-12-21T17:38:27Z

hm, can you run npm ls postcss, I think you have postcss v7 and types for postcss v7

alexander-akait · 2021-12-21T17:39:41Z

But yes, you are right we don't need this line, give me time to investigate it

MynockSpit · 2021-12-21T17:47:10Z

I haven't manually installed postcss, and as a result, I have three different versions. Looks like the one for css-minimizer-webpack-plugin is 8.4.5

├─┬ @storybook/addon-docs@6.4.9
│ ├─┬ @storybook/builder-webpack4@6.4.9
│ │ ├─┬ autoprefixer@9.8.8
│ │ │ └── postcss@7.0.39 deduped
│ │ ├─┬ css-loader@3.6.0
│ │ │ ├─┬ icss-utils@4.1.1
│ │ │ │ └── postcss@7.0.39 deduped
│ │ │ ├─┬ postcss-modules-extract-imports@2.0.0
│ │ │ │ └── postcss@7.0.39 deduped
│ │ │ ├─┬ postcss-modules-local-by-default@3.0.3
│ │ │ │ └── postcss@7.0.39 deduped
│ │ │ ├─┬ postcss-modules-scope@2.2.0
│ │ │ │ └── postcss@7.0.39 deduped
│ │ │ ├─┬ postcss-modules-values@3.0.0
│ │ │ │ └── postcss@7.0.39 deduped
│ │ │ └── postcss@7.0.39 deduped
│ │ ├─┬ postcss-flexbugs-fixes@4.2.1
│ │ │ └── postcss@7.0.39 deduped
│ │ ├─┬ postcss-loader@4.3.0
│ │ │ └── postcss@7.0.39 deduped
│ │ └── postcss@7.0.39
│ └─┬ @storybook/core@6.4.9
│   └─┬ @storybook/core-server@6.4.9
│     └─┬ @storybook/manager-webpack4@6.4.9
│       └─┬ css-loader@3.6.0
│         └── postcss@7.0.39 deduped
├─┬ @storybook/builder-webpack5@6.4.9
│ └─┬ css-loader@5.2.7
│   ├─┬ icss-utils@5.1.0
│   │ └── postcss@8.4.4 deduped
│   ├─┬ postcss-modules-extract-imports@3.0.0
│   │ └── postcss@8.4.4 deduped
│   ├─┬ postcss-modules-local-by-default@4.0.0
│   │ └── postcss@8.4.4 deduped
│   ├─┬ postcss-modules-scope@3.0.0
│   │ └── postcss@8.4.4 deduped
│   ├─┬ postcss-modules-values@4.0.0
│   │ └── postcss@8.4.4 deduped
│   └── postcss@8.4.4
├─┬ @storybook/manager-webpack5@6.4.9
│ └─┬ css-loader@5.2.7
│   ├─┬ icss-utils@5.1.0
│   │ └── postcss@8.4.4 deduped
│   ├─┬ postcss-modules-extract-imports@3.0.0
│   │ └── postcss@8.4.4 deduped
│   ├─┬ postcss-modules-local-by-default@4.0.0
│   │ └── postcss@8.4.4 deduped
│   ├─┬ postcss-modules-scope@3.0.0
│   │ └── postcss@8.4.4 deduped
│   ├─┬ postcss-modules-values@4.0.0
│   │ └── postcss@8.4.4 deduped
│   └── postcss@8.4.4
├─┬ css-loader@6.5.1
│ ├─┬ icss-utils@5.1.0
│ │ └── postcss@8.4.4 deduped
│ ├─┬ postcss-modules-extract-imports@3.0.0
│ │ └── postcss@8.4.4 deduped
│ ├─┬ postcss-modules-local-by-default@4.0.0
│ │ └── postcss@8.4.4 deduped
│ ├─┬ postcss-modules-scope@3.0.0
│ │ └── postcss@8.4.4 deduped
│ ├─┬ postcss-modules-values@4.0.0
│ │ └── postcss@8.4.4 deduped
│ └── postcss@8.4.4
└─┬ css-minimizer-webpack-plugin@3.1.4
  ├─┬ cssnano@5.0.14
  │ ├─┬ cssnano-preset-default@5.1.9
  │ │ ├─┬ css-declaration-sorter@6.1.3
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ cssnano-utils@2.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-calc@8.0.0
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-colormin@5.2.2
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-convert-values@5.0.2
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-discard-comments@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-discard-duplicates@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-discard-empty@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-discard-overridden@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-merge-longhand@5.0.4
  │ │ │ ├── postcss@8.4.5 deduped
  │ │ │ └─┬ stylehacks@5.0.1
  │ │ │   └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-merge-rules@5.0.3
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-minify-font-values@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-minify-gradients@5.0.3
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-minify-params@5.0.2
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-minify-selectors@5.1.0
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-normalize-charset@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-normalize-display-values@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-normalize-positions@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-normalize-repeat-style@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-normalize-string@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-normalize-timing-functions@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-normalize-unicode@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-normalize-url@5.0.4
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-normalize-whitespace@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-ordered-values@5.0.2
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-reduce-initial@5.0.2
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-reduce-transforms@5.0.1
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-svgo@5.0.3
  │ │ │ └── postcss@8.4.5 deduped
  │ │ ├─┬ postcss-unique-selectors@5.0.2
  │ │ │ └── postcss@8.4.5 deduped
  │ │ └── postcss@8.4.5 deduped
  │ └── postcss@8.4.5 deduped
  └── postcss@8.4.5

alexander-akait · 2021-12-21T17:48:05Z

And can you run npm ls @types/postcss?

alexander-akait · 2021-12-21T18:03:49Z

Something from dependencies install @types/postcss and ts get it instead of original ts files from postcss, but it is real weird...

alexander-akait · 2021-12-21T18:06:01Z

I found a problem - https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/cssnano/package.json#L4, cssnano types are not updated for v5... let's move types directly

MynockSpit · 2021-12-21T18:13:28Z

And can you run npm ls @types/postcss?

None:

└── (empty)

I don't think @types/postcss exists. At least, not anymore:

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/postcss

alexander-akait · 2021-12-21T18:18:20Z

Yep, types are broken, fixed #147

alexander-akait · 2021-12-21T18:20:12Z

Please try https://github.com/webpack-contrib/css-minimizer-webpack-plugin/releases/tag/v3.3.1

MynockSpit · 2021-12-21T18:29:46Z

Works great! Thank you!

alexander-akait mentioned this issue Dec 21, 2021

fix: cssnano types #147

Merged

6 tasks

alexander-akait closed this as completed in #147 Dec 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PostCSS types not included; TypeError #146

PostCSS types not included; TypeError #146

MynockSpit commented Dec 20, 2021

alexander-akait commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

MynockSpit commented Dec 21, 2021 •

edited

Loading

alexander-akait commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

MynockSpit commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

MynockSpit commented Dec 21, 2021 •

edited

Loading

alexander-akait commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

MynockSpit commented Dec 21, 2021

PostCSS types not included; TypeError #146

PostCSS types not included; TypeError #146

Comments

MynockSpit commented Dec 20, 2021

Bug report

Actual Behavior

Expected Behavior

How Do We Reproduce?

Please paste the results of npx webpack-cli info here, and mention other relevant information

alexander-akait commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

MynockSpit commented Dec 21, 2021 • edited Loading

alexander-akait commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

MynockSpit commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

MynockSpit commented Dec 21, 2021 • edited Loading

alexander-akait commented Dec 21, 2021

alexander-akait commented Dec 21, 2021

MynockSpit commented Dec 21, 2021

Please paste the results of `npx webpack-cli info` here, and mention other relevant information

MynockSpit commented Dec 21, 2021 •

edited

Loading

MynockSpit commented Dec 21, 2021 •

edited

Loading