is a space before `!important` important in some cases, and if so, when? And why?

Question

I've been experimenting with scssphp, a PHP SCSS compiler, and specifically its compressed formatter.

This outputs something like (notice the extra whitespaces and the semicolon before the closed curly brace)

.navbar{margin-bottom  :0px !important;margin-top    :4px;}

and so I thought of implementing this small modification to shave a few bits off the resulting code.

^{I know it makes little sense, in that I will save at most some percents in size; and I'm removing low-entropy information, which means that once I gzcompress it, the savings will be even smaller; while the modification will then have to be maintained. But it seemed easy enough, and harmless enough, and I... sort of did it for the lulz.}

4225    public function format($block) {
4226        ob_start();
4227        this->block($block);
4228        $out = ob_get_clean();
4229---     return $out;                        // OLD
4229+++     return $this->postprocess($out);    // NEW
4230    }

The postprocessing function is dummy on the parent formatter, above:

4232    protected function postprocess($text) {
4233        return $text;
4234    }

...while in scss_formatter_compressed I perform some replacements:

+++ from line 4343:

protected function postprocess($text) {
    $xlat = array(
        '#\\s+(:\\d)#'          => '\\1',
        '#;}#'                  => '}',
        '#\\s+(!important)#'    => '\\1', 
    );
    return preg_replace(
        array_keys($xlat),
        array_values($xlat),
        $text);
} 

Now the output is:

.navbar{margin-bottom:0px!important;margin-top:2px}

...and for simple SCSSs it works. I have tested it on a large and complicated SCSS hierarchy, and some elements break.

I have the sensation that it involves the !important clause. I have done a not really extensive research, and found this on the YUI-compressor site, where on the one hand they conclude

@tml @namanyayg Could you provide any examples where stripping a space before '!important' leads to a broken styling?

We got the similar request in https://github.com/GoalSmashers/clean-css but without a test case it's not possible to verify if you made a mistake or if there is a very specific case where the space has to be there.

According to our tests it is OK to get rid of it. What's more such code has been used in production for couple years now without any issues.

On the other hand the OP had some problems, and they seemed to be related to a space before !important.

Now if it is a CSS-standards issue I want to fix my take on scssphp; if it is a problem of that one SCSS, I of course want my SCSS files fixed. Given the sheer size and complexity of the folder in question, I thought to ask here before delving into its unplumbed depths.

Answer 1

No space is required. According to CSS syntax,

4. While the current input token is anything other than an <EOF-token>, append it to the declaration’s value and consume the next input token.
5. If the last two non-<whitespace-token>s in the declaration’s value are a <delim-token> with the value "!" followed by an <ident-token> with a value that is an ASCII case-insensitive match for "important", remove them from the declaration’s value and set the declaration’s important flag to true.