postcss v8 incompatibility: error TS2503: Cannot find namespace 'postcss'

[btakita]

As of 4.3.2:

error TS2503: Cannot find namespace 'postcss'

plugins?: postcss.AcceptedPlugin[];

It looks like there's a peer dependency

"postcss": "^7.0.32",

Need to include v8 in the peer dependency check.

[lukeed]

I think this can be any of:

• `"postcss": "^7.0.32 || ^8",
• "postcss": ">7.0.32",
• "postcss": "*",

I don't think everyone will be ready to upgrade to 8.0, even though the migration process is minor. Would also have to check if the postcss config loader package changed.

[btakita]

I added pnpmfile.js to force postcss: ^8.0.9 & still get the error.

module.exports = {
  hooks: {
    readPackage (pkg) {
      switch (pkg.name) {
        case 'svelte-preprocess':
          pkg.peerDependencies['postcss'] = '^8.0.9'
          break
      }
      return pkg
    }
  }
}

error TS2503: Cannot find namespace 'postcss'

plugins?: postcss.AcceptedPlugin[];

It appears I made an assumption. There is a different issue w/ pnpm, typescript, svelte-preprocess, & my tsconfig.json?

The package has both svelte-preprocess & postcss in it's local node_modules directory. I'm at a loss as to why this type check failed. Will be debugging my tsconfig.json.

---

I looked at the source of the postcss package & cannot locate the postcss namespace, as referenced in svelte-preprocess.

svelte-preprocess/src/types/options.ts

Lines 21 to 25 in 076e9f3

	export type Postcss = postcss.ProcessOptions & {
	plugins?: postcss.AcceptedPlugin[];
	// custom
	configFilePath?: string;
	} & ContentModifier;

From within the postcss git source code

grep namespace -r --exclude-dir node_modules *
docs/plugins.md:* [`postcss-namespace`] prefix a namespace to a selector.
docs/plugins.md:* [`postcss-class-prefix`] adds a prefix/namespace to class selectors.
docs/plugins.md:* [`postcss-plugin-namespace`] add a css selector to all rules, so that css file don't affect other element.
docs/plugins.md:[`postcss-namespace`]:                    https://github.com/totora0155/postcss-namespace
docs/plugins.md:[`postcss-plugin-namespace`]:             https://github.com/ymrdf/postcss-plugin-namespace
yarn.lock:"@babel/plugin-proposal-export-namespace-from@^7.10.4", "@babel/plugin-proposal-export-namespace-from@^7.8.3":
yarn.lock:  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.10.4.tgz#570d883b91031637b3e2958eea3c438e62c05f54"
yarn.lock:    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
yarn.lock:"@babel/plugin-syntax-export-namespace-from@^7.8.3":
yarn.lock:  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
yarn.lock:    "@babel/plugin-proposal-export-namespace-from" "^7.10.4"
yarn.lock:    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
yarn.lock:    "@babel/plugin-proposal-export-namespace-from" "^7.8.3"

---

Aha, version 7 of postcss has declare namespace postcss in it. Looks like version 8 removed the postcss namespace.

[kaisermann]

Hey, 👋 the way postcss exported its types changed. Using import type * as postcss from 'postcss' seems to work in both 7 and 8 in my local tests.

Fixed in v4.4.3