philipp-winterle / crittr

High performance critical css extraction with a great configuration abilities

Home Page:https://hummal.github.io/crittr/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add an option to remove specific CSS declarations

imtheu opened this issue · comments

Is your feature request related to a problem? Please describe.
Not all properties are essential in critical CSS. For example, properties such as cursor, color, or border-radius may not need to be included in the final critical CSS. Therefore, it would be incredibly beneficial to have an option to exclude certain declarations from the final critical CSS, which would reduce the overall size.

Describe the solution you'd like
A potential solution could be to introduce a removeDeclarations option

Describe alternatives you've considered
We could use the postcss-discard plugin for this purpose. It accepts a String, RegExp, or a Function to specify which declarations to exclude.

Original CSS:

.pseudo-selector::before {
    color: silver;
    content: 'pseudo ::before';
}

Crittr:

Crittr({
    removeDeclarations: [/color/]
})

Final CSS:

.pseudo-selector::before {
-    color: silver;
    content: 'pseudo ::before';
}

I am willing to contribute and open a PR if you are interested.

Critical CSS or also known as Above the Fold - CSS is a description of what CSS is needed to display a website without any movement or changes in the ATF region. This means also color and border radius.

I understand if you want to reduce the amount of css rules and properties. But if you want the real critical css then you also need color and border-radius.

I understand your request more like: I wish to remove properties as these are not important to me.
If they wouldn't be critical, they would have been removed from the whole output.

So I see some problems with this option but also customizability.

PR always a good thing :)

Thanks