Support » Plugin: LiteSpeed Cache » How to override or edit the generated css file!

  • Resolved lhoucine

    (@lhoucine)


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

    /*
    * 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);
    }

    I want to add a CSS property “font-display:swap” after each “font-face:” or “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 css files 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.

    Thakns

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Hai@LiteSpeed⚡

    (@hailite)

    Hi, we have added couple filters in https://github.com/litespeedtech/lscache_wp/commit/300cd90dd5bf3090c8501fb4f3504540d46c8aef

    It will be included in next release.

    Please manually deploy the changes and give it a try.

    If anything not work, please let us know.

    Bests,
    Hai

    Hello and thank you for your reply,
    I made the indicated modifications by adding the hooks to the plugin core, I purge the cache, then I can see the creation of the static files, but without firing my function !!! which is strange, maybe the wp functions.php are not the right place to update the values or should i put it in a specific action hooks or somewhere else!!

    this is what I did in my functions.php file (under a child-theme):

    
            // hook fire before saving the CCSS file to disk
            // @json_ccss       string      generated ccss content,
            // @ccss_type       string      the type of the current page,
            function my_litespeed_ccss($json_ccss, $ccss_type)
            {
    
                @file_put_contents(ABSPATH . 'my-debug.txt', 'litespeed_ccss [json_ccss] ' . $json_ccss . PHP_EOL, FILE_APPEND);
                @file_put_contents(ABSPATH . 'my-debug.txt', 'litespeed_ccss [ccss_type] ' . $ccss_type . PHP_EOL, FILE_APPEND);
    
            }
    
            ;
    
            // hook fire before saving the static files to disk
            // @content         string  the generated static file content
            // @file_type       string  the file type!!
            // @match           array   maybe the matched regexp values!!
            function my_litespeed_optm_cssjs($content, $file_type, $match)
            {
    
                @file_put_contents(ABSPATH . 'my-debug.txt', 'litespeed_optm_cssjs [content] ' . $content . PHP_EOL, FILE_APPEND);
                @file_put_contents(ABSPATH . 'my-debug.txt', 'litespeed_optm_cssjs [file_type] ' . $file_type . PHP_EOL, FILE_APPEND);
                @file_put_contents(ABSPATH . 'my-debug.txt', 'litespeed_optm_cssjs [match] ' . $match . PHP_EOL, FILE_APPEND);
    
            }
    
            ;
    
            add_filter('litespeed_ccss', 'my_litespeed_ccss', 10, 2);
            add_filter('litespeed_optm_cssjs', 'my_litespeed_optm_cssjs', 10, 3);
       
    • This reply was modified 5 months, 1 week ago by  lhoucine.
    • This reply was modified 5 months, 1 week ago by  lhoucine.

    Sorry, I should wait until files were generated in the background, it works for the CSSS.
    but for the static files , am still getting nothing.
    Thank you.

    Amazing, really amazing it works like a charm, Now the property is auto generated from LS server, I can find the font-display:swap, no need to overwrite CSSS files, for the rest I can Now easily overwrite, and fire my functions before generate any file, Awesome, many thanks

    • This reply was modified 5 months, 1 week ago by  lhoucine.

    For ones who need this feature, I ended up with this beautiful clean snippet, with no hassle:

    
    function my_litespeed_optm_cssjs($content, $file_type, $file_name)
        {
    
            // To get the full static file path you can use the following:
            // $static_file = LSCWP_CONTENT_DIR . '/cache/' . $file_type . '/' . $file_name;
            if ($file_type == 'css'){
                // Add font-display:swap to each css property
                $content =  str_replace('@font-face{','@font-face{font-display:swap;', $content);
            }
    
            return $content;
        }
    
        ;
    
        add_filter('litespeed_optm_cssjs', 'my_litespeed_optm_cssjs', 10, 3);

    Thank to LiteSpeed active team.

    Plugin Author Hai@LiteSpeed⚡

    (@hailite)

    You are most welcome. Happy optimizing~

    Sorry for the inconvenience, but I made a mistake by saying that the problem was solved, indeed working with the cache, always have an unexpected effect, the previous result was the cache of my old function that I implemented before, But the hook “litespeed_ccss” works very well. the issue is with the CSS hook, putting hook in “_static_request_check”
    does absolutely nothing! which is strange! however if I put it in the same file under function “_build_hash_url” at line 922 like this :

    // Add filter
                $content = apply_filters( 'litespeed_optm_cssjs', $content, $file_type, $filename.$file_type ) ;

    It works!
    Thank you again

    Plugin Author Hai@LiteSpeed⚡

    (@hailite)

    Hi @lhoucine,

    This is a good catch! For css optimization we had two places to generate the files. One is the place in line 200 of optimize.class.php as in previous commit I pasted. Another is the realtime generation one (for efficiency) you mentioned which is not in commit yet.

    The amended version is just committed. https://github.com/litespeedtech/lscache_wp/commit/303fbe14638da1c6525b4d4496e2710fc105bc28

    Please try this one.

    Hi @hailite
    Thank you for your support, Amazing work, really Amazing. now it works as expected, on local machine and on production server, Now we can adjust or update the generated CSS and Critical CSS too on the go, the generated CCSS is based on the CSS, so in my case I only need the “litespeed_optm_cssjs” hook, so this is what I did to add a missing property from all plugins and theme, it save a lot of time adding it manually to each class, and we can add features to extend the generated files in future:

    // hook fire before serving the static files
    // @content         string          the generated static file content
    // @file_type       string          the file type, can be "css" or "js"
    // @urls            string/array    the static file url
    function my_litespeed_optm_cssjs($content, $file_type, $urls)
    {
    
        /* To get the full static file path you can try the following:
         if ($urls && $file_type){
            $static_file_path   = (is_array($urls))? $urls[0] : LSCWP_CONTENT_DIR . '/cache/' . $file_type . '/' . basename($urls);
         }
        */
    
        if ($file_type === 'css'){
            // Add font-display:swap to each css property
            $content =  str_replace('@font-face{','@font-face{font-display:swap;', $content);
        }
    
        return $content;
    }
    
    add_filter('litespeed_optm_cssjs', 'my_litespeed_optm_cssjs', 10, 3);
    
    ;

    Tested twice and it works. bye bye Lighthouse font display notice.

    Thank you again

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.