Please provide documentation for --ignore for cli

[e-gaulue]

How to translate:

  // ignore CSS rules
  ignore: {
    atrule: ['@font-face'],
    rule: [/some-regexp/],
    decl: (node, value) => /big-image\.png/.test(value),
  },

when using cli.

By the way, --dimensions W1xH1,W2xH2 didn't work for me while stated in #457:

Error: ConfigError: "dimensions" must be an array

Hopefully: --dimensions W1xH1 --dimensions W2xH2 did. Good to know we can use this option multiple times.

Best regards,

[e-gaulue]

Reading the code, I would say:

critical --ignore "{atrule: ['@font-face'], rule: [/some-regexp/], decl: (node, value) => /big-image\.png/.test(value)}"

Sorry for the noise, it's just I'm not used to put a JS string as an option in a shell command. But, I think I'll see more and more, so never mind.

Regards,

[bezoerb]

Hmm... i've never tried using critical on the cli like this but it looks very inconvenient :) Maybe we should add an option to use a config file which exports the options?

[e-gaulue]

I thought it was working because I received no error msg, but my @font-face and url(...) are still in my critical results so it has not been ignore.

cli.js is not so easy to understand for me.

If anyone has any cmd line idea to achieve this, I can try.

PS: I'm moving from a local gulp script to a Debian server cli.

Regards,

[e-gaulue]

Ok I think I've got it: critical --ignore-atrule "@font-face" ... has removed my @font-face.

I'm looking for decl and will tell more.

According to me it's just a lack of example in the documentation. We try to rely on the JS one...

[dineshtrivedi]

Hello @e-gaulue , I hope you are well.

Are you using the decl option? I couldn't make it work via the command line or JS version. As a test, I even wrote a configuration for the JS version to reject everything as:

ignore: {
    decl: (node, value) => false,
},

Also:

ignore: {
    decl: (node, value) => {
        return false
    }
},

I couldn't make it work. Do you have any example which you manage decl to work?

What do I want to do?

I have two font-faces, the first uses a local font with the new size-adjust property, and the second downloads a file. I want to make the first one critical, but not the second. The second I also will only download based on user configuration of data saver mode or not.

My font-face CSS:

@font-face {
  font-family: "Quicksand-fallback";
  size-adjust: 104.34%;
  src: local("Arial");
}


@font-face {
    font-family: 'Quicksand';
    font-display: optional;
    src: url('../../../fonts/Quicksand-latin-6xKtdSZaM9iE8KbpRA_hK1QN_regular_bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Other attempts

decl: (node, value) => {
    console.log(`node: ${node} and value: ${value}`)
    return /src/.test(value) || /vmps-fonts\.woff2/.test(value)
}

// also

decl: (node, value) => /url\(/.test(value)

I would really appreciate any assistance.

Thank you!

[e-gaulue]

@dineshtrivedi, it's long ago and my brain is getting old.

In fact I had no need for decl. I though I did because I've seen this code on the site I've refurbished, but it was just a copy/paste from the previous maintainer.

All I remember about critical is you have to go and look at the code if you want to understand how to use options. But, on the other side, it's free.

Regards,

[dineshtrivedi]

hahaha, thanks for your response @e-gaulue

No problem, I am on the mission of checking the code at the moment. Thank you again.

[george-gca]

I believe this is still needed since after too much guessing I finally found this issue here, and one comment that helped a lot. Also finally found this line in code that explains why it should be used this way.