Media queries in the generated .css file see seem inserted in the wrong line numbers

[alecarg]

Media queries in the generated .css file see seem inserted in the wrong line numbers

[pocketjoso]

Hello again.

I can't see anything wrong with your code usage. My best guess would be that one of the rules in one of your CSS files is missing a closing bracket (}), causing rules that follow it to be swallowed in the parsing step in Penthouse. Given what you've said, it would most likely be a media query that is missing the closing bracket. Can you double check in these files? If you want, you can review how the CSS parser penthouse uses (csstree) sees your CSS files by:

1. go to https://astexplorer.net/
2. change language from JavaScript to CSS
3. change parser from cssom to csstree
4. paste in your css content in the left side

If all rules in your css files are properly closed then I'm afraid I don't know what's going wrong. To debug further I would need a reproducible test case (with a URL I can test with).

[pocketjoso]

Hello, thanks for the kind words!

Are using Penthouse directly, i.e. merging your two css sources and passing them in as a cssString? Or are you using another tool?

If you are using penthouse directly, this sounds like a bug. You should not have to move the media queries for it to work without glitches.

To investigate what happens I would need to have a reproducible test case - or at least the URL this happens on.

[alecarg]

@pocketjoso according to what you mention, I seem to be using Penthouse directly. I went in and downloaded the two stylesheets manually, and then passed them in as cssFiles ie.

cssFiles: [
    './6f823b0b21dbc62e6df437891dca1004.min.css',
    './styles-l.min.css'
  ],

.. in the same order as they are presented in the website.

Unfortunately I can't provide you with the URL this is happening on as it's a commercial project, but hopefully the above is enough to attempt to reproduce?

[pocketjoso]

Hello again.

Penthouse doesn't have any option for called cssFiles, so not sure you are using it directly. Can you share the full code when you call it, with all options? You can obscure the URL if you cannot share it.

[alecarg]

@pocketjoso apologies, cssFiles was a customisation in my project. Yes, I am using cssString and concatenating 2 different files into a single string.

This is an extract of the config:

penthouseOptions = {
    cssString: '',
    blockJSRequests: false,
    renderWaitTime: 15000,
    timeout: (urls.length * 90000),
    forceInclude: opts.selectors.include,
    forceExclude: opts.selectors.exclude
  };
  if (opts.height){
    penthouseOptions.height = opts.height;
  }
  if (opts.width){
    penthouseOptions.width = opts.width;
  }

As an example, since I'm using a Magento2 codebase, you could try a live demo: https://demo-m2.bird.eu/

--

Full code below:

const penthouse = require('penthouse');
const fs = require('fs');
const path = require('path');
const dirname = path.resolve(__dirname);
var urls,
    filename,
    penthouseOptions;

function init(opts){
  urls = opts.urls;
  filename = opts.filename;
  setPenthouseOptions(opts);
  getCSSContents(opts.cssFiles);
}

function setPenthouseOptions(opts){
  penthouseOptions = {
    cssString: '',
    blockJSRequests: false,
    renderWaitTime: 15000,
    timeout: (urls.length * 90000),
    forceInclude: opts.selectors.include,
    forceExclude: opts.selectors.exclude
  };
  if (opts.height){
    penthouseOptions.height = opts.height;
  }
  if (opts.width){
    penthouseOptions.width = opts.width;
  }
}

function getCSSContents(cssFiles){
  var processed = 0;
  for (var i = 0; i < cssFiles.length; i++) {
    fs.readFile(dirname + '/css-source/' + cssFiles[i], 'utf8' , (err, data) => {
      if (err) {
        console.error(err)
        return
      }
      processed++;
      penthouseOptions.cssString += data;
      if (processed === cssFiles.length){
        startExtraction();
      }
    })
  }
}

function startExtraction(){
  Promise.all([
    startNewJob()
  ]).then(() => {
    console.log('Extraction finished.')
  })
}

function startNewJob () {
  const url = urls.pop()
  if (!url) {
    return Promise.resolve()
  }
  penthouseOptions.screenshots = {
      basePath: dirname + '/generated/' + filename + '-screenshot-' + (urls.length + 1),
      type: 'jpeg',
      quality: 20
  }
  console.log(filename + '-' + (urls.length + 1) + ': ' + url);
  return penthouse({
    url,
    ...penthouseOptions
  })
    .then(criticalCss => {
      fs.writeFileSync(dirname + '/generated/' + filename + '-extraction-' + (urls.length + 1) + '.css', criticalCss);
      return startNewJob()
    })
}

module.exports = init;

and

const extraction = require('./_extraction.js')
const path = require('path')


const opts = {
  filename: path.basename(__filename).replace('.js', ''),
  urls: [
    'removed.com'
  ],
  cssFiles: [
    './1592ed3f401e117a96d461d05abc6bfb.min.css',
    './styles-l.min.css'
  ],
  selectors: { // regex accepted
    include: [
      /.*\.icon.*/
    ],
    exclude: [
      /.*\.catalog-category-view.*/ // as we're using a PLP URL
    ]
  }
}
  
extraction(opts);

[pocketjoso]

Closing due to inactivity. If you have an update regarding the issue, just post it and we can re-open the issue.