Clay: Syntax error trying to create Liferay Theme and compiling with Ruby Sass

[antonio-ortega]

Hi,

When I try to create a Liferay Theme for 7.1(Clay2.x) using Maven
https://portal.liferay.dev/docs/7-1/reference/-/knowledge_base/r/theme-template
And compiling with Ruby Sass
<sassCompilerClassName>ruby</sasscompilerClassName>

I got two errors related to Clay:
Error 1

Using Ruby Sass compiler
Sass::SyntaxError: Invalid CSS after "...lor}: #{$value}": expected "{", was ";"
                expected at uri:classloader:/gems/sass-3.4.25/lib/sass/scss/parser.rb:1207
                expected at uri:classloader:/gems/sass-3.4.25/lib/sass/scss/parser.rb:1137

This is coming from here:
@each $color, $value in $colors { --#{$color}: #{$value}; }

Error 2

Using Ruby Sass compiler
Sass::SyntaxError: (breakpoint-up: lg, padding-bottom: 3rem, padding-top: 3rem, padding-bottom-mobile: 1rem, padding-top-mobile: 1rem) isn't a valid CSS value.
              to_s at uri:classloader:/gems/sass-3.4.25/lib/sass/script/value/map.rb:52
              join at org/jruby/RubyArray.java:2011

This is coming from here:

$container-form-lg: map-deep-merge((
    breakpoint-up: lg,
    padding-bottom: 3rem,
    padding-top: 3rem,
    padding-bottom-mobile: 1rem,
    padding-top-mobile: 1rem
), $container-form-lg);

And it happens for both usages of map-deep-merge in that file. If I change it by map-merge it works.

Can you have a look, please?

Thanks.

[pat270]

Hey @antonio-ortega,

Is there a reason why Ruby Sass needs to be used? Ruby Sass is no longer maintained as of March 26, 2019 https://sass-lang.com/ruby-sass and https://github.com/sass/ruby-sass.

I also have Ruby Sass 3.7.2 on my machine and was able to compile without errors.

It's strange that changing $container-form-lg and $container-view to using map-merge would fix Error 1 and Error 2. They are unrelated to each other.

Error 1 is from Bootstrap 4. The code compiles Bootstrap Sass color and breakpoint variables to CSS variables.

Error 2 is Clay CSS specific and I don't understand why it fails there, but work everywhere else (I use map-deep-merge everywhere).

I can provide more info as soon as I find a copy of Ruby Sass 3.4.25. In the meantime, can we update Maven to use a newer Ruby Sass version and see if it still fails? The Sass site provides us with instructions to move away from Ruby Sass. We should consider moving away if we can.

[antonio-ortega]

Hi @pat270 ,

I'm aware about the risks of using Ruby Sass, but it is an available option for Liferay customers and some of them decide to use it. It's like using IE11, I would't use it, but the option is available for customers.

My apologies because I wrote the issue's description in a rush and maybe it's not clear enough. Using map-merge instead of map-deep-merge only solves Error 2. I meant there are two cases in that _globals.scss file where we are using map-deep-merge and we had to change both.

Thanks for your help.

Regards.

[mkampmey]

I want to add that this error did not occur last week. Apparently some third party dependency was updated during the last couple of days. For example I also cannot build the gradle themes from the liferay-blade-samples github project (on 7.1 branch). Somehow Ruby Sass is automatically picked if you do not specify anything. If I add the line cssBuilder group: "com.liferay", name: "com.liferay.css.builder", version: "3.0.0" to the dependencies block of my build.gradle file, everything works fine.

[antonio-ortega]

LPS-103051 introduced the behavior reported by @mkampmey and LPS-103169 has been created to fix it.

[antonio-ortega]

Hi @pat270 ,

Although the second error I reported here has been fixed in Liferay by LPS-10369, I still can see the first error coming from _root.scss file.

As far as I've been able to see this is a common issue when trying to compile bootstrap dependencies using Ruby Sass and here they provide a couple of possible solutions. I've tried them, and they work, or at least I can build my Liferay Theme with latest Clay using Ruby Sass as a compiler, but I'm not sure about possible side effects.

Since I've opened an issue with two error, which is not a good practice, do you want me to open a new issue only with that error about _root.scss file and you can have a look?

Thanks in advance for your effort.

[pat270]

@antonio-ortega It's ok we can keep it under this issue. The Ruby Sass version will be updated once LPS-103169 is complete and the _root.scss issue should go away. If for whatever reason you need a fix in Clay CSS, I can modify Bootstrap source.

[pat270]

Closing this I was told this was fixed, feel free to reopen if I'm incorrect.

[duracell80]

This is affecting building a theme for 7.3. In my package.json if I try to go above 5.0.0 on styled and unstyled, I get this map error.

Message:
build_css\clay\functions_global-functions.scss
Error: argument $map2 of map-deep-merge($map1, $map2) must be a map
on line 33 of build/_css/clay/functions/_global-functions.scss, in function map-deep-merge
from line 468 of build/_css/clay/variables/_buttons.scss
from line 9 of build/_css/clay/_variables.scss
from line 14 of build/_css/clay/atlas.scss
from line 1 of build/_css/clay.scss

p-deep-merge($map1, $map2)` must be a map');

[duracell80]

For anyone running into compile errors with map-deep-merge. Be careful with the _clay_variables.scss file in the src of your theme. I had a $btn-link : #00558C; which was causing this error ... Error: argument $map2 of map-deep-merge($map1, $map2) must be a map.

It could happen with any variable, some of these are not namespaced or isolated enough to prevent human error.

[pat270]

@duracell80
Glad you were able to figure it out. Thanks for the feedback btw. I'll keep a note about namespacing our variables in the next major version (not sure when it will happen). It should be a lot easier to do since we won't be at the mercy of Bootstrap's api.

Let me know what other pain points you are having with the CSS framework. We'll definitely try to make it better each iteration.

[duracell80]

Yeah I did trip myself up with $btn-link and it was pretty difficult to trace it back to that point.

An updated clay paver would be extremely helpful for others. I'm past that part of the process but I can see updated variables in the paver having use for others.