LessCompiler variables with color

[SebastiaanKloos]

• OctoberCMS Build: 457
• PHP Version: 7.2.19

Description:

Is converted by the LessCompiler to the following:

Steps To Reproduce:

Create a theme with options to add a font. Use the variable in your less file.

[SebastiaanKloos]

OctoberCMS uses the oyejorge/less.php library. I found out the core of the issue. I've created a new issues here oyejorge/less.php#376. I will report back when fixed.

[Samuell1]

@SebastiaanKloos oyejorge/less.php#371

I think only way to fix that is to make fork of it or find new package

[LukeTowers]

There's also https://github.com/leafo/lessphp, which I think Assetic uses. As far as I was aware that was the library we were using, but I guess not?

[LukeTowers]

Plus October will be taking over Assetic FYI

[github-actions]

This issue will be closed and archived in 3 days, as there has been no activity in the last 30 days. If this issue is still relevant or you would like to see action on it, please respond and we will get the ball rolling.

[LukeTowers]

@jaxwilko can you take a look at this? How can we fix this with our Assetic takeover?

[jaxwilko]

@LukeTowers I shall take a look and see what's possible

[LukeTowers]

@SebastiaanKloos can you verify that this is still an issue in the Laravel 6 branch of October?

[SebastiaanKloos]

@LukeTowers I'll add it to my tasklist for this week

[SebastiaanKloos]

@LukeTowers Nope still the same:

li {
  font-family: #ff0000 Hat Display;
}

[bennothommo]

@SebastiaanKloos how have you defined the asset variable in the LESS file?

[multiwebinc]

Just FYI, the Less.php repo has now been archived, and the author recommends Wikimedia's fork:

Less.php
This project is no longer being updated. See Wikimedia's repo for a well-maintained fork.

[LukeTowers]

@multiwebinc we are using the wikimedia fork in the L6 branch

[SebastiaanKloos]

@SebastiaanKloos how have you defined the asset variable in the LESS file?

li {
  font-family: @primary-font;
}

[LukeTowers]

@SebastiaanKloos FYI, it's ` (a backtick) not ' (a single quote) for code formatting on github.

[bennothommo]

@SebastiaanKloos have you tried using one of the escaping functions in LESS? http://lesscss.org/functions/#string-functions

[SebastiaanKloos]

@SebastiaanKloos FYI, it's ` (a backtick) not ' (a single quote) for code formatting on github.

@LukeTowers Yeah I know. Couldn’t find it on my iOS keyboard... 🙈

Update: found it. You should hold the single quote, it gives you the option to typ a backtick

[SebastiaanKloos]

@SebastiaanKloos have you tried using one of the escaping functions in LESS? http://lesscss.org/functions/#string-functions

I’ll try the escaping functions!

[SebastiaanKloos]

Nope didn't work @bennothommo... I think it has to do with it being a variable.

[LukeTowers]

@SebastiaanKloos did you submit an issue to the wikimedia Less library that the Laravel 6 branch is now using?

[SebastiaanKloos]

@LukeTowers Not yet. I will submit an issue to the wikimedia Less library soon.

[daftspunk]

Yes, please take this up with the https://github.com/wikimedia/less.php team as it is nothing to do with October CMS. You'll need to ask for some way to escape the "color name to hex" conversion. In the meantime, you could always just rename your font. Hope this helps!