Issue on postcss 8, node.getIterator() is not a function

vdboor commented 3 years ago

When running this module against the latest postcss config, I get node.getIterator() is not a function:

  PluginError [TypeError]: node.getIterator is not a function
      at LazyResult.visitTick (.../node_modules/postcss/lib/lazy-result.js:484:33)
      at LazyResult.runAsync (.../node_modules/postcss/lib/lazy-result.js:372:30) {

This issue disappears when postcss-clean is removed from the postcss plugins.

Running both on node v14.16 and v15.9.

This is my package.json:

{
  "name": "website-frontend",
  "description": "",
  "version": "0.0.0",
  "private": true,
  "browserslist": [
    ">0.25%",
    "not ie 11",
    "not op_mini all"
  ],  
  "scripts": {
    "gulp": "gulp"
  },  
  "dependencies": {
    "bootstrap": "^4.6.0",
    "bootstrap.native": "^2.0.27",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  },  
  "devDependencies": {
    "autoprefixer": "^10.2.4",
    "cssnano": "^4.1.10",
    "del": "^6.0.0",
    "files-exist": "^1.1.0",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-livereload": "^4.0.2",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^9.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-size": "^3.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-webp": "^4.0.1",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.1",
    "merge-stream": "^2.0.0",
    "postcss": "^8.2.6",
    "postcss-clean": "^1.2.2",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-remove-selectors": "^2.0.1",
    "postcss-sort-media-queries": "^3.4.3",
    "require-dir": "^1.2.0"
  }
}

leodido commented 3 years ago

Hello @vdboor could you please try to use this branch and report if it works fine with PostCss 8? Thanks

vdboor commented 3 years ago

good to know you're working on this! 😃

Pardon for asking, how do I install that branch? I've tried npm install 'leodido/postcss-clean#release/2.x' but that only installs a index.m.js, not an index.js (I'm not that familiar with build tools here)

idmytro commented 3 years ago

It works from branch for me

wearekolossum commented 3 years ago

Hey @leodido ,

using the release/2.x branch and then using rollup gives me this:

[!] (plugin postcss) Error: Loading PostCSS Plugin failed: Cannot find module 'path/to/dir/node_modules/postcss-clean/index.js'. Please verify that the package.json has a valid "main" entry

Just to let you know.

panoply commented 3 years ago

Problem is with how the module is indexed within package.json via main field, rollup users will most likely get complaints.

For anyone seeking a quick solution to this in the meantime

Install clean-css and postcss as deps, eg:

pnpm i clean-css postcss --save-dev

Use the source and simply create a build script.

@leodido

Do you still need Bublé for transpilation? the code will suffice for the vast majority of node versions in circulation, esp in v8 of post-css. Couple if suggestions:

Change the mainand modulefields in the package.json file to:

{
  "main": "./package/index.js",
  "module": "package/index.es.js"
}

You can lean on Rollup for watching and setting environment variables. Another approach you could take in your scriptsinstead of setting a DEV environment variable (which works), you could maybe set prod environment variables, eg:

{
  "scripts": {
    "develop": "rollup -c -w",
    "distrib": "rollup -c --environment prod",
  }
}

This approach will let rollup compose the cjs and es bundles. Changing the current main index.m.js to index.js and use a rollup build config like:

import { terser } from 'rollup-plugin-terser'
import json from '@rollup/plugin-json'
import pkg from './package.json'

export default {
  input: 'index.js',
  output: [
    {
      format: 'cjs',
      file: pkg.main,
      exports: 'named',
      sourcemap: process.env.prod ? false : 'inline'
    },
    {
      format: 'es',
      file: pkg.module,
      sourcemap: process.env.prod ? false : 'inline'
    }
  ],
  external: [ ...Object.keys(pkg.dependencies), 'path' ],
  plugins: [
    json({
      preferConst: true
    }),
    terser({
      warnings: 'verbose'
      , compress: { passes: 2 }
    })
  ]
}

I would submit a PR but I don't want to intrude on your code styling or preferred approaches.

pdehne commented 3 years ago

I am getting the same error, "node.getIterator is not a function" after upgrading to postcss 8. Is there some workaround that can be implemented? I am not sure how to use the workaround @panoply mentioned. I installed clean-css and postcss as dependencies but don't know how to go forward from there. Any help would be very much appreciated.

qzminski commented 3 years ago

I am experiencing the same problem, is there any chance to get it fixed? Seems a bit similar to https://github.com/leodido/postcss-clean/pull/41, or is it not?

panoply commented 3 years ago

I'll fork and provide a solution for you guys this week sometime.

kirb commented 3 years ago

I happened to notice 1.2.0 is missing from the changelog on master, but 1.2.1 and 1.2.2 are present. It seems @leodido released 1.2.0 on npm from the release/2.x branch, but 1.2.1 and 1.2.2 from master, reverting what was in the 1.2.0 release.

Workaround for postcss 8 support for now: Downgrade to postcss-clean@1.2.0.

wearekolossum commented 3 years ago

@kirb thanks for the solution, i can confirm that it works with the latest version of postcss (8.3.5 at the time of writing).