CSS source code:

body {
  background: #fff;

  > p {
    color: #0005;
  }
}

postcss.config.js

module.exports = {
  plugins: [
    'postcss-nested',
    'postcss-color-hex-alpha',
    'postcss-clean'
  ]
}

with postcss-clean, the output is:

body{background:#fff}

without postcss-clean, the output is:

body {
  background: #fff;
}

body > p {
  color: rgba(0,0,0,0.33333);
}

Environment version information:

"devDependencies": {
  "postcss": "^8.2.4",
  "postcss-clean": "^1.2.0",
  "postcss-color-hex-alpha": "^7.0.0",
  "postcss-loader": "^4.2.0",
  "postcss-nested": "^5.0.3",
  "webpack": "^5.16.0",
  "webpack-cli": "^4.4.0",
  "webpack-dev-server": "^3.11.2"
}

Hi, @leodido,

Issue Description

I noticed that a vulnerability is introduced in [email protected]:
Vulnerability CVE-2021-23382 affects package postcss (versions:<7.0.36,>=8.0.0 <8.2.13): https://snyk.io/vuln/SNYK-JS-POSTCSS-1255640
The above vulnerable package is referenced by [email protected] via:
[email protected] ➔ [email protected]

Since [email protected] (7,316 downloads per week) is referenced by 21 downstream projects (e.g., h5p-nodejs-library 6.2.0 (latest version), nyc-lib 1.4.43 (latest version), @lipemat/js-boilerplate 6.6.0 (latest version), @lumieducation/h5p-html-exporter 8.1.4 (latest version), ah-veeva-exporter 1.4.2 (latest version)), the vulnerability CVE-2021-23382 can be propagated into these downstream projects and expose security threats to them via the following package dependency paths:
(1)@ioiotv/[email protected] ➔ @ioiotv/[email protected] ➔ [email protected] ➔ [email protected]
(2)[email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected]
......

If [email protected].* removes the vulnerable package from the above version, then its fixed version can help downstream users decrease their pain.

Given the large number of downstream users, could you help update your package to remove the vulnerability from [email protected] ?

Fixing suggestions

In [email protected], maybe you can kindly try to perform the following upgrade :
postcss ^6.x ➔ ^7.x;

Note:
[email protected](>=7.0.36 <8.0.0) has fixed the vulnerability CVE-2021-23382.
Of course, you are welcome to share other ways to resolve the issue.^_^

Currently depending on the old release clean-css 3.4.

There are various breaking changes in clean-css 4.0.

Consider an element with id shadow whose Shadow Root has this content:

<span part="a">A</span>
<span part="a b">A B</span>
<span part="a b c">A B C</span>

And a containing root with these rules

#shadow::part(a) { color: red; }
#shadow::part(a b) { font-weight: bold; }
#shadow::part(a b c) { font-size: large; }

Expected

Before processing, the element will display a red A; a red and bold A B; and a red, bold, and large A B C;
I would expect styles to compile to

#shadow::part(a){color:red;}#shadow::part(a b){font-weight:bold;}#shadow::part(a b c){font-size:large;}

Actual

After processing, the styles were transformed to

#shadow::part(a){color:red;}#shadow::part(ab){font-weight:bold;}#shadow::part(abc){font-size:large;}

And the element displays a red A A B A B C, but nothing bold or large.

Thank you for publishing this useful package

Use eslint conventional commit format to do this.

I have to decide whether to enforce it or not.

Hello,

Right now, I'm running postcss first, then clean-css-cli on its result, and using a map file which inlines sources, I manage to trace which files/lines each rule comes from in Chrome dev tools.

For sake of cleanliness though, I tried postcss-clean to see if I could make these 2 steps into a single one. Unfortunately I can't, which I thought you might like to know. Here's what my postcss.config.js looks like at the moment:

module.exports = {
  map: {
    inline: false,
    sourcesContent: true
  },
  plugins: [
    require('postcss-import')({
      path: [
        './css/',
        './fontello/css/'
      ]
    }),
    require('postcss-assets')({}),
    require('autoprefixer')({}),
    require('postcss-image-inliner')({}),
    require('postcss-clean')({
      rebase: false,
      sourceMapInlineSources: true,
      processImport: false
    })
  ]
};

This is the best I can do: the map file contains the CSS it refers to, but it always contains exactly one single source called <input css 1>. No original file names. Disabling postcss-clean restores proper behavior, so it is really at this stage that references to original files are lost.

So for now I'm back to using the two steps, but it'd be neat if we could eventually figure out why this plugin mangles source references.

References:

• code coverage
• recipe

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"
  }
}

Reference here.

TypeError: node.getIterator is not a function
    at LazyResult.visitTick (/Users/calebjasik/Desktop/Github/live.collegemusic.co.uk/node_modules/postcss/lib/lazy-result.js:484:33)
    at LazyResult.runAsync (/Users/calebjasik/Desktop/Github/live.collegemusic.co.uk/node_modules/postcss/lib/lazy-result.js:372:30)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async Promise.all (index 0)
error Command failed with exit code 1.

jasikpark/live.collegemusic.co.uk@b616862

Hi,
thanks for this great package! We use it for years!

But i think, moving to PostCSS 8 in version 1.2.0 was a breaking change.
We have a PostCSS 7 based gulp-postcss task, that breaks after npm install with Error: PostCSS plugin clean requires PostCSS 8..
With "postcss-clean": "^1.1.0" in our package.json NPM loads version 1.2.0 (believing a feature release won't break existing code).

Is it possible to make postcss-clean backwards compatible to PostCSS 7?

Thanks,
Lukas

Generate an ES2015 module build alongside the CommonJS/UMD one.

Call it index.m.js or index.jsm. Since it is very likely that the tools will use file extensions to detect ES modules (as opposed to self-executing scripts).

I tried adding postcss-clean to the config.js doesn't seem to work..what am i missing.

const purgecss = require('@fullhuman/postcss-purgecss');
const clean = require('postcss-clean');
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' &&
      purgecss({
        content: ['./**/*.html'],
      }),
    require('postcss-nested'),
    require('postcss-clean'),
  ],
};

Docs.

This blocks the pending release.

It should refer to an ES6-module entry point that is ready to use.

Actually it refer to ES6 source code. So this puts the burdens on the final user.

Read more here, and here.