Generated CSS is big

[vardanabhanot]

So I tried to generate critical CSS, but the CSS is like 30,000 characters big. And I tested it with css-tricks.com and it was giving error.
the error I am getting with css-tricks.com is
/index.html.css:2:4: Unknown word

And the configuration I am using is
generate({ base: "critical_css/" + basename, src: url, target: { css: "critical.css", }, width: 1300, height: 900, extract: true, });

Do I need to do something in the config to make it work?
And it is also including inlined CSS too

[bezoerb]

Hey, thanks for using critical:-)
The config looks fine to me... can you post a link to the project or is it private? Otherwise an example which makes it possible to reproduce the issue would be helpful

[vardanabhanot]

Hello,

Just use the above config, as I was just using that and nothing more. And try it on css-tricks.com first, you will be able to reproduce that.
As I later tried to use penthouse directly and everything was working fine in it, so the issue is most probably in the style linter

[bezoerb]

Hey @vardanabhanot,

i tried with css-tricks and i got the same error. The error is caused by an invalid inlined stylesheet

This is fixed in the linked PR.
Regarding the Big resulting critical css i would need to take a look at the original files to debug this

[bezoerb]

Would you test again using the latest version v5.1.0?

[onlinebizsoft]

Look like the tool includes all declaration (even overwritten ones) for every element in the above-the-fold area.
For example we have an element and it has multiple font declaration applied so only one is active and get used but look like all applicable rules will be included

[bezoerb]

@onlinebizsoft could you try again with v5.2.0
I added an option to customize cleancss. See https://github.com/clean-css/clean-css#optimization-levels

[bezoerb]

I'm closing this due to lack of feedback.
Feel free to reopen if there are new insights

[onlinebizsoft]

Sorry I missed the new option. Let me check and get back when I have the result.