SASS compiler fails to compile `rgba(#xxx, yy)` value with php 7.4

[TimFoerster]

• OctoberCMS Build: dev-master
• PHP Version: 7.4

Description:

SASS file with

#header {
   background-color: rgba(#333, 0.99);
}

should compile with php 7.4, but fails

related to leafo/scssphp#710

waiting for https://github.com/assetic-php/assetic/tree/2.0/dev migration?

[LukeTowers]

@TimFoerster please try switching to the Laravel 6 branch and let us know if it's still a problem there.

[github-actions]

This issue will be closed and archived in 3 days, as there has been no activity in the last 60 days.
If this issue is still relevant or you would like to see it actioned, please respond and we will re-open this issue.
If this issue is critical to your business, consider joining the Premium Support Program where a Service Level Agreement is offered.

[XIOLog]

I have some problem

[XIOLog]

I have switched to the Laravel 6 branch and a problem still remains

• OctoberCMS Build: master
• PHP Version: 7.4
• Database Engine: MariaDB

Description:

SASS file with

&__overlay {
    background-color: rgba($link, 0.95);
}

I had an error:

/* Trying to access array offset on value of type null */

I have switched to the Laravel 6 branch (wip/laravel-6), but the problem still remains.

[rwcorbett]

for what it's worth it seems to be only that particular CSS function not compiling... I tested these:

$red1: #ff0000;
$red2: #ff00007c;
.journeyChoosePathBtns  {
    button {
        // background: red !important;                  // WORKS
        // background: $red1 !important;                // WORKS
        // background: $red2 !important;                // WORKS
        // background: rgba(200,0,0,0.9) !important;    // WORKS
        // background: rgb(200,0,0) !important;         // WORKS
        // background: rgba(#ff0000,0.9) !important;    // does not compile
        // background: rgba(#f00,0.9) !important;       // does not compile
        // background: rgba($red1,0.9) !important;      // does not compile
    }
}

[LukeTowers]

@jaxwilko if you're feeling bored maybe you could take a look at this?

[jaxwilko]

@rwcorbett when I add your code to a file then include it with:

<link href="{{ ['assets/scss/test.scss']|theme }}" rel="stylesheet">

The output is:

.journeyChoosePathBtns button {
  background: red !important;
  background: #ff0000 !important;
  background: #ff00007c !important;
  background: rgba(200, 0, 0, 0.9) !important;
  background: #c80000 !important;
  background: rgba(255, 0, 0, 0.9) !important;
  background: rgba(255, 0, 0, 0.9) !important;
  background: rgba(255, 0, 0, 0.9) !important; }

In both php7.3 & php7.4

Could you give me a pointer in how to replicate the issue?

[rwcorbett]

Okay let me clarify - we were using this method of calling the stylesheet:

<?php
function onStart() {
    $this->addCss(['assets/scss/test.scss']);
}
?>

Also please note the specific syntax of the SASS rgba function being called rgba( $color, $alpha); (see HERE for reference).

This is the format that does not work:

.journeyChoosePathBtns  {
    button {
        background: rgba(#ff0000,0.9) !important;
    }
}

test.scss ==> test.zip

In your code you are using the 4 param rgba functions. However, when there are only 2 params being passed and something is not parsing that syntax.

Is this due to the SASS lib being used? 'Dart Sass' vs 'LibSass' vs 'Ruby Sass'?

[mjauvin]

@rwcorbett the way I read what @jaxwilko said was that the RESULTING css once compiled was converted to rgba(r, g, b, a), but he used rgba(#rgb, a) in the source scss file.

[mjauvin]

@rwcorbett For reference, I also tested this on 1.1 branch (Laravel 6) using the following:

file assets/scss/test.css:

$red1: #ff0000;
$red2: #ff00007c;

.journeyChoosePathBtns  {
    button {
        background: red !important;
        background: $red1 !important;
        background: $red2 !important;
        background: rgba(200,0,0,0.9) !important;
        background: rgb(200,0,0) !important;
        background: rgba(#ff0000,0.9) !important;
        background: rgba(#f00,0.9) !important;
        background: rgba($red1,0.9) !important;
    }
}

I included this in my layout like below:

<link rel="stylesheet" href="{{ ['assets/scss/test.scss'] | theme }}">

And in my broswer debug tool, I see the following:

[mjauvin]

I also tested including the asset in the page's code section like below, and the result is the same as above:

==
<?php
function onStart() {
    $this->addCss(['assets/scss/test.scss']);
}
?>
==