October: 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 https://github.com/leafo/scssphp/pull/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[bot]]

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']);
}
?>
==

[mjauvin]

Just tested on branch 1.0 (Laravel 5.5) and it works the same...

[LukeTowers]

Closing unless someone can provide detailed reproduction instructions.

[rwcorbett]

Thanks @LukeTowers & @mjauvin et al... it is definitely not 'mission critical' enough to explore further debugging, I think for sure close this. It might just be a PEBKAC error - I have only been using Laravel/OctCMS for ~ 6 months.

[TimFoerster]

I think this was fixed here: https://github.com/scssphp/scssphp/commit/033accd47af0210c8db078f5be5a29fe43973ce2

[mediaclinic]

I think the problem is in this old project: leafo/scssphp. When I updated the Compiler.php with given Gauntry version, everything worked like a charm.

This problem with SCSS-compile came with php7.4 but does not exists with lower versions. Would it be a good choice to change this functionality to work with different solution? What do you think @LukeTowers, @mjauvin?

[mjauvin]

There are other problems with the asset compiler on branch 1.0 using php 7.4,not sure if they're all related to this problem. If so, then it might be worth fixing, otherwise I suggest updating to the 1.1 branch where the problem does not exist.

[LukeTowers]

@mediaclinic we're not going to do anything about it on 1.0. AFAIK it's fixed on 1.1, so use that instead. If there are problems on 1.1 then create a new issue with those details please.