CODEWITHSUNDEEP
phpcssregexless
Andrei Surdu
Andrei Surdu

Reputation: 2341

How can I reduce the CSS to a few properties

How can I reduce the CSS/(or)LESS with PHP? From this:

.header-logo-holder{
    display: block;
    float: none;
    text-align: center;
    margin: 10px 0;
    color: #fff;
    background: #333;
    padding-bottom: 15px;
    border-bottom: 1px solid darken(@rw-header-background-color, 10%);
    .logo{
        margin: 0;
    }
    .eg-clearfix();
}

To this:

.header-logo-holder{
    color: #fff;
    background: #333;
    border-bottom: 1px solid darken(@rw-header-background-color, 10%);
}

I want to leave only the rules color, background and border.

Upvotes: 0

Views: 63

Answers (1)

tleb
tleb

Reputation: 4616

Here is my solution:

<?php

//give the file (string) to the function
function keepColorBackgroundBorder($input) {

    //didn't check if the input was correct (string, not empty, etc)

    //we turn the input into an array
    $input = explode("\n", $input);

    //here is the list of strings which must be in a line to keep it in our final string
    $keep = ['{', '}', 'color', 'background', 'border'];

    $result = '';

    //foreach over the lines of the input
    foreach ($input as $key => $value) {

        //foreach over each characters we want to keep
        foreach ($keep as $key => $value2) {

            //if the characters are somewhere in the line
            if (strpos($value, $value2) !== false) {

                //we add the line + a newline character
                $result .= $value . "\n";

                //we stop the check for characters as we don't want a line to be included twice
                //e.g: border-bottom: 1px solid darken(@rw-header-background-color, 10%);
                //this example contains border and background
                break;
            }
        }
    }

    //we return the result, end delete the last newline character
    return trim($result);
}

//we get the file as a string
$input = file_get_contents('file.css');

//we call the function and we look at what was outputted
echo keepColorBackgroundBorder($input);

There is probably too much comments, but it's better too much than not enough.

I used an array so that it is easy to change if you want to. For example, you could have ['background:', 'border:', 'border-bottom:'] etc to be sure that a line is not included if it contains an allowed word somewhere else than at the start, like border-bottom: 1px solid darken(@rw-header-background-color, 10%); which contains background, but not background:.

If file.css contains:

.header-logo-holder{
    display: block;
    float: none;
    text-align: center;
    margin: 10px 0;
    color: #fff;
    background: #333;
    padding-bottom: 15px;
    border-bottom: 1px solid darken(@rw-header-background-color, 10%);
    .logo{
        margin: 0;
    }
    .eg-clearfix();
}

You will get:

.header-logo-holder{
    color: #fff;
    background: #333;
    border-bottom: 1px solid darken(@rw-header-background-color, 10%);
    .logo{
    }
}

Upvotes: 2

Related Questions