How to override or edit the generated css file!

L

lhoucine

Member
#1
#1
Hi
am using the litespeed cache plugin for wordpress, I can't post on the adequate section cause I have no enough permissions! so I posted her ..

I can't figure how to overwrite the generated css file, there is no hook after the creation of css files, am trying to add font-display:swap property after each font-face: , or font-famiy:, I can't find asolution to do it properly, I've created a function inside my functions.php like this :

PHP: 
/*
* Handle Lightroom fonts display
*
* issue: we should update page twice!!
*/
if (!is_admin()){

    add_action('init', function(){

        if (defined('LSCWP_CONTENT_DIR')){

            $update_transient = false;
            $new_css_list = array();
            $old_css_list = get_transient('my_lscwp_css');

            foreach(glob(LSCWP_CONTENT_DIR . '/cache/css/*.css') as $css_file){

                if (is_array($old_css_list)){
                    if (in_array($css_file, $old_css_list)){
                        continue;
                    }
                }

                if ($css_content = @file_get_contents($css_file)){

                    $css_content = str_replace('@font-face{font-family:','@font-face{font-display:swap;font-family:',$css_content);

                    if (@file_put_contents($css_file, $css_content )){
                        $new_css_list[] = $css_file;
                        $update_transient = true;
                    }
                }
            }

            if($update_transient){
                set_transient('my_lscwp_css',$new_css_list);
            }
        }
    },99);
}
The issue with this function is the fact that I should always purge cache 2 times before it takes effect for each page! o_O
Is there any best approach than this ? or a hook afer creating the css files ?

Also how Can I get the name (path) of the generated css file for each page?


Thank you.
 
Last edited:
P

Pong

Administrator
Staff member
#2
#2
Can you clarify a little bit more about the steps you did and what you want to achieve?
For example.
how to overwrite the generated css file
Click to expand...
Do you mean you used LSCWP plugin to minify the css? and then you want to override it? Why? etc.
Do you have css file which needs to be changed constantly?
 
L

lhoucine

Member
#3
#3
Thank you so much for your reply,
as mentioned above, I want to add a CSS property "font-display:swap" after each "font-face:" of "font-family:" property , using only a regular expression search replace function, without touching the original theme or plugin files, also I want to generate a smaller file based on the code coverage (maybe I will try Istanbul.js with Puppeteer ), am planing to create a node.js script that will be fired after the minification is done ... then send purge request to Coudflare to update its cache too ... maybe am thinking the wrong way :rolleyes:
than you again for your replay
 
You must log in or register to reply here.
Top