New lines not created after comments within :root selectors

[overdodactyl]

Environment

• clean-css version - npm ls clean-css:
  ├─┬ clean-css-cli@4.1.10
  │ └── clean-css@4.1.9
  └─┬ gulp-clean-css@3.9.0
  └── clean-css@4.1.9 deduped

• node.js version - node -v: v8.9.3

• operating system: macOS 10.13

Configuration options

cleancss -o test.min.css -f beautify test.css

or, alternatively,

'use strict';

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');


gulp.task('minify-css', () => {
  return gulp.src(['test.css'])
    .pipe(cleanCSS({
      level : 2 ,
      format: 'beautify'
    }))
    .pipe(gulp.dest('./test.min.css'));
});

Input CSS

:root {
  --example-1: 1;
  /*! Comment 1 inside root */
  /*! Comment 2 inside root */
  --example-2: 2;
  --example-3: 3;
}

/*! Comment 1 outside root */
/*! Comment 2 outside root */
#example {
  color: blue;
}

Actual output CSS

:root {
  --example-1: 1;
  /*! Comment 1 inside root *//*! Comment 2 inside root */--example-2: 2;
  --example-3: 3
}
/*! Comment 1 outside root */
/*! Comment 2 outside root */
#example {
  color: #00f
}

Expected output CSS

:root {
  --example-1: 1;
  /*! Comment 1 inside root */
  /*! Comment 2 inside root */
  --example-2: 2;
  --example-3: 3
}
/*! Comment 1 outside root */
/*! Comment 2 outside root */
#example {
  color: blue
}

As seen above, if there are any comments within :root, the line breaks after them are removed (this is in contrast to comments outside of :root selectors). This also occurs if you use specify afterComment: true in the breaks formatting option. To me, it doesn't seem like this should be expected behavior, but I apologize if it is :)

[overdodactyl]

Just to add to this, it seems like there are a few other inconsistencies when comments are kept inside some form of bracket. For example,

@media screen and (-moz-windows-theme) {
  /*! Comment inside @media */
  #sample {
    /*! Comment inside id */
    color:red;
  }
}
@media screen and (-moz-windows-theme) {
  #sample {
    color:red;
  }
}

gets reduced to

@media screen and (-moz-windows-theme) {
  /*! Comment inside @media */
#sample {
    /*! Comment inside id */color: red
  }
}
@media screen and (-moz-windows-theme) {
  #sample {
    color: red
  }
}

In the above example, a comment inside @media does get a newline after it, but the one inside #sample does not. Additionally, the indent level seems to be get lost in #sample when keeping a comment.

[jakubpawlowicz]

Yup, it doesn't work as intended, thanks for 👍 bug report.