Parsing RGB with alpha is broken

[masoudnkh]

i use php-css-parser but not coverage this code:

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: rgb(240 240 240 / 10%)!important;
}

remove unused css code and good work for all code but when i exclude ".wp-block-table.is-style-stripes" the output is empty like:

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
}

[oliverklee]

Hi @masoudnkh, thanks for reporting this issue.

I still don't quite understand the problem. Could you please post the exact CSS you parse, the code you execute, and the CSS you get back, and the CSS you'd expect to get back? Thanks!

[oliverklee]

Also, could you please post which version of PHP-CSS-Parser you're using?

[colethorsen]

PHP-CSS-Parser v 8.7.0

It appears as though the parser doesn't support rgb with alpha
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb

.countdown_field {
	border: 1px solid rgb(var(--text) / .35);
	width: 120px;
}

or

.countdown_field {
	border: 1px solid rgb(255 255 255 / .35);
	width: 120px;
}

$oCssParser   = new \Sabberworm\CSS\Parser($this->css);
$oCssDocument = $oCssParser->parse();

$rules = $oCssDocument->getAllRuleSets();

yields:

Sabberworm\CSS\RuleSet\DeclarationBlock Object
(
    [aSelectors:Sabberworm\CSS\RuleSet\DeclarationBlock:private] => Array
        (
            [0] => Sabberworm\CSS\Property\Selector Object
                (
                    [sSelector:Sabberworm\CSS\Property\Selector:private] => .countdown_field
                    [iSpecificity:Sabberworm\CSS\Property\Selector:private] => 
                )

        )

    [aRules:Sabberworm\CSS\RuleSet\RuleSet:private] => Array
        (
            [width] => Array
                (
                    [0] => Sabberworm\CSS\Rule\Rule Object
                        (
                            [sRule:Sabberworm\CSS\Rule\Rule:private] => width
                            [mValue:Sabberworm\CSS\Rule\Rule:private] => Sabberworm\CSS\Value\Size Object
                                (
                                    [fSize:Sabberworm\CSS\Value\Size:private] => 120
                                    [sUnit:Sabberworm\CSS\Value\Size:private] => px
                                    [bIsColorComponent:Sabberworm\CSS\Value\Size:private] => 
                                    [iLineNo:protected] => 625
                                )

                            [bIsImportant:Sabberworm\CSS\Rule\Rule:private] => 
                            [aIeHack:Sabberworm\CSS\Rule\Rule:private] => Array
                                (
                                )

                            [iLineNo:protected] => 625
                            [iColNo:protected] => 11624
                            [aComments:protected] => Array
                                (
                                )

                        )

                )

        )

    [iLineNo:protected] => 623
    [aComments:protected] => Array
        (
        )

)

Switching to rgba works:

.countdown_field {
	border: 1px solid rgba(255, 255, 255, .35);
	width: 120px;
}

Sabberworm\CSS\RuleSet\DeclarationBlock Object
(
    [aSelectors:Sabberworm\CSS\RuleSet\DeclarationBlock:private] => Array
        (
            [0] => Sabberworm\CSS\Property\Selector Object
                (
                    [sSelector:Sabberworm\CSS\Property\Selector:private] => .countdown_field
                    [iSpecificity:Sabberworm\CSS\Property\Selector:private] => 
                )

        )

    [aRules:Sabberworm\CSS\RuleSet\RuleSet:private] => Array
        (
            [border] => Array
                (
                    [0] => Sabberworm\CSS\Rule\Rule Object
                        (
                            [sRule:Sabberworm\CSS\Rule\Rule:private] => border
                            [mValue:Sabberworm\CSS\Rule\Rule:private] => Sabberworm\CSS\Value\RuleValueList Object
                                (
                                    [aComponents:protected] => Array
                                        (
                                            [0] => Sabberworm\CSS\Value\Size Object
                                                (
                                                    [fSize:Sabberworm\CSS\Value\Size:private] => 1
                                                    [sUnit:Sabberworm\CSS\Value\Size:private] => px
                                                    [bIsColorComponent:Sabberworm\CSS\Value\Size:private] => 
                                                    [iLineNo:protected] => 624
                                                )

                                            [1] => solid
                                            [2] => Sabberworm\CSS\Value\Color Object
                                                (
                                                    [sName:protected] => rgba
                                                    [aComponents:protected] => Array
                                                        (
                                                            [r] => Sabberworm\CSS\Value\Size Object
                                                                (
                                                                    [fSize:Sabberworm\CSS\Value\Size:private] => 255
                                                                    [sUnit:Sabberworm\CSS\Value\Size:private] => 
                                                                    [bIsColorComponent:Sabberworm\CSS\Value\Size:private] => 1
                                                                    [iLineNo:protected] => 624
                                                                )

                                                            [g] => Sabberworm\CSS\Value\Size Object
                                                                (
                                                                    [fSize:Sabberworm\CSS\Value\Size:private] => 255
                                                                    [sUnit:Sabberworm\CSS\Value\Size:private] => 
                                                                    [bIsColorComponent:Sabberworm\CSS\Value\Size:private] => 1
                                                                    [iLineNo:protected] => 624
                                                                )

                                                            [b] => Sabberworm\CSS\Value\Size Object
                                                                (
                                                                    [fSize:Sabberworm\CSS\Value\Size:private] => 255
                                                                    [sUnit:Sabberworm\CSS\Value\Size:private] => 
                                                                    [bIsColorComponent:Sabberworm\CSS\Value\Size:private] => 1
                                                                    [iLineNo:protected] => 624
                                                                )

                                                            [a] => Sabberworm\CSS\Value\Size Object
                                                                (
                                                                    [fSize:Sabberworm\CSS\Value\Size:private] => 0.35
                                                                    [sUnit:Sabberworm\CSS\Value\Size:private] => 
                                                                    [bIsColorComponent:Sabberworm\CSS\Value\Size:private] => 1
                                                                    [iLineNo:protected] => 624
                                                                )

                                                        )

                                                    [sSeparator:protected] => ,
                                                    [iLineNo:protected] => 624
                                                )

                                        )

                                    [sSeparator:protected] =>  
                                    [iLineNo:protected] => 624
                                )

                            [bIsImportant:Sabberworm\CSS\Rule\Rule:private] => 
                            [aIeHack:Sabberworm\CSS\Rule\Rule:private] => Array
                                (
                                )

                            [iLineNo:protected] => 624
                            [iColNo:protected] => 11582
                            [aComments:protected] => Array
                                (
                                )

                        )

                )

            [width] => Array
                (
                    [0] => Sabberworm\CSS\Rule\Rule Object
                        (
                            [sRule:Sabberworm\CSS\Rule\Rule:private] => width
                            [mValue:Sabberworm\CSS\Rule\Rule:private] => Sabberworm\CSS\Value\Size Object
                                (
                                    [fSize:Sabberworm\CSS\Value\Size:private] => 120
                                    [sUnit:Sabberworm\CSS\Value\Size:private] => px
                                    [bIsColorComponent:Sabberworm\CSS\Value\Size:private] => 
                                    [iLineNo:protected] => 625
                                )

                            [bIsImportant:Sabberworm\CSS\Rule\Rule:private] => 
                            [aIeHack:Sabberworm\CSS\Rule\Rule:private] => Array
                                (
                                )

                            [iLineNo:protected] => 625
                            [iColNo:protected] => 11626
                            [aComments:protected] => Array
                                (
                                )

                        )

                )

        )

    [iLineNo:protected] => 623
    [aComments:protected] => Array
        (
        )

)

[JakeQZ]

It appears as though the parser doesn't support rgb with alpha https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb

.countdown_field {
	border: 1px solid rgb(var(--text) / .35);
	width: 120px;
}

This may be due to incorrect parsing order of 'separators' within values, where / is included as a potential separator. See #791.

[sabberworm]

This may be due to incorrect parsing order of 'separators' within values, where / is included as a potential separator. See #791.

AFAIK the mentioned listDelimiterForRule is only used to determine the delimiter to use for the plain value of a property, not for functions like rgb.

[JakeQZ]

AFAIK the mentioned listDelimiterForRule is only used to determine the delimiter to use for the plain value of a property, not for functions like rgb.

That's what I thought. I just noticed that the slashes seemed to be causing the problem. Will need looking into in more detail...

[JakeQZ]

It appears as though the parser doesn't support rgb with alpha
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb

Yes, that's the case. It only supports CSS level 3 for colors at the moment. Since it parses colors specifically (and not as some generic CSS function), we'll need to update it to support the level 4 (and then level 5) syntax.

I added some tests in #793 to help identify what currently works, and what doesn't.

I think support for level 4 at first, then level 5, are not too onerous. The alternative is to drop specific handling of the color functions, instead treating them as a generic CSS function. But that could be even more messy, and result in removal of a valuable feature.

If you'd like to get involved with W3C, and perpahps propose syntaxes that are more parsable, you can do so here: https://www.w3.org/get-involved/