Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

clean-css removes named @page selectors

See original GitHub issue

We recently upgraded gulp-clean-css and clean-css along with it. Previously we were using clean-css 3.4.27 and we now use clean-css 4.1.4.

Since the upgrade the CSS we use for generating printed media does no longer work. We use @page selectors and also named pages (@page page_name) as defined here: https://www.w3.org/TR/REC-CSS2/page.html#named-pages The CSS is consumed by PrinceXML and may contain Prince specific properties (like content: prince-script(datestamp);)

The problem I’m seeing is that the @page selector remains in the generated CSS but the named page selector is removed.

Environment

clean-css version - npm ls clean-css: clean-css@4.1.4
node.js version - node -v: node@v6.10.1
operating system: Ubuntu 17.04

Configuration options

var CleanCSS = require('clean-css');
new CleanCSS({format: 'beautify'}) or no options

Input CSS

The input CSS is generated from a Less file. This one only contains the relevant parts.

@page {
  margin: 50px 60px 50px 60px;
  padding-top: 20px;
  padding-bottom: 10px;
  counter-increment: page;
  border-bottom: 1px solid #dcdcdc;
  @bottom-left {
    font-family: 'Arial';
    font-size: 8pt;
    color: #9f9c9c;
    padding-left: 0;
    padding-bottom: 25px;
    content: prince-script(datestamp);
  }
}
@page report_content {
  border-top: 1px solid #dcdcdc;
  @top-left {
    font-family: 'Arial';
    font-size: 8pt;
    color: #9f9c9c;
    padding-left: 0;
    padding-top: 25px;
    content: prince-script(topLeftHeader);
  }
  @top-right {
    font-family: 'Arial';
    font-size: 8pt;
    color: #9f9c9c;
    padding-right: 0;
    padding-top: 25px;
    content: prince-script(topRightHeader, string(current_section));
  }
  @bottom-right {
    font-family: 'Arial';
    font-size: 10pt;
    font-weight: bold;
    padding-right: 0;
    padding-bottom: 25px;
    content: "Page " counter(page) " of " counter(pages);
  }
  @footnotes {
    border-top: 1px solid #dcdcdc;
    margin-top: 15px;
    padding-top: 8px;
  }
}
@page report_content_landscape {
  size: A4 landscape;
}

Actual output CSS

The output css is created with the beautify option. The problem also appears when not using this oiption

@page {
  margin: 50px 60px 50px 60px;
  padding-top: 20px;
  padding-bottom: 10px;
  counter-increment: page;
  border-bottom: 1px solid #dcdcdc;
  font-size: 8pt;
  color: #9f9c9c;
  padding-left: 0;
  padding-bottom: 25px;
  content: prince-script(datestamp)
}
@top-right {
  font-family: Arial;
  font-size: 8pt;
  color: #9f9c9c;
  padding-right: 0;
  padding-top: 25px;
  content: prince-script(topRightHeader,string(current_section))
}
@bottom-right {
  font-family: Arial;
  font-size: 10pt;
  font-weight: 700;
  padding-right: 0;
  padding-bottom: 25px;
  content: "Page " counter(page) " of " counter(pages)
}
@footnotes {
  border-top: 1px solid #dcdcdc;
  margin-top: 15px;
  padding-top: 8px
}